Fix: Search box when saving question does not trigger on type (#29800)

Co-authored-by: Oisin Coveney <oisin@metabase.com>
Co-authored-by: Alexander Polyankin <alexander.polyankin@metabase.com>

frontend/src/metabase/containers/ItemPicker/ItemPicker.unit.spec.js

 import React from "react";
 import fetchMock from "fetch-mock";
 import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
 import {
   renderWithProviders,
   screen,
   waitForElementToBeRemoved,
   within,
 } from "__support__/ui";
-import { createMockUser } from "metabase-types/api/mocks";
+import {
+  createMockCollectionItem,
+  createMockUser,
+} from "metabase-types/api/mocks";
+import { setupSearchEndpoints } from "__support__/server-mocks";
 import ItemPicker from "./ItemPicker";
 
 function collection({
@@ -117,6 +122,8 @@ function mockCollectionItemsEndpoint() {
       data,
     };
   });
+
+  fetchMock.get("path:/api/collection/personal/items", []);
 }
 
 async function setup({
@@ -124,6 +131,12 @@ async function setup({
   extraCollections = [],
   ...props
 } = {}) {
+  const collections = [Object.values(COLLECTION)];
+  const collectionItems = collections.map(collection =>
+    createMockCollectionItem({ ...collection, model: "collection" }),
+  );
+  setupSearchEndpoints(collectionItems);
+
   mockCollectionEndpoint({ extraCollections });
   mockCollectionItemsEndpoint();
 
@@ -138,7 +151,11 @@ async function setup({
     },
   );
 
-  await waitForElementToBeRemoved(() => screen.queryByText("Loading..."));
+  // sometimes it expects entities to be in the Redux store so there might not be a loading state
+  // ex: collections are stored in Redux, so there isn't a meaningful loading state here
+  await waitFor(() => {
+    expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
+  });
 
   return { onChange };
 }
@@ -254,4 +271,18 @@ describe("ItemPicker", () => {
     expect(list.getByText(COLLECTION.PERSONAL.name)).toBeInTheDocument();
     expect(list.getAllByTestId("item-picker-item")).toHaveLength(2);
   });
+
+  it("displays relevant collections after a search", async () => {
+    await setup({ models: ["collection"] });
+
+    await userEvent.click(within(getItemPickerHeader()).getByRole("button"));
+    await userEvent.type(
+      within(getItemPickerHeader()).getByPlaceholderText("Search"),
+      COLLECTION.PERSONAL.name,
+    );
+
+    expect(
+      await screen.findByText(COLLECTION.PERSONAL.name),
+    ).toBeInTheDocument();
+  });
 });

frontend/src/metabase/containers/ItemPicker/ItemPickerView.tsx

-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { t } from "ttag";
 
+import { debounce } from "underscore";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
 import Icon, { IconProps } from "metabase/components/Icon";
 
@@ -10,6 +11,7 @@ import Search from "metabase/entities/search";
 
 import type { Collection } from "metabase-types/api";
 
+import { SEARCH_DEBOUNCE_DURATION } from "metabase/lib/constants";
 import type {
   CollectionPickerItem,
   PickerItem,
@@ -74,15 +76,16 @@ function ItemPickerView({
 
   const isPickingNotCollection = models.some(model => model !== "collection");
 
-  const handleSearchInputKeyPress = useCallback(
-    e => {
-      if (e.key === "Enter") {
-        onSearchStringChange(e.target.value);
-      }
-    },
+  const handleDebouncedSearchInputChange = useMemo(
+    () => debounce(onSearchStringChange, SEARCH_DEBOUNCE_DURATION),
     [onSearchStringChange],
   );
 
+  const onSearchInputChange = useCallback(
+    e => handleDebouncedSearchInputChange(e.target.value),
+    [handleDebouncedSearchInputChange],
+  );
+
   const handleOpenSearch = useCallback(() => {
     setIsSearchEnabled(true);
   }, []);
@@ -101,7 +104,7 @@ function ItemPickerView({
             className="input"
             placeholder={t`Search`}
             autoFocus
-            onKeyPress={handleSearchInputKeyPress}
+            onChange={onSearchInputChange}
           />
           <SearchToggle onClick={handleCloseSearch}>
             <Icon name="close" />
@@ -126,7 +129,7 @@ function ItemPickerView({
     showSearch,
     handleOpenSearch,
     handleCloseSearch,
-    handleSearchInputKeyPress,
+    onSearchInputChange,
   ]);
 
   const renderCollectionListItem = useCallback(