apply onFocus and onBlur to the custom select control

glendaviesnz · glendaviesnz · commit 40daea4a8c82 · 2022-11-30T09:25:44.000+13:00
diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
@@ -308,6 +308,8 @@ export default function SpacingInputControl( {
 					size={ '__unstable-large' }
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
+					onFocus={ onMouseOver }
+					onBlur={ onMouseOut }
 				/>
 			) }
 		</>
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
@@ -79,6 +79,8 @@ export default function CustomSelectControl( props ) {
 		value: _selectedItem,
 		onMouseOver,
 		onMouseOut,
+		onFocus,
+		onBlur,
 		__experimentalShowSelectedHint = false,
 	} = props;
 
@@ -103,6 +105,15 @@ export default function CustomSelectControl( props ) {
 
 	const [ isFocused, setIsFocused ] = useState( false );
 
+	function handleOnFocus( e ) {
+		setIsFocused( true );
+		onFocus( e );
+	}
+	function handleOnBlur( e ) {
+		setIsFocused( false );
+		onBlur( e );
+	}
+
 	if ( ! __nextUnconstrainedWidth ) {
 		deprecated(
 			'Constrained width styles for wp.components.CustomSelectControl',
@@ -182,8 +193,8 @@ export default function CustomSelectControl( props ) {
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
 					as="button"
-					onFocus={ () => setIsFocused( true ) }
-					onBlur={ () => setIsFocused( false ) }
+					onFocus={ handleOnFocus }
+					onBlur={ handleOnBlur }
 					selectSize={ size }
 					__next36pxDefaultSize={ __next36pxDefaultSize }
 					{ ...getToggleButtonProps( {
