From dc1c301e0d443ed2bb0a4c9ee2db1fe9960153a4 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 12 Dec 2023 11:48:39 +0800 Subject: [PATCH 1/4] Update boolean logic to ensure suggestions list closes when expandOnFocus prop is false --- packages/components/src/form-token-field/index.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index bdc3c2a53ae1d0..ab779d88fe65dd 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -177,13 +177,13 @@ 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). + setIsExpanded( event.relatedTarget === tokensAndInput.current ); + } else { + setIsExpanded( false ); + } setSelectedSuggestionIndex( -1 ); setSelectedSuggestionScroll( false ); From f4e96a5733bd5b0276dd04216a448223f50a0210 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 13 Dec 2023 12:04:46 +0800 Subject: [PATCH 2/4] Improve readability --- packages/components/src/form-token-field/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index ab779d88fe65dd..895cbad033212b 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -180,8 +180,12 @@ export function FormTokenField( props: FormTokenFieldProps ) { 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). - setIsExpanded( event.relatedTarget === tokensAndInput.current ); + 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 ); } From bd824534e0eb55b05624bfdf413b7c0ec73f48a6 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 13 Dec 2023 12:17:24 +0800 Subject: [PATCH 3/4] Add Changelog entry --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 025d342073aac8..362ac197d65171 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -35,6 +35,7 @@ - `ToolsPanel`: fix a performance issue ([#56770](https://github.com/WordPress/gutenberg/pull/56770)). - `BorderControl`: adjust `BorderControlDropdown` Button size to fix misaligned border ([#56730](https://github.com/WordPress/gutenberg/pull/56730)). - `SlotFillProvider`: Restore contextual Slot/Fills within SlotFillProvider ([#56779](https://github.com/WordPress/gutenberg/pull/56779)). +- `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)). ### Internal From 344d1c975f5e81cd9e2c1541ab7afec179de06b1 Mon Sep 17 00:00:00 2001 From: Marcelo Serpa Date: Fri, 15 Dec 2023 12:39:45 -0600 Subject: [PATCH 4/4] Fix CHANGELOG, move entry to the "Unreleased" section --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 362ac197d65171..970341765bfe69 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) @@ -35,7 +36,6 @@ - `ToolsPanel`: fix a performance issue ([#56770](https://github.com/WordPress/gutenberg/pull/56770)). - `BorderControl`: adjust `BorderControlDropdown` Button size to fix misaligned border ([#56730](https://github.com/WordPress/gutenberg/pull/56730)). - `SlotFillProvider`: Restore contextual Slot/Fills within SlotFillProvider ([#56779](https://github.com/WordPress/gutenberg/pull/56779)). -- `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)). ### Internal