#751

docs/resources/changelog.md

@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `blur()`, `click()`, and `focus()` methods as well as `sl-blur` and `sl-focus` events to `<sl-icon-button>` [#730](https://github.com/shoelace-style/shoelace/issues/730)
 - Fixed a bug where updating a menu item's label wouldn't update the display label in `<sl-select>` [#729](https://github.com/shoelace-style/shoelace/issues/729)
 - Fixed a bug where the FormData event polyfill was causing issues with older browsers [#747](https://github.com/shoelace-style/shoelace/issues/747)
+- Fixed a bug that caused a console error when setting `value` to `null` or `undefined` in `<sl-input>`, `<sl-select>`, and `<sl-textarea>` [#751](https://github.com/shoelace-style/shoelace/pull/751)
 - Improved behavior of clearable and password toggle buttons in `<sl-input>` and `<sl-select>` [#745](https://github.com/shoelace-style/shoelace/issues/745)
 - Improved performance of `<sl-select>` by caching menu items instead of traversing for them each time
 - Revert form submit logic [#718](https://github.com/shoelace-style/shoelace/issues/718)

src/components/select/select.ts

@@ -485,7 +485,7 @@ export default class SlSelect extends LitElement {
             class=${classMap({
               select: true,
               'select--open': this.isOpen,
-              'select--empty': this.value.length === 0,
+              'select--empty': !this.value,
               'select--focused': this.hasFocus,
               'select--clearable': this.clearable,
               'select--disabled': this.disabled,

src/components/textarea/textarea.ts

@@ -291,7 +291,7 @@ export default class SlTextarea extends LitElement {
               'textarea--filled': this.filled,
               'textarea--disabled': this.disabled,
               'textarea--focused': this.hasFocus,
-              'textarea--empty': this.value.length === 0,
+              'textarea--empty': !this.value,
               'textarea--invalid': this.invalid,
               'textarea--resize-none': this.resize === 'none',
               'textarea--resize-vertical': this.resize === 'vertical',