fix(keyboard): dispatch change event on blur (#703)

ph-fritsche · web-flow · commit 9600abb57d28 · 2021-07-25T15:57:11.000+02:00
diff --git a/src/__tests__/keyboard/shared/fireInputEvent.ts b/src/__tests__/keyboard/shared/fireInputEvent.ts
@@ -0,0 +1,23 @@
+import {setup} from '__tests__/helpers/utils'
+import userEvent from '../../../'
+
+it('dispatch change event on blur', () => {
+  const {element, getEvents} = setup('<input/>')
+
+  ;(element as HTMLInputElement).focus()
+  userEvent.keyboard('foo')
+  ;(element as HTMLInputElement).blur()
+
+  expect(getEvents('change')).toHaveLength(1)
+})
+
+it('do not dispatch change event if value did not change', () => {
+  const {element, getEvents} = setup('<input/>')
+
+  ;(element as HTMLInputElement).focus()
+  userEvent.keyboard('foo')
+  userEvent.keyboard('{backspace}{backspace}{backspace}')
+  ;(element as HTMLInputElement).blur()
+
+  expect(getEvents('change')).toHaveLength(0)
+})
diff --git a/src/keyboard/shared/fireInputEvent.ts b/src/keyboard/shared/fireInputEvent.ts
@@ -70,6 +70,15 @@ function setSelectionRangeAfterInputHandler(
   }
 }
 
+const initial = Symbol('initial input value/textContent')
+const onBlur = Symbol('onBlur')
+declare global {
+  interface Element {
+    [initial]?: string
+    [onBlur]?: EventListener
+  }
+}
+
 /**
  * React tracks the changes on element properties.
  * This workaround tries to alter the DOM element without React noticing,
@@ -92,8 +101,39 @@ function applyNative<T extends Element, P extends keyof T>(
     Object.defineProperty(element, propName, nativeDescriptor)
   }
 
+  // Keep track of the initial value to determine if a change event should be dispatched.
+  // CONSTRAINT: We can not determine what happened between focus event and our first API call.
+  if (element[initial] === undefined) {
+    element[initial] = String(element[propName])
+  }
+
   element[propName] = propValue
 
+  // Add an event listener for the blur event to the capture phase on the window.
+  // CONSTRAINT: Currently there is no cross-platform solution to unshift the event handler stack.
+  // Our change event might occur after other event handlers on the blur event have been processed.
+  if (!element[onBlur]) {
+    element.ownerDocument.defaultView?.addEventListener(
+      'blur',
+      (element[onBlur] = () => {
+        const initV = element[initial]
+
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete element[onBlur]
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete element[initial]
+
+        if (String(element[propName]) !== initV) {
+          fireEvent.change(element)
+        }
+      }),
+      {
+        capture: true,
+        once: true,
+      },
+    )
+  }
+
   if (descriptor) {
     Object.defineProperty(element, propName, descriptor)
   }
