Replay onChange events if there was a change to the value before hydration

We do this by simulating a real DOM event so that custom listeners get to
observe it as well.

Author: sebmarkbage

packages/react-dom-bindings/src/client/ReactDOMInput.js

@@ -22,6 +22,7 @@ import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 
 import type {ToStringValue} from './ToStringValue';
 import escapeSelectorAttributeValueInsideDoubleQuotes from './escapeSelectorAttributeValueInsideDoubleQuotes';
+import {queueChangeEvent} from '../events/ReactDOMEventReplaying';
 
 let didWarnValueDefaultValue = false;
 let didWarnCheckedDefaultChecked = false;
@@ -371,8 +372,11 @@ export function hydrateInput(
   const changed = trackHydrated((node: any), initialValue, initialChecked);
   if (changed) {
     // If the current value is different, that suggests that the user
-    // changed it before hydration.
-    // TODO: Queue replay.
+    // changed it before hydration. Queue a replay of the change event.
+    // For radio buttons the change event only fires on the selected one.
+    if (node.type !== 'radio' || node.checked) {
+      queueChangeEvent(node);
+    }
   }
 }
 

packages/react-dom-bindings/src/client/ReactDOMSelect.js

@@ -12,6 +12,7 @@ import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCur
 
 import {getToStringValue, toString} from './ToStringValue';
 import isArray from 'shared/isArray';
+import {queueChangeEvent} from '../events/ReactDOMEventReplaying';
 
 let didWarnValueDefaultValue;
 
@@ -205,8 +206,8 @@ export function hydrateSelect(
   }
   if (changed) {
     // If the current selection is different than our initial that suggests that the user
-    // changed it before hydration.
-    // TODO: Queue replay.
+    // changed it before hydration. Queue a replay of the change event.
+    queueChangeEvent(node);
   }
 }
 

packages/react-dom-bindings/src/client/ReactDOMTextarea.js

@@ -14,6 +14,7 @@ import {getToStringValue, toString} from './ToStringValue';
 import {disableTextareaChildren} from 'shared/ReactFeatureFlags';
 
 import {track, trackHydrated} from './inputValueTracking';
+import {queueChangeEvent} from '../events/ReactDOMEventReplaying';
 
 let didWarnValDefaultVal = false;
 
@@ -166,8 +167,8 @@ export function hydrateTextarea(
   const changed = trackHydrated((node: any), stringValue, false);
   if (changed) {
     // If the current value is different, that suggests that the user
-    // changed it before hydration.
-    // TODO: Queue replay.
+    // changed it before hydration. Queue a replay of the change event.
+    queueChangeEvent(node);
   }
 }
 

packages/react-dom-bindings/src/events/ReactDOMEventReplaying.js

@@ -56,9 +56,11 @@ import {
   attemptHydrationAtCurrentPriority,
 } from 'react-reconciler/src/ReactFiberReconciler';
 
+import {enableHydrationChangeEvent} from 'shared/ReactFeatureFlags';
+
 // TODO: Upgrade this definition once we're on a newer version of Flow that
 // has this definition built-in.
