Refactor TimePicker component to handle input changes

WordPress · Dec 20, 2024 · 45f2307 · 45f2307
1 parent dea955c
commit 45f2307
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/packages/components/src/date-time/time/index.tsx b/packages/components/src/date-time/time/index.tsx
@@ -137,6 +137,18 @@ export function TimePicker( {
 		onChange?.( format( newDate, TIMEZONELESS_FORMAT ) );
 	};
 
+	const handleInputChange = (
+		event: React.FormEvent< HTMLInputElement >,
+		method: 'date' | 'year'
+	) => {
+		const newValue = ( event as React.ChangeEvent< HTMLInputElement > )
+			.target.value;
+		const changeCallback = buildNumberControlChangeCallback(
+			method === 'year' ? 'year' : 'date'
+		);
+		changeCallback( newValue, { event } );
+	};
+
 	const dayField = (
 		<DayInput
 			key="day"
@@ -154,6 +166,7 @@ export function TimePicker( {
 			isDragEnabled={ false }
 			isShiftStepEnabled={ false }
 			onChange={ buildNumberControlChangeCallback( 'date' ) }
+			onInput={ ( e ) => handleInputChange( e, 'date' ) }
 		/>
 	);
 
@@ -194,6 +207,7 @@ export function TimePicker( {
 			isShiftStepEnabled={ false }
 			onChange={ buildNumberControlChangeCallback( 'year' ) }
 			__unstableStateReducer={ buildPadInputStateReducer( 4 ) }
+			onInput={ ( e ) => handleInputChange( e, 'year' ) }
 		/>
 	);