kopia lustrzana https://github.com/shoelace-style/shoelace
Fixes `setRangeText()` in `<sl-input>` and `<sl-textarea>` (#1752)
* fix setSelectionRange(); fixes #1746 * remove comment * remove console.logpull/1766/head
rodzic
e2b7327d98
commit
4864ab808d
|
@ -15,6 +15,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
|
|||
## Next
|
||||
|
||||
- Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
|
||||
- Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
|
||||
- Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
|
||||
|
||||
## 2.12.0
|
||||
|
|
|
@ -347,10 +347,12 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
|
|||
replacement: string,
|
||||
start?: number,
|
||||
end?: number,
|
||||
selectMode?: 'select' | 'start' | 'end' | 'preserve'
|
||||
selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'
|
||||
) {
|
||||
// @ts-expect-error - start, end, and selectMode are optional
|
||||
this.input.setRangeText(replacement, start, end, selectMode);
|
||||
const selectionStart = start ?? this.input.selectionStart!;
|
||||
const selectionEnd = end ?? this.input.selectionEnd!;
|
||||
|
||||
this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);
|
||||
|
||||
if (this.value !== this.input.value) {
|
||||
this.value = this.input.value;
|
||||
|
|
|
@ -545,5 +545,17 @@ describe('<sl-input>', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('when using the setRangeText() function', () => {
|
||||
it('should set replacement text in the correct location', async () => {
|
||||
const el = await fixture<SlInput>(html` <sl-input value="test"></sl-input> `);
|
||||
|
||||
el.focus();
|
||||
el.setSelectionRange(1, 3);
|
||||
el.setRangeText('boom');
|
||||
await el.updateComplete;
|
||||
expect(el.value).to.equal('tboomt'); // cspell:disable-line
|
||||
});
|
||||
});
|
||||
|
||||
runFormControlBaseTests('sl-input');
|
||||
});
|
||||
|
|
|
@ -260,14 +260,12 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
|
|||
replacement: string,
|
||||
start?: number,
|
||||
end?: number,
|
||||
selectMode?: 'select' | 'start' | 'end' | 'preserve'
|
||||
selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'
|
||||
) {
|
||||
// @ts-expect-error - start, end, and selectMode are optional
|
||||
this.input.setRangeText(replacement, start, end, selectMode);
|
||||
const selectionStart = start ?? this.input.selectionStart;
|
||||
const selectionEnd = end ?? this.input.selectionEnd;
|
||||
|
||||
if (this.value !== this.input.value) {
|
||||
this.value = this.input.value;
|
||||
}
|
||||
this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);
|
||||
|
||||
if (this.value !== this.input.value) {
|
||||
this.value = this.input.value;
|
||||
|
|
|
@ -295,5 +295,17 @@ describe('<sl-textarea>', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('when using the setRangeText() function', () => {
|
||||
it('should set replacement text in the correct location', async () => {
|
||||
const el = await fixture<SlTextarea>(html` <sl-textarea value="test"></sl-textarea> `);
|
||||
|
||||
el.focus();
|
||||
el.setSelectionRange(1, 3);
|
||||
el.setRangeText('boom');
|
||||
await el.updateComplete;
|
||||
expect(el.value).to.equal('tboomt'); // cspell:disable-line
|
||||
});
|
||||
});
|
||||
|
||||
runFormControlBaseTests('sl-textarea');
|
||||
});
|
||||
|
|
Ładowanie…
Reference in New Issue