-type PointerEvent = Event & {
+type PointerEventType = Event & {
   pointerId: number,
   relatedTarget: EventTarget | null,
   ...
@@ -84,6 +86,8 @@ const queuedPointers: Map<number, QueuedReplayableEvent> = new Map();
 const queuedPointerCaptures: Map<number, QueuedReplayableEvent> = new Map();
 // We could consider replaying selectionchange and touchmoves too.
 
+const queuedChangeEventTargets: Array<EventTarget> = [];
+
 type QueuedHydrationTarget = {
   blockedOn: null | Container | ActivityInstance | SuspenseInstance,
   target: Node,
@@ -164,13 +168,13 @@ export function clearIfContinuousEvent(
       break;
     case 'pointerover':
     case 'pointerout': {
-      const pointerId = ((nativeEvent: any): PointerEvent).pointerId;
+      const pointerId = ((nativeEvent: any): PointerEventType).pointerId;
       queuedPointers.delete(pointerId);
       break;
     }
     case 'gotpointercapture':
     case 'lostpointercapture': {
-      const pointerId = ((nativeEvent: any): PointerEvent).pointerId;
+      const pointerId = ((nativeEvent: any): PointerEventType).pointerId;
       queuedPointerCaptures.delete(pointerId);
       break;
     }
@@ -268,7 +272,7 @@ export function queueIfContinuousEvent(
       return true;
     }
     case 'pointerover': {
-      const pointerEvent = ((nativeEvent: any): PointerEvent);
+      const pointerEvent = ((nativeEvent: any): PointerEventType);
       const pointerId = pointerEvent.pointerId;
       queuedPointers.set(
         pointerId,
@@ -284,7 +288,7 @@ export function queueIfContinuousEvent(
       return true;
     }
     case 'gotpointercapture': {
-      const pointerEvent = ((nativeEvent: any): PointerEvent);
+      const pointerEvent = ((nativeEvent: any): PointerEventType);
       const pointerId = pointerEvent.pointerId;
       queuedPointerCaptures.set(
         pointerId,
@@ -421,6 +425,31 @@ function attemptReplayContinuousQueuedEventInMap(
   }
 }
 
+function replayChangeEvent(target: EventTarget): void {
+  // Dispatch a fake "change" event for the input.
+  const element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement =
+    (target: any);
+  if (element.nodeName === 'INPUT') {
+    if (element.type === 'checkbox' || element.type === 'radio') {
+      // Checkboxes always fire a click event regardless of how the change was made.
+      const EventCtr =
+        typeof PointerEvent === 'function' ? PointerEvent : Event;
+      target.dispatchEvent(new EventCtr('click', {bubbles: true}));
+      // For checkboxes the input event uses the Event constructor instead of InputEvent.
+      target.dispatchEvent(new Event('input', {bubbles: true}));
+    } else {
+      if (typeof InputEvent === 'function') {
+        target.dispatchEvent(new InputEvent('input', {bubbles: true}));
+      }
+    }
+  } else if (element.nodeName === 'TEXTAREA') {
+    if (typeof InputEvent === 'function') {
+      target.dispatchEvent(new InputEvent('input', {bubbles: true}));
+    }
+  }
+  target.dispatchEvent(new Event('change', {bubbles: true}));
+}
+
 function replayUnblockedEvents() {
   hasScheduledReplayAttempt = false;
   // Replay any continuous events.
@@ -435,6 +464,22 @@ function replayUnblockedEvents() {
   }
   queuedPointers.forEach(attemptReplayContinuousQueuedEventInMap);
   queuedPointerCaptures.forEach(attemptReplayContinuousQueuedEventInMap);
+  if (enableHydrationChangeEvent) {
+    for (let i = 0; i < queuedChangeEventTargets.length; i++) {
+      replayChangeEvent(queuedChangeEventTargets[i]);
+    }
+    queuedChangeEventTargets.length = 0;
+  }
+}
+
+export function queueChangeEvent(target: EventTarget): void {
+  if (enableHydrationChangeEvent) {
+    queuedChangeEventTargets.push(target);
+    if (!hasScheduledReplayAttempt) {
+      hasScheduledReplayAttempt = true;
+      scheduleCallback(NormalPriority, replayUnblockedEvents);
+    }
+  }
 }
 
 function scheduleCallbackIfUnblocked(

packages/react-dom/src/__tests__/ReactDOMInput-test.js

@@ -1536,10 +1536,14 @@ describe('ReactDOMInput', () => {
       ReactDOMClient.hydrateRoot(container, <App />);
     });
 
-    // Currently, we don't fire onChange when hydrating
-    assertLog([]);
-    // Strangely, we leave `b` checked even though we rendered A with
-    // checked={true} and B with checked={false}. Arguably this is a bug.
+    if (gate(flags => flags.enableHydrationChangeEvent)) {
+      // We replayed the click since the value changed before hydration.
+      assertLog(['click b']);
+    } else {
+      assertLog([]);
+      // Strangely, we leave `b` checked even though we rendered A with
+      // checked={true} and B with checked={false}. Arguably this is a bug.
+    }
     expect(a.checked).toBe(false);
     expect(b.checked).toBe(true);
     expect(c.checked).toBe(false);
@@ -1554,22 +1558,35 @@ describe('ReactDOMInput', () => {
       dispatchEventOnNode(c, 'click');
     });
 
-    // then since C's onClick doesn't set state, A becomes rechecked.
     assertLog(['click c']);
-    expect(a.checked).toBe(true);
-    expect(b.checked).toBe(false);
-    expect(c.checked).toBe(false);
+    if (gate(flags => flags.enableHydrationChangeEvent)) {
+      // then since C's onClick doesn't set state, B becomes rechecked.
+      expect(a.checked).toBe(false);
+      expect(b.checked).toBe(true);
+      expect(c.checked).toBe(false);
+    } else {
+      // then since C's onClick doesn't set state, A becomes rechecked
+      // since in this branch we didn't replay to select B.
+      expect(a.checked).toBe(true);
+      expect(b.checked).toBe(false);
+      expect(c.checked).toBe(false);
+    }
     expect(isCheckedDirty(a)).toBe(true);
     expect(isCheckedDirty(b)).toBe(true);
     expect(isCheckedDirty(c)).toBe(true);
     assertInputTrackingIsCurrent(container);
 
-    // And we can also change to B properly after hydration.
     await act(async () => {
       setUntrackedChecked.call(b, true);
       dispatchEventOnNode(b, 'click');
     });
-    assertLog(['click b']);
+    if (gate(flags => flags.enableHydrationChangeEvent)) {
+      // Since we already had this selected, this doesn't trigger a change again.
+      assertLog([]);
+    } else {
+      // And we can also change to B properly after hydration.
+      assertLog(['click b']);
+    }
     expect(a.checked).toBe(false);
     expect(b.checked).toBe(true);
     expect(c.checked).toBe(false);
@@ -1628,8 +1645,12 @@ describe('ReactDOMInput', () => {
       ReactDOMClient.hydrateRoot(container, <App />);
     });
 
-    // Currently, we don't fire onChange when hydrating
-    assertLog([]);
+    if (gate(flags => flags.enableHydrationChangeEvent)) {
+      // We replayed the click since the value changed before hydration.
+      assertLog(['click b']);
+    } else {
+      assertLog([]);
+    }
     expect(a.checked).toBe(false);
     expect(b.checked).toBe(true);
     expect(c.checked).toBe(false);

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js

@@ -278,10 +278,9 @@ describe('ReactDOMServerIntegrationUserInteraction', () => {
       await testUserInteractionBeforeClientRender(
         <ControlledInput onChange={() => changeCount++} />,
       );
-      // note that there's a strong argument to be made that the DOM revival
-      // algorithm should notice that the user has changed the value and fire
-      // an onChange. however, it does not now, so that's what this tests.
-      expect(changeCount).toBe(0);
+      expect(changeCount).toBe(
+        gate(flags => flags.enableHydrationChangeEvent) ? 1 : 0,
+      );
     });
 
     it('should not blow away user-interaction on successful reconnect to an uncontrolled range input', () =>
@@ -302,7 +301,9 @@ describe('ReactDOMServerIntegrationUserInteraction', () => {
         '0.25',
         '1',
       );
-      expect(changeCount).toBe(0);
+      expect(changeCount).toBe(
+        gate(flags => flags.enableHydrationChangeEvent) ? 1 : 0,
+      );
     });
 
     it('should not blow away user-entered text on successful reconnect to an uncontrolled checkbox', () =>
@@ -321,24 +322,22 @@ describe('ReactDOMServerIntegrationUserInteraction', () => {
         false,
         'checked',
       );
-      expect(changeCount).toBe(0);
+      expect(changeCount).toBe(
+        gate(flags => flags.enableHydrationChangeEvent) ? 1 : 0,
+      );
     });
 
-    // skipping this test because React 15 does the wrong thing. it blows
-    // away the user's typing in the textarea.
-    // eslint-disable-next-line jest/no-disabled-tests
-    it.skip('should not blow away user-entered text on successful reconnect to an uncontrolled textarea', () =>
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-entered text on successful reconnect to an uncontrolled textarea', () =>
       testUserInteractionBeforeClientRender(<textarea defaultValue="Hello" />));
 
-    // skipping this test because React 15 does the wrong thing. it blows
-    // away the user's typing in the textarea.
-    // eslint-disable-next-line jest/no-disabled-tests
-    it.skip('should not blow away user-entered text on successful reconnect to a controlled textarea', async () => {
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-entered text on successful reconnect to a controlled textarea', async () => {
       let changeCount = 0;
       await testUserInteractionBeforeClientRender(
         <ControlledTextArea onChange={() => changeCount++} />,
       );
-      expect(changeCount).toBe(0);
+      expect(changeCount).toBe(1);
     });
 
     it('should not blow away user-selected value on successful reconnect to an uncontrolled select', () =>
@@ -358,7 +357,9 @@ describe('ReactDOMServerIntegrationUserInteraction', () => {
       await testUserInteractionBeforeClientRender(
         <ControlledSelect onChange={() => changeCount++} />,
       );
-      expect(changeCount).toBe(0);
+      expect(changeCount).toBe(
+        gate(flags => flags.enableHydrationChangeEvent) ? 1 : 0,
+      );
     });
   });
 });