diff --git a/assets/components/filters-controls/taxonomy-select-control.js b/assets/components/filters-controls/taxonomy-select-control.js
index e0429d6..bf27550 100644
--- a/assets/components/filters-controls/taxonomy-select-control.js
+++ b/assets/components/filters-controls/taxonomy-select-control.js
@@ -1,12 +1,14 @@
/**
* External dependencies
*/
-import Select from 'react-select';
+import AsyncSelect from 'react-select/async';
+import debounce from 'debounce-promise';
/**
* WordPress dependencies
*/
-import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
/**
* Internal dependencies
@@ -17,18 +19,32 @@ import { mapTermsToOptions } from '../../utils/helpers';
const TaxonomySelectControl = ( props ) => {
const { taxonomy, attributes, setAttributes } = props;
const { taxonomyTerms } = attributes;
- const [ options, setOptions ] = useState( [] );
+ const [ defaultOptions, setDefaultOptions ] = useState( [] );
- useEffect( () => {
- const getTerms = async () => {
- const allTerms = await fetchTermsByTaxonomy( taxonomy.rest_base );
- const mappedTerms = mapTermsToOptions( allTerms );
+ const getTermsAsOptions = useCallback(
+ async ( input = '' ) => {
+ const terms = await fetchTermsByTaxonomy(
+ taxonomy.rest_base,
+ input
+ );
+ return terms ? mapTermsToOptions( terms ) : [];
+ },
+ [ taxonomy.rest_base ]
+ );
- setOptions( mappedTerms );
+ useEffect( () => {
+ const getOptions = async () => {
+ const options = await getTermsAsOptions();
+ setDefaultOptions( options );
};
- getTerms();
- }, [ taxonomy.rest_base ] );
+ getOptions();
+ }, [ getTermsAsOptions ] );
+
+ const loadOptions = useMemo(
+ () => debounce( getTermsAsOptions, 500 ),
+ [ getTermsAsOptions ]
+ );
/**
* Save the selected terms as an attribute
@@ -49,15 +65,25 @@ const TaxonomySelectControl = ( props ) => {
return (
<>
{ taxonomy.name }
-