From edfb46bc71e15d0fdb43b0dea6576f1be52c840b Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Thu, 30 Dec 2021 14:50:33 +0100
Subject: [PATCH 01/13] Add an internal utility hook for handling async values.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .../src/components/SearchFilter/hooks.ts      | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 plugins/search/src/components/SearchFilter/hooks.ts

diff --git a/plugins/search/src/components/SearchFilter/hooks.ts b/plugins/search/src/components/SearchFilter/hooks.ts
new file mode 100644
index 0000000000..36bb4e3ddf
--- /dev/null
+++ b/plugins/search/src/components/SearchFilter/hooks.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useRef } from 'react';
+import { useAsyncFn, useDebounce } from 'react-use';
+
+/**
+ * Utility hook for either asynchronously loading filter values from a given
+ * function or synchronously providing a given list of default values.
+ */
+export const useAsyncFilterValues = (
+  fn: ((partial: string) => Promise<string[]>) | undefined,
+  inputValue: string,
+  defaultValues: string[] = [],
+  debounce: number = 250,
+) => {
+  const valuesMemo = useRef<Record<string, string[]>>({});
+  const definiteFn = fn || (() => Promise.resolve([]));
+
+  const [state, callback] = useAsyncFn(definiteFn, [inputValue], {
+    loading: true,
+  });
+
+  // Do not invoke the given function more than necessary.
+  useDebounce(
+    () => {
+      // Performance optimization: only invoke the callback once per inputValue
+      // for the lifetime of the hook/component.
+      if (valuesMemo.current[inputValue] === undefined) {
+        callback(inputValue).then(values => {
+          valuesMemo.current[inputValue] = values;
+        });
+      }
+    },
+    debounce,
+    [callback, inputValue],
+  );
+
+  // Immediately return the default values if they are provided.
+  if (defaultValues.length) {
+    return {
+      loading: false,
+      value: defaultValues,
+    };
+  }
+
+  // Immediately return a memoized value if it is set.
+  if (valuesMemo.current[inputValue] !== undefined) {
+    return {
+      loading: false,
+      value: valuesMemo.current[inputValue],
+    };
+  }
+
+  return state;
+};

From d4d48e1b1ae911d6ad3929891522efab47760269 Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Thu, 30 Dec 2021 14:58:44 +0100
Subject: [PATCH 02/13] Add asyncValues and asyncDebounce to props and
 implement in select filter.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .../SearchFilter/SearchFilter.stories.tsx     | 16 +++++
 .../components/SearchFilter/SearchFilter.tsx  | 72 ++++++++++++-------
 .../src/components/SearchFilter/index.ts      |  4 ++
 plugins/search/src/index.ts                   |  4 ++
 4 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
index d6fc70716e..dbedff8c63 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
@@ -56,3 +56,19 @@ export const SelectFilter = () => {
     </Paper>
   );
 };
+
+export const AsyncSelectFilter = () => {
+  return (
+    <Paper style={{ padding: 10 }}>
+      <SearchFilter.Select
+        name="Asynchronous Values"
+        asyncValues={async () => {
+          const response = await fetch('https://swapi.dev/api/planets');
+          const json: { results: Array<{ name: string }> } =
+            await response.json();
+          return json.results.map(r => r.name);
+        }}
+      />
+    </Paper>
+  );
+};
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
index 52b03c785b..93d0bd2fd7 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
@@ -27,6 +27,7 @@ import {
 } from '@material-ui/core';
 
 import { useSearch } from '../SearchContext';
