From 4864ab808db57fdcf2b6537eb416e7c5e06db471 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 1 Dec 2023 10:06:48 -0500
Subject: [PATCH] Fixes `setRangeText()` in `<sl-input>` and `<sl-textarea>`
 (#1752)

* fix setSelectionRange(); fixes #1746

* remove comment

* remove console.log
---
 docs/pages/resources/changelog.md             |  1 +
 src/components/input/input.component.ts       |  8 +++++---
 src/components/input/input.test.ts            | 12 ++++++++++++
 src/components/textarea/textarea.component.ts | 10 ++++------
 src/components/textarea/textarea.test.ts      | 12 ++++++++++++
 5 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index a7b2eb7003..04263a06e5 100644
--- a/docs/pages/resources/changelog.md
+++ b/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
diff --git a/src/components/input/input.component.ts b/src/components/input/input.component.ts
index 13f272e019..53d619df83 100644
--- a/src/components/input/input.component.ts
+++ b/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;
diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts
index e0149eded6..a7de270035 100644
--- a/src/components/input/input.test.ts
+++ b/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');
 });
diff --git a/src/components/textarea/textarea.component.ts b/src/components/textarea/textarea.component.ts
index 6a4fe05d3d..27eccc1858 100644
--- a/src/components/textarea/textarea.component.ts
+++ b/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;
diff --git a/src/components/textarea/textarea.test.ts b/src/components/textarea/textarea.test.ts
index 5f79a4cfd3..8b7537ad57 100644
--- a/src/components/textarea/textarea.test.ts
+++ b/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');
 });