Fixes setRangeText() in <sl-input> and <sl-textarea> (#1752)

* fix setSelectionRange(); fixes #1746

* remove comment

* remove console.log

docs/pages/resources/changelog.md

@@ -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

src/components/input/input.component.ts

@@ -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;

src/components/input/input.test.ts

@@ -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');
 });

src/components/textarea/textarea.component.ts

@@ -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;

src/components/textarea/textarea.test.ts

@@ -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');
 });