Fix form token field suggestion list reopening after blurring the inp…

…ut (#57002) * Update boolean logic to ensure suggestions list closes when expandOnFocus prop is false * Improve readability * Add Changelog entry * Fix CHANGELOG, move entry to the "Unreleased" section --------- Co-authored-by: Marcelo Serpa <[email protected]>
WordPress · Dec 15, 2023 · 7c45fb6 · 7c45fb6 · github-actions · Dec 15, 2023
1 parent b90e4c5
commit 7c45fb6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   `FormTokenField`: Fix a regression where the suggestion list would re-open after clicking away from the input ([#57002](https://github.com/WordPress/gutenberg/pull/57002)).
+
 ## 25.14.0 (2023-12-13)
 
 ### Enhancements

diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
@@ -177,13 +177,17 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			setInputOffsetFromEnd( 0 );
 			setIsActive( 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 );
+			if ( __experimentalExpandOnFocus ) {
+				// 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 hasFocusWithin =
+					event.relatedTarget === tokensAndInput.current;
+				setIsExpanded( hasFocusWithin );
+			} else {
+				// Else collapse the suggestion list. This will result in the suggestion list closing
+				// after a suggestion has been submitted since that causes a blur.
+				setIsExpanded( false );
+			}
 
 			setSelectedSuggestionIndex( -1 );
 			setSelectedSuggestionScroll( false );