backport PR 1752

docs/pages/resources/changelog.md

@@ -20,8 +20,9 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - Removed `default` from `<wa-button>` and made `neutral` the new default
 - Removed the `circle` modifier from `<wa-button>` because button's no longer have a set height
 
-## Next
+## 2.12.0
 
+- Added the Italian translation [#1727]
 - Added the ability to call `form.checkValidity()` and it will use Shoelace's custom `checkValidity()` handler. [#1708]
 - Fixed a bug where nested dialogs were not properly trapping focus. [#1711]
 - Fixed a bug with form controls removing the custom validity handlers from the form. [#1708]

src/components/input/input.component.ts

@@ -354,10 +354,12 @@ export default class WaInput extends WebAwesomeElement implements WebAwesomeForm
     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('<wa-input>', () => {
     });
   });
 
+  describe('when using the setRangeText() function', () => {
+    it('should set replacement text in the correct location', async () => {
+      const el = await fixture<WaInput>(html` <wa-input value="test"></wa-input> `);
+
+      el.focus();
+      el.setSelectionRange(1, 3);
+      el.setRangeText('boom');
+      await el.updateComplete;
+      expect(el.value).to.equal('tboomt'); // cspell:disable-line
+    });
+  });
+
   runFormControlBaseTests('wa-input');
 });

src/components/textarea/textarea.component.ts

@@ -267,14 +267,12 @@ export default class WaTextarea extends WebAwesomeElement implements WebAwesomeF
     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('<wa-textarea>', () => {
     });
   });
 
+  describe('when using the setRangeText() function', () => {
+    it('should set replacement text in the correct location', async () => {
+      const el = await fixture<WaTextarea>(html` <wa-textarea value="test"></wa-textarea> `);
+
+      el.focus();
+      el.setSelectionRange(1, 3);
+      el.setRangeText('boom');
+      await el.updateComplete;
+      expect(el.value).to.equal('tboomt'); // cspell:disable-line
+    });
+  });
+
   runFormControlBaseTests('wa-textarea');
 });