fixes #1061

docs/resources/changelog.md

@@ -11,9 +11,10 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 ## Next
 
 - Added the `sl-input` event to `<sl-checkbox>`, `<sl-color-picker>`, `<sl-radio>`, `<sl-range>`, and `<sl-switch>`
-- Fixed a bug in `<sl-input>` that caused the `sl-change` event to be incorrectly emitted when the value was set programmatically [#917](https://github.com/shoelace-style/shoelace/issues/917)
 - Fixed a bug in `<sl-color-picker>` that sometimes prevented the color from updating when clicking or tapping on the controls
 - Fixed a bug in `<sl-color-picker>` that prevented text from being entered in the color input
+- Fixed a bug in `<sl-input>` that caused the `sl-change` event to be incorrectly emitted when the value was set programmatically [#917](https://github.com/shoelace-style/shoelace/issues/917)
+- Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it impossible to disable spell checking [#1061](https://github.com/shoelace-style/shoelace/issues/1061)
 - Fixed non-modal behaviors in `<sl-drawer>` when using the `contained` attribute [#1051](https://github.com/shoelace-style/shoelace/issues/1051)
 
 ## 2.0.0-beta.86

src/components/input/input.test.ts

@@ -42,7 +42,7 @@ describe('<sl-input>', () => {
     expect(el.autocomplete).to.be.undefined;
     expect(el.autofocus).to.be.undefined;
     expect(el.enterkeyhint).to.be.undefined;
-    expect(el.spellcheck).to.be.undefined;
+    expect(el.spellcheck).to.be.true;
     expect(el.inputmode).to.be.undefined;
     expect(el.valueAsDate).to.be.null;
     expect(isNaN(el.valueAsNumber)).to.be.true;
@@ -330,4 +330,27 @@ describe('<sl-input>', () => {
       await el.updateComplete;
     });
   });
+
+  describe('when using spellcheck', () => {
+    it('should enable spellcheck when no attribute is present', async () => {
+      const el = await fixture<SlInput>(html` <sl-input></sl-input> `);
+      const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+      expect(input.getAttribute('spellcheck')).to.equal('true');
+      expect(input.spellcheck).to.be.true;
+    });
+
+    it('should enable spellcheck when set to "true"', async () => {
+      const el = await fixture<SlInput>(html` <sl-input spellcheck="true"></sl-input> `);
+      const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+      expect(input.getAttribute('spellcheck')).to.equal('true');
+      expect(input.spellcheck).to.be.true;
+    });
+
+    it('should disable spellcheck when set to "false"', async () => {
+      const el = await fixture<SlInput>(html` <sl-input spellcheck="false"></sl-input> `);
+      const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+      expect(input.getAttribute('spellcheck')).to.equal('false');
+      expect(input.spellcheck).to.be.false;
+    });
+  });
 });

src/components/input/input.ts

@@ -176,7 +176,15 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
   @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 
   /** Enables spell checking on the input. */
-  @property({ type: Boolean }) spellcheck: boolean;
+  @property({
+    type: Boolean,
+    converter: {
+      // Allow "true|false" attribute values but keep the property boolean
+      fromAttribute: value => (!value || value === 'false' ? false : true),
+      toAttribute: value => (value ? 'true' : 'false')
+    }
+  })
+  spellcheck = true;
 
   /**
    * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
@@ -445,7 +453,7 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
               autocomplete=${ifDefined(this.type === 'password' ? 'off' : this.autocomplete)}
               autocorrect=${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}
               ?autofocus=${this.autofocus}
-              spellcheck=${ifDefined(this.spellcheck)}
+              spellcheck=${this.spellcheck}
               pattern=${ifDefined(this.pattern)}
               enterkeyhint=${ifDefined(this.enterkeyhint)}
               inputmode=${ifDefined(this.inputmode)}

src/components/textarea/textarea.test.ts

@@ -34,7 +34,7 @@ describe('<sl-textarea>', () => {
     expect(el.autocomplete).to.be.undefined;
     expect(el.autofocus).to.be.undefined;
     expect(el.enterkeyhint).to.be.undefined;
-    expect(el.spellcheck).to.be.undefined;
+    expect(el.spellcheck).to.be.true;
     expect(el.inputmode).to.be.undefined;
   });
 
@@ -177,4 +177,27 @@ describe('<sl-textarea>', () => {
       expect(textarea.value).to.equal('');
     });
   });
+
+  describe('when using spellcheck', () => {
+    it('should enable spellcheck when no attribute is present', async () => {
+      const el = await fixture<SlTextarea>(html` <sl-textarea></sl-textarea> `);
+      const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('textarea')!;
+      expect(textarea.getAttribute('spellcheck')).to.equal('true');
+      expect(textarea.spellcheck).to.be.true;
+    });
+
+    it('should enable spellcheck when set to "true"', async () => {
+      const el = await fixture<SlTextarea>(html` <sl-textarea spellcheck="true"></sl-textarea> `);
+      const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('textarea')!;
+      expect(textarea.getAttribute('spellcheck')).to.equal('true');
+      expect(textarea.spellcheck).to.be.true;
+    });
+
+    it('should disable spellcheck when set to "false"', async () => {
+      const el = await fixture<SlTextarea>(html` <sl-textarea spellcheck="false"></sl-textarea> `);
+      const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('textarea')!;
+      expect(textarea.getAttribute('spellcheck')).to.equal('false');
+      expect(textarea.spellcheck).to.be.false;
+    });
+  });
 });

src/components/textarea/textarea.ts

@@ -109,7 +109,15 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
   @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 
   /** Enables spell checking on the textarea. */
-  @property({ type: Boolean }) spellcheck: boolean;
+  @property({
+    type: Boolean,
+    converter: {
+      // Allow "true|false" attribute values but keep the property boolean
+      fromAttribute: value => (!value || value === 'false' ? false : true),
+      toAttribute: value => (value ? 'true' : 'false')
+    }
+  })
+  spellcheck = true;
 
   /**
    * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual