fix(document): track HTMLInputElement.setRangeText() (#984)

src/document/index.ts

@@ -1,6 +1,7 @@
 import {dispatchUIEvent} from '../event'
 import {Config} from '../setup'
 import {prepareSelectionInterceptor} from './selection'
+import {prepareRangeTextInterceptor} from './setRangeText'
 import {
   clearInitialValue,
   getInitialValue,
@@ -69,6 +70,7 @@ function prepareElement(el: Node | HTMLInputElement) {
   if ('value' in el) {
     prepareValueInterceptor(el)
     prepareSelectionInterceptor(el)
+    prepareRangeTextInterceptor(el)
   }
 
   el[isPrepared] = isPrepared

src/document/selection.ts

@@ -144,3 +144,10 @@ export function getUISelection(
     endOffset: Math.max(sel.anchorOffset, sel.focusOffset),
   }
 }
+
+/** Flag the IDL selection as clean. This does not change the selection. */
+export function setUISelectionClean(
+  element: HTMLInputElement | HTMLTextAreaElement,
+) {
+  element[UISelection] = undefined
+}

src/document/setRangeText.ts

@@ -0,0 +1,21 @@
+import {prepareInterceptor} from './interceptor'
+import {setUISelectionClean} from './selection'
+import {setUIValueClean} from './value'
+
+export function prepareRangeTextInterceptor(
+  element: HTMLInputElement | HTMLTextAreaElement,
+) {
+  prepareInterceptor(
+    element,
+    'setRangeText',
+    function interceptorImpl(...realArgs) {
+      return {
+        realArgs,
+        then: () => {
+          setUIValueClean(element)
+          setUISelectionClean(element)
+        },
+      }
+    },
+  )
+}

src/document/value.ts

@@ -81,6 +81,13 @@ export function getUIValue(element: HTMLInputElement | HTMLTextAreaElement) {
     : String(element[UIValue])
 }
 
+/** Flag the IDL value as clean. This does not change the value.*/
+export function setUIValueClean(
+  element: HTMLInputElement | HTMLTextAreaElement,
+) {
+  element[UIValue] = undefined
+}
+
 export function clearInitialValue(
   element: HTMLInputElement | HTMLTextAreaElement,
 ) {

tests/document/index.ts

@@ -183,3 +183,22 @@ test('select input without selectionRange support', () => {
   expect(getUISelection(element)).toHaveProperty('startOffset', 0)
   expect(getUISelection(element)).toHaveProperty('endOffset', 3)
 })
+
+test('track changes to value and selection per setRangeText', () => {
+  const {element} = render<HTMLInputElement>(`<input/>`)
+  prepare(element)
+  setUIValue(element, 'abcd')
+  setUISelection(element, {focusOffset: 3})
+
+  element.setRangeText('X', 1, 2)
+  expect(element).toHaveValue('aXcd')
+  expect(element).toHaveProperty('selectionStart', 3)
+  expect(getUIValue(element)).toBe('aXcd')
+  expect(getUISelection(element)).toHaveProperty('focusOffset', 3)
+
+  element.setRangeText('Y', 1, 2, 'start')
+  expect(element).toHaveValue('aYcd')
+  expect(element).toHaveProperty('selectionEnd', 1)
+  expect(getUIValue(element)).toBe('aYcd')
+  expect(getUISelection(element)).toHaveProperty('focusOffset', 1)
+})