From edb54023e6f59b24094320d421c36cb1a4b0f367 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Wed, 1 Jun 2022 23:04:04 +0900 Subject: [PATCH] Fix useEffect to updateSuggestions(). --- packages/components/src/form-token-field/index.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index 50e1a66a82cb8..c202317caa7a9 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -97,11 +97,14 @@ export function FormTokenField( props: FormTokenFieldProps ) { false ); - const debouncedSpeak = useDebounce( speak, 500 ); const prevSuggestions = usePrevious< string[] >( suggestions ); + const prevValue = usePrevious< ( string | TokenItem )[] >( value ); + const input = useRef< HTMLInputElement >( null ); const tokensAndInput = useRef< HTMLInputElement >( null ); + const debouncedSpeak = useDebounce( speak, 500 ); + useEffect( () => { // Make sure to focus the input when the isActive state is true. if ( isActive && ! hasFocus() ) { @@ -115,11 +118,18 @@ export function FormTokenField( props: FormTokenFieldProps ) { prevSuggestions || [] ); + if ( suggestionsDidUpdate || value !== prevValue ) { + updateSuggestions( suggestionsDidUpdate ); + } + updateSuggestions( suggestionsDidUpdate ); - }, [ suggestions ] ); + // TODO: updateSuggestions() should first be refactored so its actual deps are clearer. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ suggestions, prevSuggestions, value, prevValue ] ); useEffect( () => { updateSuggestions(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [ incompleteTokenValue ] ); if ( disabled && isActive ) {