kopia lustrzana https://github.com/shoelace-style/shoelace
fixes #1061
rodzic
066abe4e52
commit
1ff05c4b3d
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
Ładowanie…
Reference in New Issue