From 00bf318ee90fb322c949757e605209a1fdd7dba2 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 30 Aug 2021 08:27:47 -0400 Subject: [PATCH] prevent errors when setting controls undefined --- docs/resources/changelog.md | 4 ++++ src/components/select/select.ts | 4 ++-- src/components/textarea/textarea.ts | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 46b3b1482..7bd1064c8 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -6,6 +6,10 @@ Components with the Experimental badge _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛 +## Next + +- Fixed a bug where form controls would error out when the value was set to `undefined` [#513](https://github.com/shoelace-style/shoelace/pull/513) + ## 2.0.0-beta.49 This release changes the way focus states are applied to elements. In browsers that support [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible), it will be used. In unsupportive browsers ([currently only Safari](https://caniuse.com/mdn-css_selectors_focus-visible)), `:focus` will be used instead. This means the browser will determine whether a focus ring should be shown based on how the user interacts with the page. diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 5cc2de267..970531c38 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -274,7 +274,7 @@ export default class SlSelect extends LitElement { const item = event.detail.item; if (this.multiple) { - this.value = this.value.includes(item.value) + this.value = this.value?.includes(item.value) ? (this.value as []).filter(v => v !== item.value) : [...this.value, item.value]; } else { @@ -423,7 +423,7 @@ export default class SlSelect extends LitElement { } render() { - const hasSelection = this.multiple ? this.value.length > 0 : this.value !== ''; + const hasSelection = this.multiple ? this.value?.length > 0 : this.value !== ''; return renderFormControl( { diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index acbc6695f..8e4c68ea7 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -299,7 +299,7 @@ export default class SlTextarea extends LitElement { 'textarea--large': this.size === 'large', 'textarea--disabled': this.disabled, 'textarea--focused': this.hasFocus, - 'textarea--empty': this.value.length === 0, + 'textarea--empty': this.value?.length === 0, 'textarea--invalid': this.invalid, 'textarea--resize-none': this.resize === 'none', 'textarea--resize-vertical': this.resize === 'vertical',