From 1ff05c4b3d9906bb5421ad06c94020556c444434 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 8 Dec 2022 14:42:04 -0500 Subject: [PATCH] fixes #1061 --- docs/resources/changelog.md | 3 ++- src/components/input/input.test.ts | 25 +++++++++++++++++++++++- src/components/input/input.ts | 12 ++++++++++-- src/components/textarea/textarea.test.ts | 25 +++++++++++++++++++++++- src/components/textarea/textarea.ts | 10 +++++++++- 5 files changed, 69 insertions(+), 6 deletions(-) diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index ffbe47c7..a2d3ea5d 100644 --- a/docs/resources/changelog.md +++ b/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 ``, ``, ``, ``, and `` -- Fixed a bug in `` 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 `` that sometimes prevented the color from updating when clicking or tapping on the controls - Fixed a bug in `` that prevented text from being entered in the color input +- Fixed a bug in `` 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 `` and `` that made it impossible to disable spell checking [#1061](https://github.com/shoelace-style/shoelace/issues/1061) - Fixed non-modal behaviors in `` when using the `contained` attribute [#1051](https://github.com/shoelace-style/shoelace/issues/1051) ## 2.0.0-beta.86 diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts index 475a8461..7c15139a 100644 --- a/src/components/input/input.test.ts +++ b/src/components/input/input.test.ts @@ -42,7 +42,7 @@ describe('', () => { 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('', () => { await el.updateComplete; }); }); + + describe('when using spellcheck', () => { + it('should enable spellcheck when no attribute is present', async () => { + const el = await fixture(html` `); + const input = el.shadowRoot!.querySelector('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(html` `); + const input = el.shadowRoot!.querySelector('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(html` `); + const input = el.shadowRoot!.querySelector('input')!; + expect(input.getAttribute('spellcheck')).to.equal('false'); + expect(input.spellcheck).to.be.false; + }); + }); }); diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 2680292a..f4c6cf6c 100644 --- a/src/components/input/input.ts +++ b/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)} diff --git a/src/components/textarea/textarea.test.ts b/src/components/textarea/textarea.test.ts index 67dc81e0..7ba87951 100644 --- a/src/components/textarea/textarea.test.ts +++ b/src/components/textarea/textarea.test.ts @@ -34,7 +34,7 @@ describe('', () => { 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('', () => { expect(textarea.value).to.equal(''); }); }); + + describe('when using spellcheck', () => { + it('should enable spellcheck when no attribute is present', async () => { + const el = await fixture(html` `); + const textarea = el.shadowRoot!.querySelector('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(html` `); + const textarea = el.shadowRoot!.querySelector('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(html` `); + const textarea = el.shadowRoot!.querySelector('textarea')!; + expect(textarea.getAttribute('spellcheck')).to.equal('false'); + expect(textarea.spellcheck).to.be.false; + }); + }); }); diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 14b02c34..972a3c9a 100644 --- a/src/components/textarea/textarea.ts +++ b/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