fix(document): track HTMLInputElement.setRangeText()

ph-fritsche · ph-fritsche · commit 5be8ddec3d12 · 2022-07-14T09:58:30.000Z
diff --git a/src/document/index.ts b/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
diff --git a/src/document/selection.ts b/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
+}
diff --git a/src/document/setRangeText.ts b/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)
+        },
+      }
+    },
+  )
+}
diff --git a/src/document/value.ts b/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,
 ) {
diff --git a/tests/document/index.ts b/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)
+})

Original file line number	Diff line number	Diff line change
`@@ -144,3 +144,10 @@ export function getUISelection(`
`144`	`144`	`endOffset: Math.max(sel.anchorOffset, sel.focusOffset),`
`145`	`145`	`}`
`146`	`146`	`}`
	`147`	`+`
	`148`	`+/** Flag the IDL selection as clean. This does not change the selection. */`
	`149`	`+export function setUISelectionClean(`
	`150`	`+ element: HTMLInputElement \| HTMLTextAreaElement,`
	`151`	`+) {`
	`152`	`+ element[UISelection] = undefined`
	`153`	`+}`