Prevents error if sl-input has value undefined (#513)

The sl-input's value state being `undefined` is very common when using shoelace with frameworks. Instead of erroring out and not showing the input, this should handle it gracefully.
shoelace-style · Aug 30, 2021 · da3415d · da3415d
1 parent 147a8d2
commit da3415d
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
@@ -295,7 +295,7 @@ export default class SlInput extends LitElement {
             'input--pill': this.pill,
             'input--disabled': this.disabled,
             'input--focused': this.hasFocus,
-            'input--empty': this.value.length === 0,
+            'input--empty': this.value?.length === 0,
             'input--invalid': this.invalid
           })}
         >
@@ -344,7 +344,7 @@ export default class SlInput extends LitElement {
             @blur=${this.handleBlur}
           />
 
-          ${this.clearable && this.value.length > 0
+          ${this.clearable && this.value?.length > 0
             ? html`
                 <button
                   part="clear-button"