diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 025d342073aac..970341765bfe6 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,7 @@ ### Bug Fix - `Button`: Fix logic of `has-text` class addition ([#56949](https://github.com/WordPress/gutenberg/pull/56949)). +- `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) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index bdc3c2a53ae1d..895cbad033212 100644 --- 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 );