Use event existence to eliminate extraneous onChange calls

WordPress · May 29, 2022 · bb6b932 · bb6b932
1 parent 32eb218
commit bb6b932
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/packages/components/src/input-control/reducer/reducer.ts b/packages/components/src/input-control/reducer/reducer.ts
@@ -109,9 +109,7 @@ function inputControlStateReducer(
 				break;
 		}
 
-		if ( action.payload.event ) {
-			nextState._event = action.payload.event;
-		}
+		nextState._event = action.payload.event;
 
 		/**
 		 * Send the nextState + action to the composedReducers via
@@ -211,7 +209,11 @@ export function useInputControlStateReducer(
 		currentValueProp.current = initialState.value;
 	} );
 	useLayoutEffect( () => {
-		if ( state.value !== currentValueProp.current && ! state.isDirty ) {
+		if (
+			currentState.current._event !== undefined &&
+			state.value !== currentValueProp.current &&
+			! state.isDirty
+		) {
 			onChangeHandler( state.value ?? '', {
 				event: currentState.current._event as
 					| ChangeEvent< HTMLInputElement >
@@ -224,10 +226,10 @@ export function useInputControlStateReducer(
 			initialState.value !== currentState.current.value &&
 			! currentState.current.isDirty
 		) {
-			reset(
-				initialState.value,
-				currentState.current._event as SyntheticEvent
-			);
+			dispatch( {
+				type: actions.RESET,
+				payload: { value: initialState.value },
+			} );
 		}
 	}, [ initialState.value ] );
 

diff --git a/packages/components/src/input-control/reducer/state.ts b/packages/components/src/input-control/reducer/state.ts
@@ -1,15 +1,15 @@
 /**
  * External dependencies
  */
-import type { Reducer } from 'react';
+import type { Reducer, SyntheticEvent } from 'react';
 
 /**
  * Internal dependencies
  */
 import type { InputAction } from './actions';
 
 export interface InputState {
-	_event: Event | {};
+	_event?: SyntheticEvent;
 	error: unknown;
 	initialValue?: string;
 	isDirty: boolean;
@@ -24,7 +24,6 @@ export type StateReducer = Reducer< InputState, InputAction >;
 export const initialStateReducer: StateReducer = ( state: InputState ) => state;
 
 export const initialInputControlState: InputState = {
-	_event: {},
 	error: null,
 	initialValue: '',
 	isDirty: false,