+import { useAsyncFilterValues } from './hooks';
 
 const useStyles = makeStyles({
   label: {
@@ -34,24 +35,29 @@ const useStyles = makeStyles({
   },
 });
 
-export type Component = {
+/**
+ * @public
+ */
+export type SearchFilterComponentProps = {
   className?: string;
   name: string;
+  label?: string;
   values?: string[];
+  asyncValues?: (partial: string) => Promise<string[]>;
+  asyncDebounce?: number;
   defaultValue?: string[] | string | null;
 };
 
-export type Props = Component & {
-  component: (props: Component) => ReactElement;
+/**
+ * @public
+ */
+export type SearchFilterWrapperProps = SearchFilterComponentProps & {
+  component: (props: SearchFilterComponentProps) => ReactElement;
   debug?: boolean;
 };
 
-const CheckboxFilter = ({
-  className,
-  name,
-  defaultValue,
-  values = [],
-}: Component) => {
+const CheckboxFilter = (props: SearchFilterComponentProps) => {
+  const { className, defaultValue, label, name, values = [] } = props;
   const classes = useStyles();
   const { filters, setFilters } = useSearch();
 
@@ -84,7 +90,7 @@ const CheckboxFilter = ({
       fullWidth
       data-testid="search-checkboxfilter-next"
     >
-      <FormLabel className={classes.label}>{name}</FormLabel>
+      <FormLabel className={classes.label}>{label || name}</FormLabel>
       {values.map((value: string) => (
         <FormControlLabel
           key={value}
@@ -106,13 +112,23 @@ const CheckboxFilter = ({
   );
 };
 
-const SelectFilter = ({
-  className,
-  name,
-  defaultValue,
-  values = [],
-}: Component) => {
+const SelectFilter = (props: SearchFilterComponentProps) => {
+  const {
+    asyncValues,
+    asyncDebounce,
+    className,
+    defaultValue,
+    label,
+    name,
+    values: givenValues,
+  } = props;
   const classes = useStyles();
+  const { value: values = [], loading } = useAsyncFilterValues(
+    asyncValues,
+    '',
+    givenValues,
+    asyncDebounce,
+  );
   const { filters, setFilters } = useSearch();
 
   useEffect(() => {
@@ -138,13 +154,14 @@ const SelectFilter = ({
 
   return (
     <FormControl
+      disabled={loading}
       className={className}
       variant="filled"
       fullWidth
       data-testid="search-selectfilter-next"
     >
       <InputLabel className={classes.label} margin="dense">
-        {name}
+        {label || name}
       </InputLabel>
       <Select
         variant="outlined"
@@ -164,17 +181,20 @@ const SelectFilter = ({
   );
 };
 
-const SearchFilter = ({ component: Element, ...props }: Props) => (
-  <Element {...props} />
-);
+const SearchFilter = ({
+  component: Element,
+  ...props
+}: SearchFilterWrapperProps) => <Element {...props} />;
 
-SearchFilter.Checkbox = (props: Omit<Props, 'component'> & Component) => (
-  <SearchFilter {...props} component={CheckboxFilter} />
-);
+SearchFilter.Checkbox = (
+  props: Omit<SearchFilterWrapperProps, 'component'> &
+    SearchFilterComponentProps,
+) => <SearchFilter {...props} component={CheckboxFilter} />;
 
-SearchFilter.Select = (props: Omit<Props, 'component'> & Component) => (
-  <SearchFilter {...props} component={SelectFilter} />
-);
+SearchFilter.Select = (
+  props: Omit<SearchFilterWrapperProps, 'component'> &
+    SearchFilterComponentProps,
+) => <SearchFilter {...props} component={SelectFilter} />;
 
 /**
  * @deprecated This component was used for rapid prototyping of the Backstage
diff --git a/plugins/search/src/components/SearchFilter/index.ts b/plugins/search/src/components/SearchFilter/index.ts
index d06e5d87d2..af5fca182c 100644
--- a/plugins/search/src/components/SearchFilter/index.ts
+++ b/plugins/search/src/components/SearchFilter/index.ts
@@ -15,3 +15,7 @@
  */
 
 export { SearchFilter, SearchFilterNext } from './SearchFilter';
+export type {
+  SearchFilterComponentProps,
+  SearchFilterWrapperProps,
+} from './SearchFilter';
diff --git a/plugins/search/src/index.ts b/plugins/search/src/index.ts
index c386330937..7a63ccd471 100644
--- a/plugins/search/src/index.ts
+++ b/plugins/search/src/index.ts
@@ -33,6 +33,10 @@ export type {
 } from './components/SearchBar';
 export { SearchContextProvider, useSearch } from './components/SearchContext';
 export { SearchFilter, SearchFilterNext } from './components/SearchFilter';
+export type {
+  SearchFilterComponentProps,
+  SearchFilterWrapperProps,
+} from './components/SearchFilter';
 export { SearchModal } from './components/SearchModal';
 export type { SearchModalProps } from './components/SearchModal';
 export { SearchPage as Router } from './components/SearchPage';

From bb20c30a7df700b7de047e74c7ab2c1c31398663 Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Thu, 30 Dec 2021 15:03:46 +0100
Subject: [PATCH 03/13] Add initial <Search.Autocomplete /> implementation.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .../SearchFilter.Autocomplete.tsx             | 105 ++++++++++++++++++
 .../SearchFilter/SearchFilter.stories.tsx     |  46 ++++++++
 .../components/SearchFilter/SearchFilter.tsx  |  14 +++
 .../src/components/SearchFilter/index.ts      |   1 +
 plugins/search/src/index.ts                   |   1 +
 5 files changed, 167 insertions(+)
 create mode 100644 plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx

diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
new file mode 100644
index 0000000000..e8e62b1929
--- /dev/null
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
@@ -0,0 +1,105 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { ChangeEvent, useState } from 'react';
+import { Chip, TextField } from '@material-ui/core';
+import {
+  Autocomplete,
+  AutocompleteGetTagProps,
+  AutocompleteRenderInputParams,
+} from '@material-ui/lab';
+import { useSearch } from '../SearchContext';
+import { useAsyncFilterValues } from './hooks';
+import { SearchFilterComponentProps } from './SearchFilter';
+
+/**
+ * @public
+ */
+export type SearchAutocompleteFilterProps = SearchFilterComponentProps & {
+  multiple?: boolean;
+  limitTags?: number;
+};
+
+export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {
+  const {
+    asyncValues,
+    asyncDebounce,
+    className,
+    multiple,
+    name,
+    values: givenValues,
+    label,
+    limitTags,
+  } = props;
+  const [inputValue, setInputValue] = useState<string>('');
+  const { value: values, loading } = useAsyncFilterValues(
+    asyncValues,
+    inputValue,
+    givenValues,
+    asyncDebounce,
+  );
+  const { setFilters } = useSearch();
+
+  // Set new filter values on input change.
+  const handleChange = (
+    _: ChangeEvent<{}>,
+    newValue: string | string[] | null,
+  ) => {
+    setFilters(prevState => {
+      const { [name]: filter, ...others } = prevState;
+
+      if (newValue) {
+        return { ...others, [name]: newValue };
+      }
+      return { ...others };
+    });
+  };
+
+  // Provide the input field.
+  const renderInput = (params: AutocompleteRenderInputParams) => (
+    <TextField
+      {...params}
+      name="search"
+      variant="outlined"
+      label={label || name}
+      fullWidth
+    />
+  );
+
+  // Render tags as primary-colored chips.
+  const renderTags = (
+    tagValue: string[],
+    getTagProps: AutocompleteGetTagProps,
+  ) =>
+    tagValue.map((option: string, index: number) => (
+      <Chip label={option} color="primary" {...getTagProps({ index })} />
+    ));
+
+  return (
+    <Autocomplete
+      multiple={multiple}
+      className={className}
+      id={`${multiple ?? 'multi-'}select-filter-${name}--select`}
+      options={values || []}
+      loading={loading}
+      limitTags={limitTags}
+      onChange={handleChange}
+      onInputChange={(_, newValue) => setInputValue(newValue)}
+      renderInput={renderInput}
+      renderTags={renderTags}
+    />
+  );
+};
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
index dbedff8c63..e2a73a42bc 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
@@ -72,3 +72,49 @@ export const AsyncSelectFilter = () => {
     </Paper>
   );
 };
+
+export const Autocomplete = () => {
+  return (
+    <Paper style={{ padding: 10 }}>
+      <SearchFilter.Autocomplete
+        name="autocomplete"
+        label="Single-Select Autocomplete Filter"
+        values={['abba', 'cadaver']}
+      />
+    </Paper>
+  );
+};
+
+export const MultiSelectAutocomplete = () => {
+  return (
+    <Paper style={{ padding: 10 }}>
+      <SearchFilter.Autocomplete
+        multiple
+        name="autocomplete"
+        label="Multi-Select Autocomplete Filter"
+        values={['abba', 'cadaver']}
+      />
+    </Paper>
+  );
+};
+
+export const AsyncMultiSelectAutocomplete = () => {
+  return (
+    <Paper style={{ padding: 10 }}>
+      <SearchFilter.Autocomplete
+        multiple
+        name="starwarsPerson"
+        label="Starwars Character"
+        asyncValues={async partial => {
+          if (partial === '') return [];
+          const response = await fetch(
+            `https://swapi.dev/api/people?search=${partial}`,
+          );
+          const json: { results: Array<{ name: string }> } =
+            await response.json();
+          return json.results.map(r => r.name);
+        }}
+      />
+    </Paper>
+  );
+};
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
index 93d0bd2fd7..23761ee4a9 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
@@ -26,6 +26,10 @@ import {
   FormLabel,
 } from '@material-ui/core';
 
+import {
+  AutocompleteFilter,
+  SearchAutocompleteFilterProps,
+} from './SearchFilter.Autocomplete';
 import { useSearch } from '../SearchContext';
 import { useAsyncFilterValues } from './hooks';
 
@@ -196,6 +200,16 @@ SearchFilter.Select = (
     SearchFilterComponentProps,
 ) => <SearchFilter {...props} component={SelectFilter} />;
 
+/**
+ * A control surface for a given filter field name, rendered as an autocomplete
+ * textfield. A hard-coded list of values may be provided, or an async function
+ * which returns values may be provided instead.
+ * @public
+ */
+SearchFilter.Autocomplete = (props: SearchAutocompleteFilterProps) => (
+  <SearchFilter {...props} component={AutocompleteFilter} />
+);
+
 /**
  * @deprecated This component was used for rapid prototyping of the Backstage
  * Search platform. Now that the API has stabilized, you should use the
diff --git a/plugins/search/src/components/SearchFilter/index.ts b/plugins/search/src/components/SearchFilter/index.ts
index af5fca182c..86cd66ff6b 100644
--- a/plugins/search/src/components/SearchFilter/index.ts
+++ b/plugins/search/src/components/SearchFilter/index.ts
@@ -19,3 +19,4 @@ export type {
   SearchFilterComponentProps,
   SearchFilterWrapperProps,
 } from './SearchFilter';
+export type { SearchAutocompleteFilterProps } from './SearchFilter.Autocomplete';
diff --git a/plugins/search/src/index.ts b/plugins/search/src/index.ts
index 7a63ccd471..99c3f5177b 100644
--- a/plugins/search/src/index.ts
+++ b/plugins/search/src/index.ts
@@ -34,6 +34,7 @@ export type {
 export { SearchContextProvider, useSearch } from './components/SearchContext';
 export { SearchFilter, SearchFilterNext } from './components/SearchFilter';
 export type {
+  SearchAutocompleteFilterProps,
   SearchFilterComponentProps,
   SearchFilterWrapperProps,
 } from './components/SearchFilter';

From 86164e96ceb39a7bb268f6a3c3143a0a3b1feb18 Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Thu, 30 Dec 2021 15:05:26 +0100
Subject: [PATCH 04/13] Add an entity filter just for TechDocs search.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .../app/src/components/search/SearchPage.tsx  | 29 +++++++++++++++++++
 .../app/src/components/search/SearchPage.tsx  | 29 +++++++++++++++++++
 2 files changed, 58 insertions(+)

diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx
index 9a8c208103..555a8932ea 100644
--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/app/src/components/search/SearchPage.tsx
@@ -23,7 +23,12 @@ import {
   Page,
   SidebarPinStateContext,
 } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
 import { CatalogResultListItem } from '@backstage/plugin-catalog';
+import {
+  catalogApiRef,
+  CATALOG_FILTER_EXISTS,
+} from '@backstage/plugin-catalog-react';
 import {
   DefaultResultListItem,
   SearchBar,
@@ -31,6 +36,7 @@ import {
   SearchResult,
   SearchResultPager,
   SearchType,
+  useSearch,
 } from '@backstage/plugin-search';
 import { DocsResultListItem } from '@backstage/plugin-techdocs';
 import { Grid, List, makeStyles, Paper, Theme } from '@material-ui/core';
@@ -54,6 +60,8 @@ const useStyles = makeStyles((theme: Theme) => ({
 const SearchPage = () => {
   const classes = useStyles();
   const { isMobile } = useContext(SidebarPinStateContext);
+  const { types } = useSearch();
+  const catalogApi = useApi(catalogApiRef);
 
   return (
     <Page themeId="home">
@@ -84,6 +92,27 @@ const SearchPage = () => {
                 ]}
               />
               <Paper className={classes.filters}>
+                {types.includes('techdocs') && (
+                  <SearchFilter.Autocomplete
+                    className={classes.filter}
+                    label="Entity"
+                    name="name"
+                    asyncValues={async partial => {
+                      // Return a list of entitis which are documented.
+                      const { items } = await catalogApi.getEntities({
+                        fields: ['metadata.name'],
+                        filter: {
+                          'metadata.annotations.backstage.io/techdocs-ref':
+                            CATALOG_FILTER_EXISTS,
+                        },
+                      });
+
+                      return items
+                        .map(entity => entity.metadata.name)
+                        .filter(name => name.includes(partial));
+                    }}
+                  />
+                )}
                 <SearchFilter.Select
                   className={classes.filter}
                   name="kind"
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
index cf380b6f5c..411f902933 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
@@ -2,6 +2,10 @@ import React from 'react';
 import { makeStyles, Theme, Grid, List, Paper } from '@material-ui/core';
 
 import { CatalogResultListItem } from '@backstage/plugin-catalog';
+import {
+  catalogApiRef,
+  CATALOG_FILTER_EXISTS,
+} from '@backstage/plugin-catalog-react';
 import { DocsResultListItem } from '@backstage/plugin-techdocs';
 
 import {
@@ -10,6 +14,7 @@ import {
   SearchResult,
   SearchType,
   DefaultResultListItem,
+  useSearch,
 } from '@backstage/plugin-search';
 import {
   CatalogIcon,
@@ -18,6 +23,7 @@ import {
   Header,
   Page,
 } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
 
 const useStyles = makeStyles((theme: Theme) => ({
   bar: {
@@ -36,6 +42,8 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const SearchPage = () => {
   const classes = useStyles();
+  const { types } = useSearch();
+  const catalogApi = useApi(catalogApiRef);
 
   return (
     <Page themeId="home">
@@ -65,6 +73,27 @@ const SearchPage = () => {
               ]}
             />
             <Paper className={classes.filters}>
+              {types.includes('techdocs') && (
+                <SearchFilter.Autocomplete
+                  className={classes.filter}
+                  label="Entity"
+                  name="name"
+                  asyncValues={async partial => {
+                    // Return a list of entitis which are documented.
+                    const { items } = await catalogApi.getEntities({
+                      fields: ['metadata.name'],
+                      filter: {
+                        'metadata.annotations.backstage.io/techdocs-ref':
+                          CATALOG_FILTER_EXISTS,
+                      },
+                    });
+
+                    return items
+                      .map(entity => entity.metadata.name)
+                      .filter(name => name.includes(partial));
+                  }}
+                />
+              )}
               <SearchFilter.Select
                 className={classes.filter}
                 name="kind"

From 4aca2a5307ada0105be43c4e587caf701e25ddda Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Thu, 30 Dec 2021 15:12:47 +0100
Subject: [PATCH 05/13] Update search plugin API report and add changesets.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .changeset/search-something-new.md | 76 ++++++++++++++++++++++++++++++
 .changeset/search-under-the-sun.md |  9 ++++
 plugins/search/api-report.md       | 51 ++++++++++++++++----
 3 files changed, 128 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/search-something-new.md
 create mode 100644 .changeset/search-under-the-sun.md

diff --git a/.changeset/search-something-new.md b/.changeset/search-something-new.md
new file mode 100644
index 0000000000..260d1055a4
--- /dev/null
+++ b/.changeset/search-something-new.md
@@ -0,0 +1,76 @@
+---
+'@backstage/create-app': patch
+---
+
+An example instance of the new `<SearchFilter.Autocomplete />` was added to the composed `SearchPage.tsx`, allowing searches bound to the `techdocs` type to be filtered by entity name.
+
+This is an entirely optional change; if you wish to adopt it, you can make the following (or similar) changes to your search page layout:
+
+```diff
+--- a/packages/app/src/components/search/SearchPage.tsx
++++ b/packages/app/src/components/search/SearchPage.tsx
+@@ -2,6 +2,10 @@ import React from 'react';
+ import { makeStyles, Theme, Grid, List, Paper } from '@material-ui/core';
+
+ import { CatalogResultListItem } from '@backstage/plugin-catalog';
++import {
++  catalogApiRef,
++  CATALOG_FILTER_EXISTS,
++} from '@backstage/plugin-catalog-react';
+ import { DocsResultListItem } from '@backstage/plugin-techdocs';
+
+ import {
+@@ -10,6 +14,7 @@ import {
+   SearchResult,
+   SearchType,
+   DefaultResultListItem,
++  useSearch,
+ } from '@backstage/plugin-search';
+ import {
+   CatalogIcon,
+@@ -18,6 +23,7 @@ import {
+   Header,
+   Page,
+ } from '@backstage/core-components';
++import { useApi } from '@backstage/core-plugin-api';
+
+ const useStyles = makeStyles((theme: Theme) => ({
+   bar: {
+@@ -36,6 +42,8 @@ const useStyles = makeStyles((theme: Theme) => ({
+
+ const SearchPage = () => {
+   const classes = useStyles();
++  const { types } = useSearch();
++  const catalogApi = useApi(catalogApiRef);
+
+   return (
+     <Page themeId="home">
+@@ -65,6 +73,27 @@ const SearchPage = () => {
+               ]}
+             />
+             <Paper className={classes.filters}>
++              {types.includes('techdocs') && (
++                <SearchFilter.Autocomplete
++                  className={classes.filter}
++                  label="Entity"
++                  name="name"
++                  asyncValues={async partial => {
++                    // Return a list of entitis which are documented.
++                    const { items } = await catalogApi.getEntities({
++                      fields: ['metadata.name'],
++                      filter: {
++                        'metadata.annotations.backstage.io/techdocs-ref':
++                          CATALOG_FILTER_EXISTS,
++                      },
++                    });
++
++                    return items
++                      .map(entity => entity.metadata.name)
++                      .filter(name => name.includes(partial));
++                  }}
++                />
++              )}
+               <SearchFilter.Select
+                 className={classes.filter}
+                 name="kind"
+```
diff --git a/.changeset/search-under-the-sun.md b/.changeset/search-under-the-sun.md
new file mode 100644
index 0000000000..dc1bbe42e9
--- /dev/null
+++ b/.changeset/search-under-the-sun.md
@@ -0,0 +1,9 @@
+---
+'@backstage/plugin-search': patch
+---
+
+Introduces a `<SearchFilter.Autocomplete />` variant, which can be used as either a single- or multi-select autocomplete.
+
+This variant, as well as `<SearchFilter.Select />`, now also supports loading allowed values asynchronously with a new `asyncValues` prop, which takes an asynchronous function that resolves to the list of values (an optional `asyncDebounce` prop may also be provided).
+
+Check the [search plugin storybook](https://backstage.io/storybook/?path=/story/plugins-search-searchfilter) to see how to leverage these new additions.
diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md
index 0a7da01ffd..b63271b94d 100644
--- a/plugins/search/api-report.md
+++ b/plugins/search/api-report.md
@@ -92,6 +92,12 @@ export interface SearchApi {
 // @public (undocumented)
 export const searchApiRef: ApiRef<SearchApi>;
 
+// @public (undocumented)
+export type SearchAutocompleteFilterProps = SearchFilterComponentProps & {
+  multiple?: boolean;
+  limitTags?: number;
+};
+
 // @public
 export const SearchBar: ({ onChange, ...props }: SearchBarProps) => JSX.Element;
 
@@ -143,18 +149,49 @@ export const SearchContextProvider: ({
 //
 // @public (undocumented)
 export const SearchFilter: {
-  ({ component: Element, ...props }: Props): JSX.Element;
-  Checkbox(props: Omit<Props, 'component'> & Component): JSX.Element;
-  Select(props: Omit<Props, 'component'> & Component): JSX.Element;
+  ({ component: Element, ...props }: SearchFilterWrapperProps): JSX.Element;
+  Checkbox(
+    props: Omit<SearchFilterWrapperProps, 'component'> &
+      SearchFilterComponentProps,
+  ): JSX.Element;
+  Select(
+    props: Omit<SearchFilterWrapperProps, 'component'> &
+      SearchFilterComponentProps,
+  ): JSX.Element;
+  Autocomplete(props: SearchAutocompleteFilterProps): JSX.Element;
+};
+
+// @public (undocumented)
+export type SearchFilterComponentProps = {
+  className?: string;
+  name: string;
+  label?: string;
+  values?: string[];
+  asyncValues?: (partial: string) => Promise<string[]>;
+  asyncDebounce?: number;
+  defaultValue?: string[] | string | null;
 };
 
 // Warning: (ae-missing-release-tag) "SearchFilterNext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public @deprecated (undocumented)
 export const SearchFilterNext: {
-  ({ component: Element, ...props }: Props): JSX.Element;
-  Checkbox(props: Omit<Props, 'component'> & Component): JSX.Element;
-  Select(props: Omit<Props, 'component'> & Component): JSX.Element;
+  ({ component: Element, ...props }: SearchFilterWrapperProps): JSX.Element;
+  Checkbox(
+    props: Omit<SearchFilterWrapperProps, 'component'> &
+      SearchFilterComponentProps,
+  ): JSX.Element;
+  Select(
+    props: Omit<SearchFilterWrapperProps, 'component'> &
+      SearchFilterComponentProps,
+  ): JSX.Element;
+  Autocomplete(props: SearchAutocompleteFilterProps): JSX.Element;
+};
+
+// @public (undocumented)
+export type SearchFilterWrapperProps = SearchFilterComponentProps & {
+  component: (props: SearchFilterComponentProps) => ReactElement;
+  debug?: boolean;
 };
 
 // Warning: (ae-missing-release-tag) "SearchModal" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -284,6 +321,4 @@ export const useSearch: () => SearchContextValue;
 // Warnings were encountered during analysis:
 //
 // src/components/SearchContext/SearchContext.d.ts:23:5 - (ae-forgotten-export) The symbol "SettableSearchContext" needs to be exported by the entry point index.d.ts
-// src/components/SearchFilter/SearchFilter.d.ts:13:5 - (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// src/components/SearchFilter/SearchFilter.d.ts:14:5 - (ae-forgotten-export) The symbol "Component" needs to be exported by the entry point index.d.ts
 ```

From 84208528d97aa11c6a06ac8b34bceefd087cc626 Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Mon, 3 Jan 2022 16:00:48 +0100
Subject: [PATCH 06/13] Use precise imports for react-use hooks.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 plugins/search/src/components/SearchFilter/hooks.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/plugins/search/src/components/SearchFilter/hooks.ts b/plugins/search/src/components/SearchFilter/hooks.ts
index 36bb4e3ddf..df9e8a980a 100644
--- a/plugins/search/src/components/SearchFilter/hooks.ts
+++ b/plugins/search/src/components/SearchFilter/hooks.ts
@@ -15,7 +15,8 @@
  */
 
 import { useRef } from 'react';
-import { useAsyncFn, useDebounce } from 'react-use';
+import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useDebounce from 'react-use/lib/useDebounce';
 
 /**
  * Utility hook for either asynchronously loading filter values from a given

From 3e5400cfa8c396e823d3f587fee0731a22d7d6e5 Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Mon, 3 Jan 2022 16:03:50 +0100
Subject: [PATCH 07/13] Minor docs updates.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .changeset/search-under-the-sun.md                              | 2 +-
 .../packages/app/src/components/search/SearchPage.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/search-under-the-sun.md b/.changeset/search-under-the-sun.md
index dc1bbe42e9..2cf5d46cdb 100644
--- a/.changeset/search-under-the-sun.md
+++ b/.changeset/search-under-the-sun.md
@@ -2,7 +2,7 @@
 '@backstage/plugin-search': patch
 ---
 
-Introduces a `<SearchFilter.Autocomplete />` variant, which can be used as either a single- or multi-select autocomplete.
+Introduces a `<SearchFilter.Autocomplete />` variant, which can be used as either a single- or multi-select autocomplete filter.
 
 This variant, as well as `<SearchFilter.Select />`, now also supports loading allowed values asynchronously with a new `asyncValues` prop, which takes an asynchronous function that resolves to the list of values (an optional `asyncDebounce` prop may also be provided).
 
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
index 411f902933..d348606873 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
@@ -79,7 +79,7 @@ const SearchPage = () => {
                   label="Entity"
                   name="name"
                   asyncValues={async partial => {
-                    // Return a list of entitis which are documented.
+                    // Return a list of entities which are documented.
                     const { items } = await catalogApi.getEntities({
                       fields: ['metadata.name'],
                       filter: {

From c84c404fc893bd8bf8aad538154de172437d997e Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Mon, 3 Jan 2022 18:36:30 +0100
Subject: [PATCH 08/13] Initial tests.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .../SearchFilter.Autocomplete.test.tsx        | 365 ++++++++++++++++++
 .../SearchFilter.Autocomplete.tsx             |  24 +-
 .../SearchFilter/SearchFilter.test.tsx        |  28 ++
 3 files changed, 414 insertions(+), 3 deletions(-)
 create mode 100644 plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx

diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx
new file mode 100644
index 0000000000..7a8bfe2624
--- /dev/null
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx
@@ -0,0 +1,365 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ApiProvider } from '@backstage/core-app-api';
+import { TestApiRegistry } from '@backstage/test-utils';
+import { screen, render, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { searchApiRef } from '../../apis';
+import { SearchContextProvider, useSearch } from '../SearchContext';
+import { SearchFilter } from './SearchFilter';
+
+const SearchContextFilterSpy = ({ name }: { name: string }) => {
+  const { filters } = useSearch();
+  const value = filters[name];
+  return (
+    <span data-testid={`${name}-filter-spy`}>
+      {Array.isArray(value) ? value.join(',') : value}
+    </span>
+  );
+};
+
+describe('SearchFilter.Autocomplete', () => {
+  const query = jest.fn().mockResolvedValue({});
+  const mockApis = TestApiRegistry.from([searchApiRef, { query }]);
+  const emptySearchContext = {
+    term: '',
+    types: [],
+    filters: {},
+  };
+
+  const name = 'field';
+  const values = ['value1', 'value2'];
+
+  it('renders as expected', async () => {
+    render(
+      <ApiProvider apis={mockApis}>
+        <SearchContextProvider>
+          <SearchFilter.Autocomplete name={name} values={values} />
+        </SearchContextProvider>
+      </ApiProvider>,
+    );
+
+    const autocomplete = screen.getByRole('combobox');
+    const input = within(autocomplete).getByRole('textbox');
+    userEvent.click(input);
+
+    await waitFor(() => {
+      screen.getByRole('listbox');
+    });
+
+    expect(screen.getByRole('option', { name: values[0] })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: values[1] })).toBeInTheDocument();
+  });
+
+  it('renders as expected with async values', async () => {
+    render(
+      <ApiProvider apis={mockApis}>
+        <SearchContextProvider>
+          <SearchFilter.Autocomplete
+            name={name}
+            asyncValues={async () => values}
+          />
+        </SearchContextProvider>
+      </ApiProvider>,
+    );
+
+    const autocomplete = screen.getByRole('combobox');
+    const input = within(autocomplete).getByRole('textbox');
+    userEvent.click(input);
+
+    await waitFor(() => {
+      screen.getByRole('listbox');
+    });
+
+    expect(screen.getByRole('option', { name: values[0] })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: values[1] })).toBeInTheDocument();
+  });
+
+  it('does not affect unrelated filter state', async () => {
+    render(
+      <ApiProvider apis={mockApis}>
+        <SearchContextProvider
+          initialState={{
+            ...emptySearchContext,
+            ...{ filters: { unrelated: 'value' } },
+          }}
+        >
+          <SearchFilter.Autocomplete name={name} values={values} />
+          <SearchContextFilterSpy name={name} />
+          <SearchContextFilterSpy name="unrelated" />
+        </SearchContextProvider>
+      </ApiProvider>,
+    );
+
+    // The spy should show the initial value.
+    expect(screen.getByTestId('unrelated-filter-spy')).toHaveTextContent(
+      'value',
+    );
+
+    // Select a value from the autocomplete filter.
+    const autocomplete = screen.getByRole('combobox');
+    const input = within(autocomplete).getByRole('textbox');
+    userEvent.click(input);
+    await waitFor(() => {
+      screen.getByRole('listbox');
+    });
+    userEvent.click(screen.getByRole('option', { name: values[1] }));
+
+    // Wait for the autocomplete filter's value to change.
+    await waitFor(() => {
+      expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent(
+        values[1],
+      );
+    });
+
+    // Unrelated filter spy should maintain the same value.
+    expect(screen.getByTestId('unrelated-filter-spy')).toHaveTextContent(
+      'value',
+    );
+  });
+
+  describe('single', () => {
+    it('renders as expected with defaultValue', async () => {
+      render(
+        <ApiProvider apis={mockApis}>
+          <SearchContextProvider>
+            <SearchFilter.Autocomplete
+              name={name}
+              values={values}
+              defaultValue={values[1]}
+            />
+            <SearchContextFilterSpy name={name} />
+          </SearchContextProvider>
+        </ApiProvider>,
+      );
+
+      const autocomplete = screen.getByRole('combobox');
+      const input = within(autocomplete).getByRole('textbox');
+
+      await waitFor(() => {
+        expect(input).toHaveValue(values[1]);
+        expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent(
+          values[1],
+        );
+      });
+    });
+
+    it('renders as expected with initial context', async () => {
+      render(
+        <ApiProvider apis={mockApis}>
+          <SearchContextProvider
+            initialState={{
+              ...emptySearchContext,
+              ...{ filters: { [name]: values[0] } },
+            }}
+          >
+            <SearchFilter.Autocomplete name={name} values={values} />
+            <SearchContextFilterSpy name={name} />
+          </SearchContextProvider>
+        </ApiProvider>,
+      );
+
+      const autocomplete = screen.getByRole('combobox');
+      const input = within(autocomplete).getByRole('textbox');
+
+      await waitFor(() => {
+        expect(input).toHaveValue(values[0]);
+        expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent(
+          values[0],
+        );
+      });
+    });
+
+    it('sets filter state when selecting a value', async () => {
+      render(
+        <ApiProvider apis={mockApis}>
+          <SearchContextProvider>
+            <SearchFilter.Autocomplete name={name} values={values} />
+            <SearchContextFilterSpy name={name} />
+          </SearchContextProvider>
+        </ApiProvider>,
+      );
+
+      // Select the first option in the autocomplete.
+      const autocomplete = screen.getByRole('combobox');
+      const input = within(autocomplete).getByRole('textbox');
+      userEvent.click(input);
+      await waitFor(() => {
+        screen.getByRole('listbox');
+      });
+      userEvent.click(screen.getByRole('option', { name: values[0] }));
+
+      // The value should be present in the context.
+      await waitFor(() => {
+        expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent(
+          values[0],
+        );
+      });
+
+      // Click the "Clear" button to remove the value.
+      const clearButton = within(autocomplete).getByLabelText('Clear');
+      userEvent.click(clearButton);
+
+      // That value should have been unset from the context.
+      await waitFor(() => {
+        expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent('');
+      });
+    });
+  });
+
+  describe('multiple', () => {
+    it('renders as expected with defaultValue', async () => {
+      render(
+        <ApiProvider apis={mockApis}>
+          <SearchContextProvider>
+            <SearchFilter.Autocomplete
+              multiple
+              name={name}
+              values={values}
+              defaultValue={values}
+            />
+            <SearchContextFilterSpy name={name} />
+          </SearchContextProvider>
+        </ApiProvider>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(values[0])).toBeInTheDocument();
+        expect(screen.getByText(values[1])).toBeInTheDocument();
+        expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent(
+          values.join(','),
+        );
+      });
+    });
+
+    it('renders as expected with initial context', async () => {
+      render(
+        <ApiProvider apis={mockApis}>
+          <SearchContextProvider
+            initialState={{
+              ...emptySearchContext,
+              ...{ filters: { [name]: values } },
+            }}
+          >
+            <SearchFilter.Autocomplete multiple name={name} values={values} />
+            <SearchContextFilterSpy name={name} />
+          </SearchContextProvider>
+        </ApiProvider>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(values[0])).toBeInTheDocument();
+        expect(screen.getByText(values[1])).toBeInTheDocument();
+        expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent(
+          values.join(','),
+        );
+      });
+    });
+
+    it('respects tag limit configuration', async () => {
+      render(
+        <ApiProvider apis={mockApis}>
+          <SearchContextProvider>
+            <SearchFilter.Autocomplete
+              multiple
+              limitTags={1}
+              name={name}
+              values={values}
+            />
+          </SearchContextProvider>
+        </ApiProvider>,
+      );
+
+      const autocomplete = screen.getByRole('combobox');
+      const input = within(autocomplete).getByRole('textbox');
+
+      // Select the second value.
+      userEvent.click(input);
+      await waitFor(() => {
+        screen.getByRole('listbox');
+      });
+      userEvent.click(screen.getByRole('option', { name: values[1] }));
+      await waitFor(() => {
+        expect(
+          screen.getByRole('button', { name: values[1] }),
+        ).toBeInTheDocument();
+      });
+
+      // Select the first value.
+      userEvent.click(input);
+      await waitFor(() => {
+        screen.getByRole('listbox');
+      });
+      userEvent.click(screen.getByRole('option', { name: values[0] }));
+      await waitFor(() => {
+        expect(
+          screen.getByRole('button', { name: values[0] }),
+        ).toBeInTheDocument();
+      });
+
+      // Blur the field and only one tag should be shown with a +1.
+      input.blur();
+      expect(
+        screen.queryByRole('button', { name: values[0] }),
+      ).not.toBeInTheDocument();
+      expect(screen.getByText('+1')).toBeInTheDocument();
+    });
+
+    it('sets filter state when selecting a value', async () => {
+      render(
+        <ApiProvider apis={mockApis}>
+          <SearchContextProvider>
+            <SearchFilter.Autocomplete multiple name={name} values={values} />
+            <SearchContextFilterSpy name={name} />
+          </SearchContextProvider>
+        </ApiProvider>,
+      );
+
+      const autocomplete = screen.getByRole('combobox');
+
+      // Select both values in the autocomplete.
+      const input = within(autocomplete).getByRole('textbox');
+      userEvent.click(input);
+      await waitFor(() => {
+        screen.getByRole('listbox');
+      });
+      userEvent.click(screen.getByRole('option', { name: values[0] }));
+      userEvent.click(input);
+      await waitFor(() => {
+        screen.getByRole('listbox');
+      });
+      userEvent.click(screen.getByRole('option', { name: values[1] }));
+
+      // Both options should be present in the context.
+      await waitFor(() => {
+        expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent(
+          values.join(','),
+        );
+      });
+
+      // Click the "Clear" button to remove the value.
+      const clearButton = within(autocomplete).getByLabelText('Clear');
+      userEvent.click(clearButton);
+
+      // There should be no content in the filter context.
+      await waitFor(() => {
+        expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent('');
+      });
+    });
+  });
+});
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
index e8e62b1929..bf0745864b 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ChangeEvent, useState } from 'react';
+import React, { ChangeEvent, useEffect, useState } from 'react';
 import { Chip, TextField } from '@material-ui/core';
 import {
   Autocomplete,
@@ -38,6 +38,7 @@ export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {
     asyncValues,
     asyncDebounce,
     className,
+    defaultValue,
     multiple,
     name,
     values: givenValues,
@@ -51,7 +52,23 @@ export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {
     givenValues,
     asyncDebounce,
   );
-  const { setFilters } = useSearch();
+  const { filters, setFilters } = useSearch();
+  const filterValue =
+    (filters[name] as string | string[] | undefined) || (multiple ? [] : null);
+
+  useEffect(() => {
+    const defaultIsEmpty = !defaultValue;
+    const defaultIsEmptyArray =
+      Array.isArray(defaultValue) && defaultValue.length === 0;
+
+    if (!defaultIsEmpty && !defaultIsEmptyArray) {
+      setFilters(prevFilters => ({
+        ...prevFilters,
+        [name]: defaultValue,
+      }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   // Set new filter values on input change.
   const handleChange = (
@@ -92,10 +109,11 @@ export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {
     <Autocomplete
       multiple={multiple}
       className={className}
-      id={`${multiple ?? 'multi-'}select-filter-${name}--select`}
+      id={`${multiple ? 'multi-' : ''}select-filter-${name}--select`}
       options={values || []}
       loading={loading}
       limitTags={limitTags}
+      value={filterValue}
       onChange={handleChange}
       onInputChange={(_, newValue) => setInputValue(newValue)}
       renderInput={renderInput}
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx
index 8f716caf4b..aa1b7e5e88 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx
@@ -207,6 +207,34 @@ describe('SearchFilter', () => {
       ).toBeInTheDocument();
     });
 
+    it('Renders values when provided asynchronously', async () => {
+      render(
+        <SearchContextProvider initialState={initialState}>
+          <SearchFilter.Select name={name} asyncValues={async () => values} />
+        </SearchContextProvider>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByRole('button')).toBeInTheDocument();
+        expect(
+          screen.getByRole('button').getAttribute('aria-disabled'),
+        ).not.toBe('true');
+      });
+
+      userEvent.click(screen.getByRole('button'));
+
+      await waitFor(() => {
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+      });
+
+      expect(
+        screen.getByRole('option', { name: values[0] }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('option', { name: values[1] }),
+      ).toBeInTheDocument();
+    });
+
     it('Renders correctly based on filter state', async () => {
       render(
         <SearchContextProvider

From 73811cfb33913311d7e82d9dc4b445ea471e0aed Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Wed, 5 Jan 2022 13:21:25 +0100
Subject: [PATCH 09/13] Refactor default value logic into utility hook.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .../SearchFilter.Autocomplete.tsx             | 19 +++----------
 .../components/SearchFilter/SearchFilter.tsx  | 26 +++---------------
 .../src/components/SearchFilter/hooks.ts      | 27 ++++++++++++++++++-
 3 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
index bf0745864b..7a67bf3935 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 import { Chip, TextField } from '@material-ui/core';
 import {
   Autocomplete,
@@ -22,7 +22,7 @@ import {
   AutocompleteRenderInputParams,
 } from '@material-ui/lab';
 import { useSearch } from '../SearchContext';
-import { useAsyncFilterValues } from './hooks';
+import { useAsyncFilterValues, useDefaultFilterValue } from './hooks';
 import { SearchFilterComponentProps } from './SearchFilter';
 
 /**
@@ -46,6 +46,7 @@ export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {
     limitTags,
   } = props;
   const [inputValue, setInputValue] = useState<string>('');
+  useDefaultFilterValue(name, defaultValue);
   const { value: values, loading } = useAsyncFilterValues(
     asyncValues,
     inputValue,
@@ -56,20 +57,6 @@ export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {
   const filterValue =
     (filters[name] as string | string[] | undefined) || (multiple ? [] : null);
 
-  useEffect(() => {
-    const defaultIsEmpty = !defaultValue;
-    const defaultIsEmptyArray =
-      Array.isArray(defaultValue) && defaultValue.length === 0;
-
-    if (!defaultIsEmpty && !defaultIsEmptyArray) {
-      setFilters(prevFilters => ({
-        ...prevFilters,
-        [name]: defaultValue,
-      }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   // Set new filter values on input change.
   const handleChange = (
     _: ChangeEvent<{}>,
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
index 23761ee4a9..d08cac4cbe 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ReactElement, ChangeEvent, useEffect } from 'react';
+import React, { ReactElement, ChangeEvent } from 'react';
 import {
   makeStyles,
   FormControl,
@@ -31,7 +31,7 @@ import {
   SearchAutocompleteFilterProps,
 } from './SearchFilter.Autocomplete';
 import { useSearch } from '../SearchContext';
-import { useAsyncFilterValues } from './hooks';
+import { useAsyncFilterValues, useDefaultFilterValue } from './hooks';
 
 const useStyles = makeStyles({
   label: {
@@ -64,16 +64,7 @@ const CheckboxFilter = (props: SearchFilterComponentProps) => {
   const { className, defaultValue, label, name, values = [] } = props;
   const classes = useStyles();
   const { filters, setFilters } = useSearch();
-
-  useEffect(() => {
-    if (Array.isArray(defaultValue)) {
-      setFilters(prevFilters => ({
-        ...prevFilters,
-        [name]: defaultValue,
-      }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  useDefaultFilterValue(name, defaultValue);
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const {
@@ -127,6 +118,7 @@ const SelectFilter = (props: SearchFilterComponentProps) => {
     values: givenValues,
   } = props;
   const classes = useStyles();
+  useDefaultFilterValue(name, defaultValue);
   const { value: values = [], loading } = useAsyncFilterValues(
     asyncValues,
     '',
@@ -135,16 +127,6 @@ const SelectFilter = (props: SearchFilterComponentProps) => {
   );
   const { filters, setFilters } = useSearch();
 
-  useEffect(() => {
-    if (typeof defaultValue === 'string') {
-      setFilters(prevFilters => ({
-        ...prevFilters,
-        [name]: defaultValue,
-      }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const handleChange = (e: ChangeEvent<{ value: unknown }>) => {
     const {
       target: { value },
diff --git a/plugins/search/src/components/SearchFilter/hooks.ts b/plugins/search/src/components/SearchFilter/hooks.ts
index df9e8a980a..14dd00b8e7 100644
--- a/plugins/search/src/components/SearchFilter/hooks.ts
+++ b/plugins/search/src/components/SearchFilter/hooks.ts
@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import useDebounce from 'react-use/lib/useDebounce';
+import { useSearch } from '../SearchContext';
 
 /**
  * Utility hook for either asynchronously loading filter values from a given
@@ -68,3 +69,27 @@ export const useAsyncFilterValues = (
 
   return state;
 };
+
+/**
+ * Utility hook for applying a given default value to the search context.
+ */
+export const useDefaultFilterValue = (
+  name: string,
+  defaultValue?: string | string[] | null,
+) => {
+  const { setFilters } = useSearch();
+
+  useEffect(() => {
+    const defaultIsEmpty = !defaultValue;
+    const defaultIsEmptyArray =
+      Array.isArray(defaultValue) && defaultValue.length === 0;
+
+    if (!defaultIsEmpty && !defaultIsEmptyArray) {
+      setFilters(prevFilters => ({
+        ...prevFilters,
+        [name]: defaultValue,
+      }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

From 3b0000669a5efee201b9de192ea41cd2b2cd842e Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Wed, 5 Jan 2022 14:57:07 +0100
Subject: [PATCH 10/13] Test filter utility hooks.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .../components/SearchFilter/hooks.test.tsx    | 295 ++++++++++++++++++
 1 file changed, 295 insertions(+)
 create mode 100644 plugins/search/src/components/SearchFilter/hooks.test.tsx

diff --git a/plugins/search/src/components/SearchFilter/hooks.test.tsx b/plugins/search/src/components/SearchFilter/hooks.test.tsx
new file mode 100644
index 0000000000..e71ce537e6
--- /dev/null
+++ b/plugins/search/src/components/SearchFilter/hooks.test.tsx
@@ -0,0 +1,295 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { ApiProvider } from '@backstage/core-app-api';
+import { TestApiRegistry } from '@backstage/test-utils';
+import { act, renderHook } from '@testing-library/react-hooks';
+import { SearchContextProvider, useSearch } from '../SearchContext';
+import { useDefaultFilterValue, useAsyncFilterValues } from './hooks';
+import { searchApiRef } from '../../apis';
+
+describe('SearchFilter.hooks', () => {
+  describe('useDefaultFilterValue', () => {
+    const query = jest.fn().mockResolvedValue({});
+    const mockApis = TestApiRegistry.from([searchApiRef, { query }]);
+    const wrapper = ({
+      children,
+      overrides = {},
+    }: {
+      children?: any;
+      overrides?: any;
+    }) => {
+      const emptySearchContext = {
+        term: '',
+        types: [],
+        filters: {},
+      };
+      return (
+        <ApiProvider apis={mockApis}>
+          <SearchContextProvider
+            initialState={{ ...emptySearchContext, ...overrides }}
+          >
+            {children}
+          </SearchContextProvider>
+        </ApiProvider>
+      );
+    };
+
+    it('should set non-empty string value', async () => {
+      const expectedFilter = 'someField';
+      const expectedValue = 'someValue';
+      const { result, waitForNextUpdate } = renderHook(
+        () => {
+          useDefaultFilterValue(expectedFilter, expectedValue);
+          return useSearch();
+        },
+        {
+          wrapper,
+        },
+      );
+
+      await waitForNextUpdate();
+
+      expect(result.current.filters[expectedFilter]).toEqual(expectedValue);
+    });
+
+    it('should set non-empty array value', async () => {
+      const expectedFilter = 'someField';
+      const expectedValue = ['someValue', 'anotherValue'];
+      const { result, waitForNextUpdate } = renderHook(
+        () => {
+          useDefaultFilterValue(expectedFilter, expectedValue);
+          return useSearch();
+        },
+        {
+          wrapper,
+        },
+      );
+
+      await waitForNextUpdate();
+
+      expect(result.current.filters[expectedFilter]).toEqual(expectedValue);
+    });
+
+    it('should not set undefined value', async () => {
+      const expectedFilter = 'someField';
+      const expectedValue = 'notEmpty';
+      const { result, waitForNextUpdate } = renderHook(
+        () => {
+          useDefaultFilterValue(expectedFilter, undefined);
+          return useSearch();
+        },
+        {
+          wrapper,
+          initialProps: {
+            overrides: {
+              filters: {
+                [expectedFilter]: expectedValue,
+              },
+            },
+          },
+        },
+      );
+
+      await waitForNextUpdate();
+
+      expect(result.current.filters[expectedFilter]).toEqual(expectedValue);
+    });
+
+    it('should not set null value', async () => {
+      const expectedFilter = 'someField';
+      const expectedValue = 'notEmpty';
+      const { result, waitForNextUpdate } = renderHook(
+        () => {
+          useDefaultFilterValue(expectedFilter, null);
+          return useSearch();
+        },
+        {
+          wrapper,
+          initialProps: {
+            overrides: {
+              filters: {
+                [expectedFilter]: expectedValue,
+              },
+            },
+          },
+        },
+      );
+
+      await waitForNextUpdate();
+
+      expect(result.current.filters[expectedFilter]).toEqual(expectedValue);
+    });
+
+    it('should not set empty string value', async () => {
+      const expectedFilter = 'someField';
+      const expectedValue = 'notEmpty';
+      const { result, waitForNextUpdate } = renderHook(
+        () => {
+          useDefaultFilterValue(expectedFilter, '');
+          return useSearch();
+        },
+        {
+          wrapper,
+          initialProps: {
+            overrides: {
+              filters: {
+                [expectedFilter]: expectedValue,
+              },
+            },
+          },
+        },
+      );
+
+      await waitForNextUpdate();
+
+      expect(result.current.filters[expectedFilter]).toEqual(expectedValue);
+    });
+
+    it('should not set empty array value', async () => {
+      const expectedFilter = 'someField';
+      const expectedValue = ['not', 'empty'];
+      const { result, waitForNextUpdate } = renderHook(
+        () => {
+          useDefaultFilterValue(expectedFilter, []);
+          return useSearch();
+        },
+        {
+          wrapper,
+          initialProps: {
+            overrides: {
+              filters: {
+                [expectedFilter]: expectedValue,
+              },
+            },
+          },
+        },
+      );
+
+      await waitForNextUpdate();
+
+      expect(result.current.filters[expectedFilter]).toEqual(expectedValue);
+    });
+
+    it('should not affect unrelated filters', async () => {
+      const expectedFilter = 'someField';
+      const expectedValue = 'someValue';
+      const { result, waitForNextUpdate } = renderHook(
+        () => {
+          useDefaultFilterValue(expectedFilter, expectedValue);
+          return useSearch();
+        },
+        {
+          wrapper,
+          initialProps: {
+            overrides: {
+              filters: {
+                unrelatedField: 'unrelatedValue',
+              },
+            },
+          },
+        },
+      );
+
+      await waitForNextUpdate();
+
+      expect(result.current.filters.unrelatedField).toEqual('unrelatedValue');
+    });
+  });
+
+  describe('useAsyncFilterValues', () => {
+    it('should immediately return given values when provided', () => {
+      const givenValues = ['value1', 'value2'];
+      const { result } = renderHook(() =>
+        useAsyncFilterValues(undefined, '', givenValues),
+      );
+
+      expect(result.current.loading).toEqual(false);
+      expect(result.current.value).toEqual(givenValues);
+    });
+
+    it('should return resolved values of provided async function', async () => {
+      const expectedValues = ['value1', 'value2'];
+      const asyncFn = () => Promise.resolve(expectedValues);
+      const { result, waitForNextUpdate } = renderHook(() =>
+        useAsyncFilterValues(asyncFn, '', undefined, 1),
+      );
+
+      expect(result.current.loading).toEqual(true);
+
+      await waitForNextUpdate();
+
+      expect(result.current.loading).toEqual(false);
+      expect(result.current.value).toEqual(expectedValues);
+    });
+
+    it('should debounce method invocation', async () => {
+      const expectedValues = ['value1', 'value2'];
+      const asyncFn = jest.fn().mockResolvedValue(expectedValues);
+      renderHook(() => useAsyncFilterValues(asyncFn, '', undefined, 10));
+
+      expect(asyncFn).not.toHaveBeenCalled();
+
+      // Allow 6 milliseconds to pass.
+      await act(() => new Promise(resolve => setTimeout(resolve, 6)));
+      expect(asyncFn).not.toHaveBeenCalled();
+
+      // Allow an additional 6 milliseconds to pass.
+      await act(() => new Promise(resolve => setTimeout(resolve, 6)));
+      expect(asyncFn).toHaveBeenCalled();
+    });
+
+    it('should call provided method once per provided input', async () => {
+      const asyncFn = jest
+        .fn()
+        .mockImplementation((x: string) => Promise.resolve([x]));
+      const { rerender, waitForNextUpdate } = renderHook(
+        (props: { inputValue: string } = { inputValue: '' }) =>
+          useAsyncFilterValues(asyncFn, props.inputValue, undefined, 1),
+      );
+
+      expect(asyncFn).not.toHaveBeenCalled();
+      await waitForNextUpdate();
+      expect(asyncFn).toHaveBeenCalledTimes(1);
+      expect(asyncFn).toHaveBeenCalledWith('');
+
+      // Re-render with different input value.
+      rerender({ inputValue: 'somethingElse' });
+      await waitForNextUpdate();
+      expect(asyncFn).toHaveBeenCalledTimes(2);
+      expect(asyncFn).toHaveBeenLastCalledWith('somethingElse');
+    });
+
+    it('should not call provided method more than once when re-rendered with same input', async () => {
+      const expectedValues = ['value1', 'value2'];
+      const asyncFn = jest.fn().mockResolvedValue(expectedValues);
+      const { rerender, waitForNextUpdate } = renderHook(
+        (props: { inputValue: string } = { inputValue: '' }) =>
+          useAsyncFilterValues(asyncFn, props.inputValue, undefined, 1),
+      );
+
+      expect(asyncFn).not.toHaveBeenCalled();
+      await waitForNextUpdate();
+      expect(asyncFn).toHaveBeenCalledTimes(1);
+
+      // Re-render multiple times with the same input.
+      rerender();
+      expect(asyncFn).toHaveBeenCalledTimes(1);
+      rerender();
+      expect(asyncFn).toHaveBeenCalledTimes(1);
+    });
+  });
+});

From 21705f64326c1ab4d2ee57a348efd4cebf2ff747 Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Wed, 12 Jan 2022 10:21:28 +0100
Subject: [PATCH 11/13] Document asyncValues/asyncDebounce props.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .../search/src/components/SearchFilter/SearchFilter.tsx   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
index d08cac4cbe..d009afd115 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
@@ -47,7 +47,15 @@ export type SearchFilterComponentProps = {
   name: string;
   label?: string;
   values?: string[];
+  /**
+   * An async function to return a list of values to be used in the filter. In
+   * the autocomplete filter, the last input value is provided as an input to
+   * allow values to be filtered. This function is debounced and values cached.
+   */
   asyncValues?: (partial: string) => Promise<string[]>;
+  /**
+   * Debounce time (ms) used by the asyncValues callback. Defaults to 250ms.
+   */
   asyncDebounce?: number;
   defaultValue?: string[] | string | null;
 };

From 1dbe63ec393027c2e4036ce435077a686eaa9f80 Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Wed, 12 Jan 2022 10:59:51 +0100
Subject: [PATCH 12/13] Don't fallback to name on label to help clarify the
 different uses for each and allow label-less filters.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .changeset/search-crying-in-hmart.md          | 10 +++++
 .changeset/search-the-things.md               | 27 +++++++++++
 .../app/src/components/search/SearchPage.tsx  |  2 +
 .../app/src/components/search/SearchPage.tsx  |  2 +
 .../SearchFilter.Autocomplete.tsx             |  2 +-
 .../SearchFilter/SearchFilter.test.tsx        | 45 +++++++++++--------
 .../components/SearchFilter/SearchFilter.tsx  | 10 +++--
 7 files changed, 74 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/search-crying-in-hmart.md
 create mode 100644 .changeset/search-the-things.md

diff --git a/.changeset/search-crying-in-hmart.md b/.changeset/search-crying-in-hmart.md
new file mode 100644
index 0000000000..b6df59658e
--- /dev/null
+++ b/.changeset/search-crying-in-hmart.md
@@ -0,0 +1,10 @@
+---
+'@backstage/plugin-search': minor
+---
+
+The way labels are controlled on both the `<SearchFilter.Checkbox />` and
+`<SearchFilter.Select />` components has changed. Previously, the string passed
+on the `name` prop (which controls the field being filtered on) was also
+rendered as the field label. Now, if you want a label rendered, it must be
+passed on the new `label` prop. If no `label` is provided, no label will be
+rendered.
diff --git a/.changeset/search-the-things.md b/.changeset/search-the-things.md
new file mode 100644
index 0000000000..83cc65233a
--- /dev/null
+++ b/.changeset/search-the-things.md
@@ -0,0 +1,27 @@
+---
+'@backstage/create-app': patch
+---
+
+A `label` prop was added to `<SearchFilter.* />` components in order to allow
+user-friendly label strings (as well as the option to omit a label). In order
+to maintain labels on your existing filters, add a `label` prop to them in your
+`SearchPage.tsx`.
+
+```diff
+--- a/packages/app/src/components/search/SearchPage.tsx
++++ b/packages/app/src/components/search/SearchPage.tsx
+@@ -96,11 +96,13 @@ const SearchPage = () => {
+               )}
+               <SearchFilter.Select
+                 className={classes.filter}
++                label="Kind"
+                 name="kind"
+                 values={['Component', 'Template']}
+               />
+               <SearchFilter.Checkbox
+                 className={classes.filter}
++                label="Lifecycle"
+                 name="lifecycle"
+                 values={['experimental', 'production']}
+               />
+```
diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx
index 555a8932ea..3b839f9b1f 100644
--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/app/src/components/search/SearchPage.tsx
@@ -115,11 +115,13 @@ const SearchPage = () => {
                 )}
                 <SearchFilter.Select
                   className={classes.filter}
+                  label="Kind"
                   name="kind"
                   values={['Component', 'Template']}
                 />
                 <SearchFilter.Checkbox
                   className={classes.filter}
+                  label="Lifecycle"
                   name="lifecycle"
                   values={['experimental', 'production']}
                 />
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
index d348606873..d9508e24e8 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
@@ -96,11 +96,13 @@ const SearchPage = () => {
               )}
               <SearchFilter.Select
                 className={classes.filter}
+                label="Kind"
                 name="kind"
                 values={['Component', 'Template']}
               />
               <SearchFilter.Checkbox
                 className={classes.filter}
+                label="Lifecycle"
                 name="lifecycle"
                 values={['experimental', 'production']}
               />
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
index 7a67bf3935..b329cf3b03 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
@@ -78,7 +78,7 @@ export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {
       {...params}
       name="search"
       variant="outlined"
-      label={label || name}
+      label={label}
       fullWidth
     />
   );
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx
index aa1b7e5e88..31539df0d8 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx
@@ -34,6 +34,7 @@ describe('SearchFilter', () => {
     types: [],
   };
 
+  const label = 'Field';
   const name = 'field';
   const values = ['value1', 'value2'];
   const filters = { unrelated: 'unrelated' };
@@ -57,12 +58,12 @@ describe('SearchFilter', () => {
     it('Renders field name and values when provided as props', async () => {
       render(
         <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Checkbox name={name} values={values} />
+          <SearchFilter.Checkbox label={label} name={name} values={values} />
         </SearchContextProvider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByText(name)).toBeInTheDocument();
+        expect(screen.getByText(label)).toBeInTheDocument();
       });
 
       expect(
@@ -83,12 +84,12 @@ describe('SearchFilter', () => {
             },
           }}
         >
-          <SearchFilter.Checkbox name={name} values={values} />
+          <SearchFilter.Checkbox label={label} name={name} values={values} />
         </SearchContextProvider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByText(name)).toBeInTheDocument();
+        expect(screen.getByText(label)).toBeInTheDocument();
       });
 
       expect(
@@ -101,6 +102,7 @@ describe('SearchFilter', () => {
       render(
         <SearchContextProvider initialState={initialState}>
           <SearchFilter.Checkbox
+            label={label}
             name={name}
             values={values}
             defaultValue={[values[0]]}
@@ -109,7 +111,7 @@ describe('SearchFilter', () => {
       );
 
       await waitFor(() => {
-        expect(screen.getByText(name)).toBeInTheDocument();
+        expect(screen.getByText(label)).toBeInTheDocument();
       });
 
       expect(screen.getByRole('checkbox', { name: values[0] })).toBeChecked();
@@ -121,12 +123,12 @@ describe('SearchFilter', () => {
     it('Checking / unchecking a value sets filter state', async () => {
       render(
         <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Checkbox name={name} values={values} />
+          <SearchFilter.Checkbox label={label} name={name} values={values} />
         </SearchContextProvider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByText(name)).toBeInTheDocument();
+        expect(screen.getByText(label)).toBeInTheDocument();
       });
 
       const checkBox = screen.getByRole('checkbox', { name: values[0] });
@@ -151,12 +153,12 @@ describe('SearchFilter', () => {
     it('Checking / unchecking a value maintains unrelated filter state', async () => {
       render(
         <SearchContextProvider initialState={{ ...initialState, filters }}>
-          <SearchFilter.Checkbox name={name} values={values} />
+          <SearchFilter.Checkbox label={label} name={name} values={values} />
         </SearchContextProvider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByText(name)).toBeInTheDocument();
+        expect(screen.getByText(label)).toBeInTheDocument();
       });
 
       const checkBox = screen.getByRole('checkbox', { name: values[0] });
@@ -185,12 +187,12 @@ describe('SearchFilter', () => {
     it('Renders field name and values when provided as props', async () => {
       render(
         <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Select name={name} values={values} />
+          <SearchFilter.Select label={label} name={name} values={values} />
         </SearchContextProvider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByText(name)).toBeInTheDocument();
+        expect(screen.getByText(label)).toBeInTheDocument();
       });
 
       userEvent.click(screen.getByRole('button'));
@@ -210,7 +212,11 @@ describe('SearchFilter', () => {
     it('Renders values when provided asynchronously', async () => {
       render(
         <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Select name={name} asyncValues={async () => values} />
+          <SearchFilter.Select
+            label={label}
+            name={name}
+            asyncValues={async () => values}
+          />
         </SearchContextProvider>,
       );
 
@@ -245,12 +251,12 @@ describe('SearchFilter', () => {
             },
           }}
         >
-          <SearchFilter.Select name={name} values={values} />
+          <SearchFilter.Select label={label} name={name} values={values} />
         </SearchContextProvider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByText(name)).toBeInTheDocument();
+        expect(screen.getByText(label)).toBeInTheDocument();
       });
 
       userEvent.click(screen.getByRole('button'));
@@ -276,6 +282,7 @@ describe('SearchFilter', () => {
         <SearchContextProvider initialState={initialState}>
           <SearchFilter.Select
             name={name}
+            label={label}
             values={values}
             defaultValue={values[0]}
           />
@@ -283,7 +290,7 @@ describe('SearchFilter', () => {
       );
 
       await waitFor(() => {
-        expect(screen.getByText(name)).toBeInTheDocument();
+        expect(screen.getByText(label)).toBeInTheDocument();
       });
 
       userEvent.click(screen.getByRole('button'));
@@ -307,12 +314,12 @@ describe('SearchFilter', () => {
     it('Selecting a value sets filter state', async () => {
       render(
         <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Select name={name} values={values} />
+          <SearchFilter.Select label={label} name={name} values={values} />
         </SearchContextProvider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByText(name)).toBeInTheDocument();
+        expect(screen.getByText(label)).toBeInTheDocument();
       });
 
       const button = screen.getByRole('button');
@@ -358,12 +365,12 @@ describe('SearchFilter', () => {
             filters,
           }}
         >
-          <SearchFilter.Select name={name} values={values} />
+          <SearchFilter.Select label={label} name={name} values={values} />
         </SearchContextProvider>,
       );
 
       await waitFor(() => {
-        expect(screen.getByText(name)).toBeInTheDocument();
+        expect(screen.getByText(label)).toBeInTheDocument();
       });
 
       const button = screen.getByRole('button');
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
index d009afd115..534db60130 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
@@ -93,7 +93,7 @@ const CheckboxFilter = (props: SearchFilterComponentProps) => {
       fullWidth
       data-testid="search-checkboxfilter-next"
     >
-      <FormLabel className={classes.label}>{label || name}</FormLabel>
+      {label ? <FormLabel className={classes.label}>{label}</FormLabel> : null}
       {values.map((value: string) => (
         <FormControlLabel
           key={value}
@@ -154,9 +154,11 @@ const SelectFilter = (props: SearchFilterComponentProps) => {
       fullWidth
       data-testid="search-selectfilter-next"
     >
-      <InputLabel className={classes.label} margin="dense">
-        {label || name}
-      </InputLabel>
+      {label ? (
+        <InputLabel className={classes.label} margin="dense">
+          {label}
+        </InputLabel>
+      ) : null}
       <Select
         variant="outlined"
         value={filters[name] || ''}

From 8f370b038da073c9431f654e9dbfdf46661ef321 Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Sat, 22 Jan 2022 18:05:21 +0100
Subject: [PATCH 13/13] Review feedback.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .changeset/search-something-new.md            | 14 +++---
 .changeset/search-under-the-sun.md            |  2 +-
 .../app/src/components/search/SearchPage.tsx  | 12 ++---
 .../app/src/components/search/SearchPage.tsx  | 10 ++--
 plugins/search/api-report.md                  |  8 +--
 .../SearchFilter.Autocomplete.test.tsx        | 49 ++++++++----------
 .../SearchFilter.Autocomplete.tsx             | 20 +++++---
 .../SearchFilter/SearchFilter.stories.tsx     | 18 ++++---
 .../SearchFilter/SearchFilter.test.tsx        |  2 +-
 .../components/SearchFilter/SearchFilter.tsx  | 50 +++++++++++++------
 .../src/components/SearchFilter/hooks.ts      | 19 ++++---
 11 files changed, 115 insertions(+), 89 deletions(-)

diff --git a/.changeset/search-something-new.md b/.changeset/search-something-new.md
index 260d1055a4..58a817e3ad 100644
--- a/.changeset/search-something-new.md
+++ b/.changeset/search-something-new.md
@@ -2,7 +2,7 @@
 '@backstage/create-app': patch
 ---
 
-An example instance of the new `<SearchFilter.Autocomplete />` was added to the composed `SearchPage.tsx`, allowing searches bound to the `techdocs` type to be filtered by entity name.
+An example instance of a `<SearchFilter.Select />` with asynchronously loaded values was added to the composed `SearchPage.tsx`, allowing searches bound to the `techdocs` type to be filtered by entity name.
 
 This is an entirely optional change; if you wish to adopt it, you can make the following (or similar) changes to your search page layout:
 
@@ -50,12 +50,12 @@ This is an entirely optional change; if you wish to adopt it, you can make the f
              />
              <Paper className={classes.filters}>
 +              {types.includes('techdocs') && (
-+                <SearchFilter.Autocomplete
++                <SearchFilter.Select
 +                  className={classes.filter}
 +                  label="Entity"
 +                  name="name"
-+                  asyncValues={async partial => {
-+                    // Return a list of entitis which are documented.
++                  values={async () => {
++                    // Return a list of entities which are documented.
 +                    const { items } = await catalogApi.getEntities({
 +                      fields: ['metadata.name'],
 +                      filter: {
@@ -64,9 +64,9 @@ This is an entirely optional change; if you wish to adopt it, you can make the f
 +                      },
 +                    });
 +
-+                    return items
-+                      .map(entity => entity.metadata.name)
-+                      .filter(name => name.includes(partial));
++                    const names = items.map(entity => entity.metadata.name);
++                    names.sort();
++                    return names;
 +                  }}
 +                />
 +              )}
diff --git a/.changeset/search-under-the-sun.md b/.changeset/search-under-the-sun.md
index 2cf5d46cdb..3f97a60c1c 100644
--- a/.changeset/search-under-the-sun.md
+++ b/.changeset/search-under-the-sun.md
@@ -4,6 +4,6 @@
 
 Introduces a `<SearchFilter.Autocomplete />` variant, which can be used as either a single- or multi-select autocomplete filter.
 
-This variant, as well as `<SearchFilter.Select />`, now also supports loading allowed values asynchronously with a new `asyncValues` prop, which takes an asynchronous function that resolves to the list of values (an optional `asyncDebounce` prop may also be provided).
+This variant, as well as `<SearchFilter.Select />`, now also supports loading allowed values asynchronously by passing a function that resolves the list of values to the `values` prop. (An optional `valuesDebounceMs` prop may also be provided to control the debounce time).
 
 Check the [search plugin storybook](https://backstage.io/storybook/?path=/story/plugins-search-searchfilter) to see how to leverage these new additions.
diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx
index 3b839f9b1f..d4e60244d7 100644
--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/app/src/components/search/SearchPage.tsx
@@ -93,12 +93,12 @@ const SearchPage = () => {
               />
               <Paper className={classes.filters}>
                 {types.includes('techdocs') && (
-                  <SearchFilter.Autocomplete
+                  <SearchFilter.Select
                     className={classes.filter}
                     label="Entity"
                     name="name"
-                    asyncValues={async partial => {
-                      // Return a list of entitis which are documented.
+                    values={async () => {
+                      // Return a list of entities which are documented.
                       const { items } = await catalogApi.getEntities({
                         fields: ['metadata.name'],
                         filter: {
@@ -107,9 +107,9 @@ const SearchPage = () => {
                         },
                       });
 
-                      return items
-                        .map(entity => entity.metadata.name)
-                        .filter(name => name.includes(partial));
+                      const names = items.map(entity => entity.metadata.name);
+                      names.sort();
+                      return names;
                     }}
                   />
                 )}
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
index d9508e24e8..a88e7250e9 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
@@ -74,11 +74,11 @@ const SearchPage = () => {
             />
             <Paper className={classes.filters}>
               {types.includes('techdocs') && (
-                <SearchFilter.Autocomplete
+                <SearchFilter.Select
                   className={classes.filter}
                   label="Entity"
                   name="name"
-                  asyncValues={async partial => {
+                  values={async () => {
                     // Return a list of entities which are documented.
                     const { items } = await catalogApi.getEntities({
                       fields: ['metadata.name'],
@@ -88,9 +88,9 @@ const SearchPage = () => {
                       },
                     });
 
-                    return items
-                      .map(entity => entity.metadata.name)
-                      .filter(name => name.includes(partial));
+                    const names = items.map(entity => entity.metadata.name);
+                    names.sort();
+                    return names;
                   }}
                 />
               )}
diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md
index b63271b94d..fc82e2be47 100644
--- a/plugins/search/api-report.md
+++ b/plugins/search/api-report.md
@@ -94,8 +94,9 @@ export const searchApiRef: ApiRef<SearchApi>;
 
 // @public (undocumented)
 export type SearchAutocompleteFilterProps = SearchFilterComponentProps & {
-  multiple?: boolean;
+  filterSelectedOptions?: boolean;
   limitTags?: number;
+  multiple?: boolean;
 };
 
 // @public
@@ -166,10 +167,9 @@ export type SearchFilterComponentProps = {
   className?: string;
   name: string;
   label?: string;
-  values?: string[];
-  asyncValues?: (partial: string) => Promise<string[]>;
-  asyncDebounce?: number;
+  values?: string[] | ((partial: string) => Promise<string[]>);
   defaultValue?: string[] | string | null;
+  valuesDebounceMs?: number;
 };
 
 // Warning: (ae-missing-release-tag) "SearchFilterNext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx
index 7a8bfe2624..5c774c0d2f 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx
@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import { ApiProvider } from '@backstage/core-app-api';
-import { TestApiRegistry } from '@backstage/test-utils';
+import { TestApiProvider } from '@backstage/test-utils';
 import { screen, render, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
@@ -35,7 +34,6 @@ const SearchContextFilterSpy = ({ name }: { name: string }) => {
 
 describe('SearchFilter.Autocomplete', () => {
   const query = jest.fn().mockResolvedValue({});
-  const mockApis = TestApiRegistry.from([searchApiRef, { query }]);
   const emptySearchContext = {
     term: '',
     types: [],
@@ -47,11 +45,11 @@ describe('SearchFilter.Autocomplete', () => {
 
   it('renders as expected', async () => {
     render(
-      <ApiProvider apis={mockApis}>
+      <TestApiProvider apis={[[searchApiRef, { query }]]}>
         <SearchContextProvider>
           <SearchFilter.Autocomplete name={name} values={values} />
         </SearchContextProvider>
-      </ApiProvider>,
+      </TestApiProvider>,
     );
 
     const autocomplete = screen.getByRole('combobox');
@@ -68,14 +66,11 @@ describe('SearchFilter.Autocomplete', () => {
 
   it('renders as expected with async values', async () => {
     render(
-      <ApiProvider apis={mockApis}>
+      <TestApiProvider apis={[[searchApiRef, { query }]]}>
         <SearchContextProvider>
-          <SearchFilter.Autocomplete
-            name={name}
-            asyncValues={async () => values}
-          />
+          <SearchFilter.Autocomplete name={name} values={async () => values} />
         </SearchContextProvider>
-      </ApiProvider>,
+      </TestApiProvider>,
     );
 
     const autocomplete = screen.getByRole('combobox');
@@ -92,7 +87,7 @@ describe('SearchFilter.Autocomplete', () => {
 
   it('does not affect unrelated filter state', async () => {
     render(
-      <ApiProvider apis={mockApis}>
+      <TestApiProvider apis={[[searchApiRef, { query }]]}>
         <SearchContextProvider
           initialState={{
             ...emptySearchContext,
@@ -103,7 +98,7 @@ describe('SearchFilter.Autocomplete', () => {
           <SearchContextFilterSpy name={name} />
           <SearchContextFilterSpy name="unrelated" />
         </SearchContextProvider>
-      </ApiProvider>,
+      </TestApiProvider>,
     );
 
     // The spy should show the initial value.
@@ -136,7 +131,7 @@ describe('SearchFilter.Autocomplete', () => {
   describe('single', () => {
     it('renders as expected with defaultValue', async () => {
       render(
-        <ApiProvider apis={mockApis}>
+        <TestApiProvider apis={[[searchApiRef, { query }]]}>
           <SearchContextProvider>
             <SearchFilter.Autocomplete
               name={name}
@@ -145,7 +140,7 @@ describe('SearchFilter.Autocomplete', () => {
             />
             <SearchContextFilterSpy name={name} />
           </SearchContextProvider>
-        </ApiProvider>,
+        </TestApiProvider>,
       );
 
       const autocomplete = screen.getByRole('combobox');
@@ -161,7 +156,7 @@ describe('SearchFilter.Autocomplete', () => {
 
     it('renders as expected with initial context', async () => {
       render(
-        <ApiProvider apis={mockApis}>
+        <TestApiProvider apis={[[searchApiRef, { query }]]}>
           <SearchContextProvider
             initialState={{
               ...emptySearchContext,
@@ -171,7 +166,7 @@ describe('SearchFilter.Autocomplete', () => {
             <SearchFilter.Autocomplete name={name} values={values} />
             <SearchContextFilterSpy name={name} />
           </SearchContextProvider>
-        </ApiProvider>,
+        </TestApiProvider>,
       );
 
       const autocomplete = screen.getByRole('combobox');
@@ -187,12 +182,12 @@ describe('SearchFilter.Autocomplete', () => {
 
     it('sets filter state when selecting a value', async () => {
       render(
-        <ApiProvider apis={mockApis}>
+        <TestApiProvider apis={[[searchApiRef, { query }]]}>
           <SearchContextProvider>
             <SearchFilter.Autocomplete name={name} values={values} />
             <SearchContextFilterSpy name={name} />
           </SearchContextProvider>
-        </ApiProvider>,
+        </TestApiProvider>,
       );
 
       // Select the first option in the autocomplete.
@@ -225,7 +220,7 @@ describe('SearchFilter.Autocomplete', () => {
   describe('multiple', () => {
     it('renders as expected with defaultValue', async () => {
       render(
-        <ApiProvider apis={mockApis}>
+        <TestApiProvider apis={[[searchApiRef, { query }]]}>
           <SearchContextProvider>
             <SearchFilter.Autocomplete
               multiple
@@ -235,7 +230,7 @@ describe('SearchFilter.Autocomplete', () => {
             />
             <SearchContextFilterSpy name={name} />
           </SearchContextProvider>
-        </ApiProvider>,
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -249,7 +244,7 @@ describe('SearchFilter.Autocomplete', () => {
 
     it('renders as expected with initial context', async () => {
       render(
-        <ApiProvider apis={mockApis}>
+        <TestApiProvider apis={[[searchApiRef, { query }]]}>
           <SearchContextProvider
             initialState={{
               ...emptySearchContext,
@@ -259,7 +254,7 @@ describe('SearchFilter.Autocomplete', () => {
             <SearchFilter.Autocomplete multiple name={name} values={values} />
             <SearchContextFilterSpy name={name} />
           </SearchContextProvider>
-        </ApiProvider>,
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -273,7 +268,7 @@ describe('SearchFilter.Autocomplete', () => {
 
     it('respects tag limit configuration', async () => {
       render(
-        <ApiProvider apis={mockApis}>
+        <TestApiProvider apis={[[searchApiRef, { query }]]}>
           <SearchContextProvider>
             <SearchFilter.Autocomplete
               multiple
@@ -282,7 +277,7 @@ describe('SearchFilter.Autocomplete', () => {
               values={values}
             />
           </SearchContextProvider>
-        </ApiProvider>,
+        </TestApiProvider>,
       );
 
       const autocomplete = screen.getByRole('combobox');
@@ -322,12 +317,12 @@ describe('SearchFilter.Autocomplete', () => {
 
     it('sets filter state when selecting a value', async () => {
       render(
-        <ApiProvider apis={mockApis}>
+        <TestApiProvider apis={[[searchApiRef, { query }]]}>
           <SearchContextProvider>
             <SearchFilter.Autocomplete multiple name={name} values={values} />
             <SearchContextFilterSpy name={name} />
           </SearchContextProvider>
-        </ApiProvider>,
+        </TestApiProvider>,
       );
 
       const autocomplete = screen.getByRole('combobox');
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
index b329cf3b03..9a27f63565 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx
@@ -29,29 +29,34 @@ import { SearchFilterComponentProps } from './SearchFilter';
  * @public
  */
 export type SearchAutocompleteFilterProps = SearchFilterComponentProps & {
-  multiple?: boolean;
+  filterSelectedOptions?: boolean;
   limitTags?: number;
+  multiple?: boolean;
 };
 
 export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {
   const {
-    asyncValues,
-    asyncDebounce,
     className,
     defaultValue,
-    multiple,
     name,
     values: givenValues,
+    valuesDebounceMs,
     label,
+    filterSelectedOptions,
     limitTags,
+    multiple,
   } = props;
   const [inputValue, setInputValue] = useState<string>('');
   useDefaultFilterValue(name, defaultValue);
+  const asyncValues =
+    typeof givenValues === 'function' ? givenValues : undefined;
+  const defaultValues =
+    typeof givenValues === 'function' ? undefined : givenValues;
   const { value: values, loading } = useAsyncFilterValues(
     asyncValues,
     inputValue,
-    givenValues,
-    asyncDebounce,
+    defaultValues,
+    valuesDebounceMs,
   );
   const { filters, setFilters } = useSearch();
   const filterValue =
@@ -94,12 +99,13 @@ export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {
 
   return (
     <Autocomplete
+      filterSelectedOptions={filterSelectedOptions}
+      limitTags={limitTags}
       multiple={multiple}
       className={className}
       id={`${multiple ? 'multi-' : ''}select-filter-${name}--select`}
       options={values || []}
       loading={loading}
-      limitTags={limitTags}
       value={filterValue}
       onChange={handleChange}
       onInputChange={(_, newValue) => setInputValue(newValue)}
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
index e2a73a42bc..c43753e8d2 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
@@ -50,7 +50,8 @@ export const SelectFilter = () => {
   return (
     <Paper style={{ padding: 10 }}>
       <SearchFilter.Select
-        name="Search Select Filter"
+        label="Search Select Filter"
+        name="select_filter"
         values={['value1', 'value2']}
       />
     </Paper>
@@ -61,8 +62,9 @@ export const AsyncSelectFilter = () => {
   return (
     <Paper style={{ padding: 10 }}>
       <SearchFilter.Select
-        name="Asynchronous Values"
-        asyncValues={async () => {
+        label="Asynchronous Values"
+        name="async_values"
+        values={async () => {
           const response = await fetch('https://swapi.dev/api/planets');
           const json: { results: Array<{ name: string }> } =
             await response.json();
@@ -79,7 +81,7 @@ export const Autocomplete = () => {
       <SearchFilter.Autocomplete
         name="autocomplete"
         label="Single-Select Autocomplete Filter"
-        values={['abba', 'cadaver']}
+        values={['value1', 'value2']}
       />
     </Paper>
   );
@@ -92,7 +94,7 @@ export const MultiSelectAutocomplete = () => {
         multiple
         name="autocomplete"
         label="Multi-Select Autocomplete Filter"
-        values={['abba', 'cadaver']}
+        values={['value1', 'value2']}
       />
     </Paper>
   );
@@ -105,10 +107,12 @@ export const AsyncMultiSelectAutocomplete = () => {
         multiple
         name="starwarsPerson"
         label="Starwars Character"
-        asyncValues={async partial => {
+        values={async partial => {
           if (partial === '') return [];
           const response = await fetch(
-            `https://swapi.dev/api/people?search=${partial}`,
+            `https://swapi.dev/api/people?search=${encodeURIComponent(
+              partial,
+            )}`,
           );
           const json: { results: Array<{ name: string }> } =
             await response.json();
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx
index 31539df0d8..7b997088ec 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx
@@ -215,7 +215,7 @@ describe('SearchFilter', () => {
           <SearchFilter.Select
             label={label}
             name={name}
-            asyncValues={async () => values}
+            values={async () => values}
           />
         </SearchContextProvider>,
       );
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
index 534db60130..1308333100 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
@@ -46,18 +46,19 @@ export type SearchFilterComponentProps = {
   className?: string;
   name: string;
   label?: string;
-  values?: string[];
   /**
-   * An async function to return a list of values to be used in the filter. In
-   * the autocomplete filter, the last input value is provided as an input to
-   * allow values to be filtered. This function is debounced and values cached.
+   * Either an array of values directly, or an async function to return a list
+   * of values to be used in the filter. In the autocomplete filter, the last
+   * input value is provided as an input to allow values to be filtered. This
+   * function is debounced and values cached.
    */
-  asyncValues?: (partial: string) => Promise<string[]>;
-  /**
-   * Debounce time (ms) used by the asyncValues callback. Defaults to 250ms.
-   */
-  asyncDebounce?: number;
+  values?: string[] | ((partial: string) => Promise<string[]>);
   defaultValue?: string[] | string | null;
+  /**
+   * Debounce time in milliseconds, used when values is an async callback.
+   * Defaults to 250ms.
+   */
+  valuesDebounceMs?: number;
 };
 
 /**
@@ -69,10 +70,27 @@ export type SearchFilterWrapperProps = SearchFilterComponentProps & {
 };
 
 const CheckboxFilter = (props: SearchFilterComponentProps) => {
-  const { className, defaultValue, label, name, values = [] } = props;
+  const {
+    className,
+    defaultValue,
+    label,
+    name,
+    values: givenValues = [],
+    valuesDebounceMs,
+  } = props;
   const classes = useStyles();
   const { filters, setFilters } = useSearch();
   useDefaultFilterValue(name, defaultValue);
+  const asyncValues =
+    typeof givenValues === 'function' ? givenValues : undefined;
+  const defaultValues =
+    typeof givenValues === 'function' ? undefined : givenValues;
+  const { value: values = [], loading } = useAsyncFilterValues(
+    asyncValues,
+    '',
+    defaultValues,
+    valuesDebounceMs,
+  );
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const {
@@ -90,6 +108,7 @@ const CheckboxFilter = (props: SearchFilterComponentProps) => {
   return (
     <FormControl
       className={className}
+      disabled={loading}
       fullWidth
       data-testid="search-checkboxfilter-next"
     >
@@ -117,21 +136,24 @@ const CheckboxFilter = (props: SearchFilterComponentProps) => {
 
 const SelectFilter = (props: SearchFilterComponentProps) => {
   const {
-    asyncValues,
-    asyncDebounce,
     className,
     defaultValue,
     label,
     name,
     values: givenValues,
+    valuesDebounceMs,
   } = props;
   const classes = useStyles();
   useDefaultFilterValue(name, defaultValue);
+  const asyncValues =
+    typeof givenValues === 'function' ? givenValues : undefined;
+  const defaultValues =
+    typeof givenValues === 'function' ? undefined : givenValues;
   const { value: values = [], loading } = useAsyncFilterValues(
     asyncValues,
     '',
-    givenValues,
-    asyncDebounce,
+    defaultValues,
+    valuesDebounceMs,
   );
   const { filters, setFilters } = useSearch();
 
diff --git a/plugins/search/src/components/SearchFilter/hooks.ts b/plugins/search/src/components/SearchFilter/hooks.ts
index 14dd00b8e7..7b27ac1fe2 100644
--- a/plugins/search/src/components/SearchFilter/hooks.ts
+++ b/plugins/search/src/components/SearchFilter/hooks.ts
@@ -29,7 +29,7 @@ export const useAsyncFilterValues = (
   defaultValues: string[] = [],
   debounce: number = 250,
 ) => {
-  const valuesMemo = useRef<Record<string, string[]>>({});
+  const valuesMemo = useRef<Record<string, string[] | Promise<string[]>>>({});
   const definiteFn = fn || (() => Promise.resolve([]));
 
   const [state, callback] = useAsyncFn(definiteFn, [inputValue], {
@@ -42,8 +42,10 @@ export const useAsyncFilterValues = (
       // Performance optimization: only invoke the callback once per inputValue
       // for the lifetime of the hook/component.
       if (valuesMemo.current[inputValue] === undefined) {
-        callback(inputValue).then(values => {
+        valuesMemo.current[inputValue] = callback(inputValue).then(values => {
+          // Overrite the value for future immediate returns.
           valuesMemo.current[inputValue] = values;
+          return values;
         });
       }
     },
@@ -59,11 +61,12 @@ export const useAsyncFilterValues = (
     };
   }
 
-  // Immediately return a memoized value if it is set.
-  if (valuesMemo.current[inputValue] !== undefined) {
+  // Immediately return a memoized value if it is set (and not a promise).
+  const possibleValue = valuesMemo.current[inputValue];
+  if (Array.isArray(possibleValue)) {
     return {
       loading: false,
-      value: valuesMemo.current[inputValue],
+      value: possibleValue,
     };
   }
 
@@ -80,11 +83,7 @@ export const useDefaultFilterValue = (
   const { setFilters } = useSearch();
 
   useEffect(() => {
-    const defaultIsEmpty = !defaultValue;
-    const defaultIsEmptyArray =
-      Array.isArray(defaultValue) && defaultValue.length === 0;
-
-    if (!defaultIsEmpty && !defaultIsEmptyArray) {
+    if (defaultValue && [defaultValue].flat().length > 0) {
       setFilters(prevFilters => ({
         ...prevFilters,
         [name]: defaultValue,