diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 01a31c58d01c81..3010484341d4d5 100644 --- 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 index bdc3c2a53ae1d0..895cbad033212b 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 );