Query Loop: Fix 'undo trap' and improve debouncing for 'Keyword' control (#69845)

Mamaduka · stokesman · web-flow · commit 55cb36b2de59 · 2025-04-08T09:15:46.000+04:00
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: stokesman &lt;presstoke@git.wordpress.org&gt;
diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -15,7 +15,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { debounce } from '@wordpress/compose';
-import { useEffect, useState, useCallback } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -99,18 +99,11 @@ export default function QueryInspectorControls( props ) {
 		setQuery( updateQuery );
 	};
 	const [ querySearch, setQuerySearch ] = useState( query.search );
-	const onChangeDebounced = useCallback(
-		debounce( () => {
-			if ( query.search !== querySearch ) {
-				setQuery( { search: querySearch } );
-			}
-		}, 250 ),
-		[ querySearch, query.search ]
-	);
-	useEffect( () => {
-		onChangeDebounced();
-		return onChangeDebounced.cancel;
-	}, [ querySearch, onChangeDebounced ] );
+	const debouncedQuerySearch = useMemo( () => {
+		return debounce( ( newQuerySearch ) => {
+			setQuery( { search: newQuerySearch } );
+		}, 250 );
+	}, [ setQuery ] );
 
 	const orderByOptions = useOrderByOptions( postType );
 	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
@@ -419,14 +412,20 @@ export default function QueryInspectorControls( props ) {
 						<ToolsPanelItem
 							hasValue={ () => !! querySearch }
 							label={ __( 'Keyword' ) }
-							onDeselect={ () => setQuerySearch( '' ) }
+							onDeselect={ () => {
+								setQuery( { search: '' } );
+								setQuerySearch( '' );
+							} }
 						>
 							<TextControl
 								__nextHasNoMarginBottom
 								__next40pxDefaultSize
 								label={ __( 'Keyword' ) }
 								value={ querySearch }
-								onChange={ setQuerySearch }
+								onChange={ ( newQuerySearch ) => {
+									debouncedQuerySearch( newQuerySearch );
+									setQuerySearch( newQuerySearch );
+								} }
 							/>
 						</ToolsPanelItem>
 					) }
diff --git a/packages/block-library/src/query/edit/inspector-controls/parent-control.js b/packages/block-library/src/query/edit/inspector-controls/parent-control.js
@@ -51,7 +51,7 @@ function ParentControl( { parents, postType, onChange } ) {
 				),
 			};
 		},
-		[ search, parents ]
+		[ search, postType, parents ]
 	);
 	const currentParents = useSelect(
 		( select ) => {
@@ -65,7 +65,7 @@ function ParentControl( { parents, postType, onChange } ) {
 				per_page: parents.length,
 			} );
 		},
-		[ parents ]
+		[ parents, postType ]
 	);
 	// Update the `value` state only after the selectors are resolved
 	// to avoid emptying the input when we're changing parents.
diff --git a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
@@ -120,7 +120,7 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 				),
 			};
 		},
-		[ search, termIds ]
+		[ search, taxonomy.slug, termIds ]
 	);
 	// `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.
 	// They are used to extract the terms' names to populate the `FormTokenField` properly
@@ -137,7 +137,7 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 				per_page: termIds.length,
 			} );
 		},
-		[ termIds ]
+		[ taxonomy.slug, termIds ]
 	);
 	// Update the `value` state only after the selectors are resolved
 	// to avoid emptying the input when we're changing terms.
