Fix FormTokenField suggestions broken scrollbar when `__experimentalE…

…xpandOnFocus` is defined (#56426) * Fix FormTokenField suggestions being unscrollable when `__experimentalExpandOnFocus` is defined * Update focus types * Add changelog entry * Type the form token field onFocus event as a React focus event * Shorten to just FocusEvent instead of ReactFocusEvent * Add another CHANGELOG entry for the typing fix --------- Co-authored-by: Glen Davies <[email protected]>
WordPress · Nov 27, 2023 · 2d4000f · 2d4000f
1 parent 4f4386c
commit 2d4000f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -9,6 +9,8 @@
 ### Bug Fix
 
 -   `ToolsPanelItem`: Use useLayoutEffect to prevent rendering glitch for last panel item styling. ([#56536](https://github.com/WordPress/gutenberg/pull/56536)).
+-   `FormTokenField`: Fix broken suggestions scrollbar when the `__experimentalExpandOnFocus` prop is defined ([#56426](https://github.com/WordPress/gutenberg/pull/56426)).
+-   `FormTokenField`: `onFocus` prop is now typed as a React `FocusEvent` ([#56426](https://github.com/WordPress/gutenberg/pull/56426)).
 
 ### Experimental
 

diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';
+import type { KeyboardEvent, MouseEvent, TouchEvent, FocusEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -162,7 +162,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		}
 	}
 
-	function onBlur() {
+	function onBlur( event: FocusEvent ) {
 		if (
 			inputHasValidValue() &&
 			__experimentalValidateInput( incompleteTokenValue )
@@ -176,7 +176,15 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			setIncompleteTokenValue( '' );
 			setInputOffsetFromEnd( 0 );
 			setIsActive( false );
-			setIsExpanded( false );
+
+			// If `__experimentalExpandOnFocus` is true, don't close the suggestions list when
+			// the user clicks on it (`tokensAndInput` will be the element that caused the blur).
+			const shouldKeepSuggestionsExpanded =
+				! __experimentalExpandOnFocus ||
+				( __experimentalExpandOnFocus &&
+					event.relatedTarget === tokensAndInput.current );
+			setIsExpanded( shouldKeepSuggestionsExpanded );
+
 			setSelectedSuggestionIndex( -1 );
 			setSelectedSuggestionScroll( false );
 		}

diff --git a/packages/components/src/form-token-field/token-input.tsx b/packages/components/src/form-token-field/token-input.tsx
@@ -48,9 +48,7 @@ export function UnForwardedTokenInput(
 		onFocus?.( e );
 	};
 
-	const onBlurHandler: React.FocusEventHandler< HTMLInputElement > = (
-		e
-	) => {
+	const onBlurHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {
 		setHasFocus( false );
 		onBlur?.( e );
 	};

diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts
@@ -5,6 +5,7 @@ import type {
 	ComponentPropsWithRef,
 	MouseEventHandler,
 	ReactNode,
+	FocusEvent,
 } from 'react';
 
 type Messages = {