fix: reset UI selection on setter (#770)

src/document/selection.ts

@@ -12,31 +12,52 @@ declare global {
   }
 }
 
-function setSelectionInterceptor(
-  this: HTMLInputElement | HTMLTextAreaElement,
-  start: number | Value | null,
-  end: number | null,
-  direction: 'forward' | 'backward' | 'none' = 'none',
+export function prepareSelectionInterceptor(
+  element: HTMLInputElement | HTMLTextAreaElement,
 ) {
-  const isUI = start && typeof start === 'object' && start[UISelection]
+  prepareInterceptor(
+    element,
+    'setSelectionRange',
+    function interceptorImpl(
+      this: HTMLInputElement | HTMLTextAreaElement,
+      start: number | Value | null,
+      end: number | null,
+      direction: 'forward' | 'backward' | 'none' = 'none',
+    ) {
+      const isUI = start && typeof start === 'object' && start[UISelection]
 
-  this[UISelection] = isUI
-    ? {start: start.valueOf(), end: Number(end)}
-    : undefined
+      this[UISelection] = isUI
+        ? {start: start.valueOf(), end: Number(end)}
+        : undefined
 
-  return {
-    realArgs: [Number(start), end, direction] as [
-      number,
-      number,
-      typeof direction,
-    ],
-  }
-}
+      return {
+        realArgs: [Number(start), end, direction] as [
+          number,
+          number,
+          typeof direction,
+        ],
+      }
+    },
+  )
 
-export function prepareSelectionInterceptor(
-  element: HTMLInputElement | HTMLTextAreaElement,
-) {
-  prepareInterceptor(element, 'setSelectionRange', setSelectionInterceptor)
+  prepareInterceptor(
+    element,
+    'selectionStart',
+    function interceptorImpl(this, v) {
+      this[UISelection] = undefined
+
+      return {realArgs: v}
+    },
+  )
+  prepareInterceptor(
+    element,
+    'selectionEnd',
+    function interceptorImpl(this, v) {
+      this[UISelection] = undefined
+
+      return {realArgs: v}
+    },
+  )
 }
 
 export function setUISelection(

tests/document/index.ts

@@ -92,3 +92,29 @@ test('maintain selection range on elements without support for selection range',
   })
   expect(element.selectionStart).toBe(null)
 })
+
+test('clear UI selection if selection is programmatically set', () => {
+  const {element} = setup<HTMLInputElement>(`<input/>`)
+
+  prepare(element)
+
+  element.focus()
+  setUIValue(element, 'abc')
+  setUISelection(element, 1, 2)
+  expect(element.selectionStart).toBe(1)
+
+  element.setSelectionRange(0, 1)
+  expect(getUISelection(element)).toEqual({selectionStart: 0, selectionEnd: 1})
+
+  setUISelection(element, 2, 3)
+  expect(getUISelection(element)).toEqual({selectionStart: 2, selectionEnd: 3})
+
+  element.selectionEnd = 1
+  expect(getUISelection(element)).toEqual({selectionStart: 1, selectionEnd: 1})
+
+  setUISelection(element, 0, 1)
+  expect(getUISelection(element)).toEqual({selectionStart: 0, selectionEnd: 1})
+
+  element.selectionStart = 2
+  expect(getUISelection(element)).toEqual({selectionStart: 2, selectionEnd: 2})
+})