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
|
## Next
|
||||||
|
|
||||||
- Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
|
- 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]
|
- Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
|
||||||
|
|
||||||
## 2.12.0
|
## 2.12.0
|
||||||
|
|
|
@ -347,10 +347,12 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
|
||||||
replacement: string,
|
replacement: string,
|
||||||
start?: number,
|
start?: number,
|
||||||
end?: number,
|
end?: number,
|
||||||
selectMode?: 'select' | 'start' | 'end' | 'preserve'
|
selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'
|
||||||
) {
|
) {
|
||||||
// @ts-expect-error - start, end, and selectMode are optional
|
const selectionStart = start ?? this.input.selectionStart!;
|
||||||
this.input.setRangeText(replacement, start, end, selectMode);
|
const selectionEnd = end ?? this.input.selectionEnd!;
|
||||||
|
|
||||||
|
this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);
|
||||||
|
|
||||||
if (this.value !== this.input.value) {
|
if (this.value !== this.input.value) {
|
||||||
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');
|
runFormControlBaseTests('sl-input');
|
||||||
});
|
});
|
||||||
|
|
|
@ -260,14 +260,12 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
|
||||||
replacement: string,
|
replacement: string,
|
||||||
start?: number,
|
start?: number,
|
||||||
end?: number,
|
end?: number,
|
||||||
selectMode?: 'select' | 'start' | 'end' | 'preserve'
|
selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'
|
||||||
) {
|
) {
|
||||||
// @ts-expect-error - start, end, and selectMode are optional
|
const selectionStart = start ?? this.input.selectionStart;
|
||||||
this.input.setRangeText(replacement, start, end, selectMode);
|
const selectionEnd = end ?? this.input.selectionEnd;
|
||||||
|
|
||||||
if (this.value !== this.input.value) {
|
this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);
|
||||||
this.value = this.input.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.value !== this.input.value) {
|
if (this.value !== this.input.value) {
|
||||||
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');
|
runFormControlBaseTests('sl-textarea');
|
||||||
});
|
});
|
||||||
|
|
Ładowanie…
Reference in New Issue