fix(document): reduce impact of React@17 workaround (#992)

Author: ph-fritsche

src/document/index.ts

@@ -80,8 +80,7 @@ function prepareElement(el: Element) {
 export {
   getUIValue,
   setUIValue,
-  startTrackValue,
-  endTrackValue,
+  commitValueAfterInput,
   clearInitialValue,
 } from './value'
 export {getUISelection, setUISelection} from './selection'

src/document/selection.ts

@@ -145,6 +145,12 @@ export function getUISelection(
   }
 }
 
+export function hasUISelection(
+  element: HTMLInputElement | HTMLTextAreaElement,
+) {
+  return !!element[UISelection]
+}
+
 /** Flag the IDL selection as clean. This does not change the selection. */
 export function setUISelectionClean(
   element: HTMLInputElement | HTMLTextAreaElement,

src/document/value.ts

@@ -1,6 +1,6 @@
-import {isElementType} from '../utils'
+import {getWindow, isElementType} from '../utils'
 import {prepareInterceptor} from './interceptor'
-import {setUISelection} from './selection'
+import {hasUISelection, setUISelection} from './selection'
 
 const UIValue = Symbol('Displayed value in UI')
 const InitialValue = Symbol('Initial value to compare on blur')
@@ -12,6 +12,9 @@ type Value = {
 }
 
 declare global {
+  interface Window {
+    REACT_VERSION?: number
+  }
   interface Element {
     [UIValue]?: string
     [InitialValue]?: string
@@ -31,7 +34,7 @@ function valueInterceptor(
 
   if (isUI) {
     this[UIValue] = String(v)
-    setPreviousValue(this, String(this.value))
+    startTrackValue(this)
   }
 
   return {
@@ -102,19 +105,28 @@ export function getInitialValue(
   return element[InitialValue]
 }
 
-function setPreviousValue(
-  element: HTMLInputElement | HTMLTextAreaElement,
-  v: string,
-) {
-  element[TrackChanges] = {...element[TrackChanges], previousValue: v}
+// When the input event happens in the browser, React executes all event handlers
+// and if they change state of a controlled value, nothing happens.
+// But when we trigger the event handlers in test environment with React@17,
+// the changes are rolled back before the state update is applied.
+// This results in a reset cursor.
+// There might be a better way to work around if we figure out
+// why the batched update is executed differently in our test environment.
+
+function isReact17Element(element: Element) {
+  return (
+    Object.getOwnPropertyNames(element).some(k => k.startsWith('__react')) &&
+    getWindow(element).REACT_VERSION === 17
+  )
 }
 
-export function startTrackValue(
-  element: HTMLInputElement | HTMLTextAreaElement,
-) {
+function startTrackValue(element: HTMLInputElement | HTMLTextAreaElement) {
+  if (!isReact17Element(element)) {
+    return
+  }
+
   element[TrackChanges] = {
-    ...element[TrackChanges],
-    nextValue: String(element.value),
+    previousValue: String(element.value),
     tracked: [],
   }
 }
@@ -125,38 +137,36 @@ function trackOrSetValue(
 ) {
   element[TrackChanges]?.tracked?.push(v)
 
-  if (!element[TrackChanges]?.tracked) {
-    setCleanValue(element, v)
+  if (!element[TrackChanges]) {
+    setUIValueClean(element)
+    setUISelection(element, {focusOffset: v.length})
   }
 }
 
-function setCleanValue(
+export function commitValueAfterInput(
   element: HTMLInputElement | HTMLTextAreaElement,
-  v: string,
+  cursorOffset: number,
 ) {
-  element[UIValue] = undefined
-
-  // Programmatically setting the value property
-  // moves the cursor to the end of the input.
-  setUISelection(element, {focusOffset: v.length})
-}
-
-/**
- * @returns `true` if we recognize a React state reset and update
- */
-export function endTrackValue(element: HTMLInputElement | HTMLTextAreaElement) {
   const changes = element[TrackChanges]
 
   element[TrackChanges] = undefined
 
+  if (!changes?.tracked?.length) {
+    return
+  }
+
   const isJustReactStateUpdate =
-    changes?.tracked?.length === 2 &&
+    changes.tracked.length === 2 &&
     changes.tracked[0] === changes.previousValue &&
-    changes.tracked[1] === changes.nextValue
+    changes.tracked[1] === element.value
 
-  if (changes?.tracked?.length && !isJustReactStateUpdate) {
-    setCleanValue(element, changes.tracked[changes.tracked.length - 1])
+  if (!isJustReactStateUpdate) {
+    setUIValueClean(element)
   }
 
-  return isJustReactStateUpdate
+  if (hasUISelection(element)) {
+    setUISelection(element, {
+      focusOffset: isJustReactStateUpdate ? cursorOffset : element.value.length,
+    })
+  }
 }

src/utils/edit/input.ts

@@ -1,9 +1,8 @@
 import {
   clearInitialValue,
-  endTrackValue,
+  commitValueAfterInput,
   getUIValue,
   setUIValue,
-  startTrackValue,
   UISelectionRange,
 } from '../../document'
 import {dispatchUIEvent} from '../../event'
@@ -233,24 +232,9 @@ function commitInput(
   newOffset: number,
   inputInit: InputEventInit,
 ) {
-  // When the input event happens in the browser, React executes all event handlers
-  // and if they change state of a controlled value, nothing happens.
-  // But when we trigger the event handlers in test environment,
-  // the changes are rolled back by React before the state update is applied.
-  // Then the updated state is applied which results in a reset cursor.
-  // There is probably a better way to work around  if we figure out
-  // why the batched update is executed differently in our test environment.
-  startTrackValue(element)
-
   dispatchUIEvent(config, element, 'input', inputInit)
 
-  if (endTrackValue(element as HTMLInputElement)) {
-    setSelection({
-      focusNode: element,
-      anchorOffset: newOffset,
-      focusOffset: newOffset,
-    })
-  }
+  commitValueAfterInput(element, newOffset)
 }
 
 function isValidNumberInput(value: string) {

tests/react/index.tsx

@@ -1,7 +1,7 @@
-import React, {useState} from 'react'
+import React, {useLayoutEffect, useRef, useState} from 'react'
 import {render, screen, waitFor} from '@testing-library/react'
 import userEvent from '#src'
-import {getUIValue} from '#src/document'
+import {getUISelection, getUIValue} from '#src/document'
 import {addListeners} from '#testHelpers'
 
 // Run twice to verify we handle this correctly no matter
@@ -62,17 +62,24 @@ test.each(['1.5', '1e5'])(
   },
 )
 
-test('detect value change in event handler', async () => {
+test('detect value and selection change', async () => {
   function Input() {
+    const el = useRef<HTMLInputElement>(null)
     const [val, setVal] = useState('')
 
+    useLayoutEffect(() => {
+      if (val === 'ab') {
+        el.current?.setSelectionRange(1, 1)
+      }
+    })
+
     return (
       <input
-        type="number"
+        ref={el}
         value={val}
         onChange={e => {
-          if (Number(e.target.value) == 12) {
-            e.target.value = '34'
+          if (e.target.value === 'acb') {
+            e.target.value = 'def'
           }
           setVal(e.target.value)
         }}
@@ -81,11 +88,21 @@ test('detect value change in event handler', async () => {
   }
   render(<Input />)
   const user = userEvent.setup()
-  screen.getByRole('spinbutton').focus()
+  const element = screen.getByRole<HTMLInputElement>('textbox')
+  element.focus()
+
+  await user.keyboard('ab')
+  expect(getUIValue(element)).toBe('ab')
+  expect(element).toHaveValue('ab')
+  expect(getUISelection(element)).toHaveProperty('focusOffset', 1)
+
+  await user.keyboard('c')
+  expect(getUIValue(element)).toBe('def')
+  expect(element).toHaveValue('def')
 
-  await user.keyboard('125')
-  expect(getUIValue(screen.getByRole('spinbutton'))).toBe('345')
-  expect(screen.getByRole('spinbutton')).toHaveValue(345)
+  await user.keyboard('g')
+  expect(getUIValue(element)).toBe('defg')
+  expect(element).toHaveValue('defg')
 })
 
 test('trigger onChange SyntheticEvent on input', async () => {