Refine use of event existence in state syncing effect hooks

WordPress · May 10, 2022 · 2b14b0f · 2b14b0f
1 parent 29634d7
commit 2b14b0f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/packages/components/src/input-control/input-field.tsx b/packages/components/src/input-control/input-field.tsx
@@ -73,8 +73,7 @@ function InputField(
 			value: valueProp,
 			isPressEnterToChange,
 		},
-		onChange,
-		isFocused
+		onChange
 	);
 
 	const { value, isDragging, isDirty } = state;

diff --git a/packages/components/src/input-control/reducer/reducer.ts b/packages/components/src/input-control/reducer/reducer.ts
@@ -139,14 +139,12 @@ function inputControlStateReducer(
  * @param  stateReducer    An external state reducer.
  * @param  initialState    The initial state for the reducer.
  * @param  onChangeHandler A handler for the onChange event.
- * @param  isFocused       Focus state.
  * @return State, dispatch, and a collection of actions.
  */
 export function useInputControlStateReducer(
 	stateReducer: StateReducer = initialStateReducer,
 	initialState: Partial< InputState > = initialInputControlState,
-	onChangeHandler: InputChangeCallback,
-	isFocused: Boolean
+	onChangeHandler: InputChangeCallback
 ) {
 	const [ state, dispatch ] = useReducer< StateReducer >(
 		inputControlStateReducer( stateReducer ),
@@ -205,9 +203,8 @@ export function useInputControlStateReducer(
 		currentValueProp.current = initialState.value;
 	} );
 	useLayoutEffect( () => {
-		if ( ! refEvent.current ) return;
-
 		if (
+			refEvent.current &&
 			state.value !== currentValueProp.current &&
 			! currentState.current.isDirty
 		) {
@@ -217,16 +214,15 @@ export function useInputControlStateReducer(
 					| PointerEvent< HTMLInputElement >,
 			} );
 		}
-		refEvent.current = null;
-	}, [ state.value, state.isDragging, isFocused ] );
+	}, [ state.value ] );
 	useLayoutEffect( () => {
 		if (
-			! refEvent.current &&
 			initialState.value !== currentState.current.value &&
 			! currentState.current.isDirty
 		) {
 			dispatch( { value: initialState.value } );
 		}
+		if ( refEvent.current ) refEvent.current = null;
 	}, [ initialState.value ] );
 
 	return {