diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js index 0b3841436a6c5e..3436348975e240 100644 --- a/packages/block-library/src/query/edit/query-toolbar.js +++ b/packages/block-library/src/query/edit/query-toolbar.js @@ -1,7 +1,13 @@ +/** + * External dependencies + */ +import { debounce } from 'lodash'; + /** * WordPress dependencies */ import { useSelect } from '@wordpress/data'; +import { useEffect, useState, useCallback } from '@wordpress/element'; import { Toolbar, Dropdown, @@ -34,6 +40,15 @@ export default function QueryToolbar( { query, setQuery } ) { tags: getTermsInfo( _tags ), }; }, [] ); + const [ querySearch, setQuerySearch ] = useState( query.search ); + const onChangeDebounced = useCallback( + debounce( () => setQuery( { search: querySearch } ), 250 ), + [ querySearch ] + ); + useEffect( () => { + onChangeDebounced(); + return onChangeDebounced.cancel; + }, [ querySearch, onChangeDebounced ] ); // Handles categories and tags changes. const onTermsChange = ( terms, queryProperty ) => ( newTermValues ) => { @@ -116,10 +131,8 @@ export default function QueryToolbar( { query, setQuery } ) { ) } - setQuery( { search: value } ) - } + value={ querySearch } + onChange={ ( value ) => setQuerySearch( value ) } /> ) }