Components: refactor Autocomplete to pass exhaustive-deps (#41382)

* update `AutoCompleterUI` `useLayoutEffect` dependency array to include `onChangeOptions` * update `AutoCompleterUI` native.js `useLayoutEffect` and `startAnimation` `useCallback` dependency arrays * update `useAutocomplete` `useEffect` dependency array * Autocomplete: rebase and fix changelog merge conflict
WordPress · May 31, 2022 · f3da470 · f3da470
1 parent 0897b17
commit f3da470
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -26,6 +26,7 @@
 -   `TextareaControl`: Convert to TypeScript ([#41215](https://github.com/WordPress/gutenberg/pull/41215)).
 -   `BoxControl`: Update unit tests to use `@testing-library/user-event` ([#41422](https://github.com/WordPress/gutenberg/pull/41422)).
 -   `Surface`: Convert to TypeScript ([#41212](https://github.com/WordPress/gutenberg/pull/41212)).
+-   `Autocomplete` updated to satisfy `react/exhuastive-deps` eslint rule ([#41382](https://github.com/WordPress/gutenberg/pull/41382))
 
 ### Experimental
 

diff --git a/packages/components/src/autocomplete/autocompleter-ui.js b/packages/components/src/autocomplete/autocompleter-ui.js
@@ -39,7 +39,7 @@ export function getAutoCompleterUI( autocompleter ) {
 
 		useLayoutEffect( () => {
 			onChangeOptions( items );
-		}, [ items ] );
+		}, [ onChangeOptions, items ] );
 
 		if ( ! items.length > 0 ) {
 			return null;

diff --git a/packages/components/src/autocomplete/autocompleter-ui.native.js b/packages/components/src/autocomplete/autocompleter-ui.native.js
@@ -71,7 +71,7 @@ export function getAutoCompleterUI( autocompleter ) {
 			} else if ( isVisible && text.length === 0 ) {
 				startAnimation( false );
 			}
-		}, [ items, isVisible, text ] );
+		}, [ onChangeOptions, items, isVisible, text, startAnimation ] );
 
 		const activeItemStyles = usePreferredColorSchemeStyle(
 			styles[ 'components-autocomplete__item-active' ],
@@ -111,7 +111,7 @@ export function getAutoCompleterUI( autocompleter ) {
 					}
 				} );
 			},
-			[ isVisible ]
+			[ animationValue, isVisible, reset ]
 		);
 
 		const contentStyles = {

diff --git a/packages/components/src/autocomplete/index.js b/packages/components/src/autocomplete/index.js
@@ -375,7 +375,14 @@ function useAutocomplete( {
 				: AutocompleterUI
 		);
 		setFilterValue( query );
-	}, [ textContent ] );
+	}, [
+		textContent,
+		AutocompleterUI,
+		autocompleter,
+		completers,
+		record,
+		filteredOptions.length,
+	] );
 
 	const { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};
 	const { className } = autocompleter || {};