prevent errors when setting controls undefined

docs/resources/changelog.md

@@ -6,6 +6,10 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> 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.

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(
       {

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',