From 89b365f8b17d5b1852dffa40df2f90994564fe22 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 1 Dec 2022 14:45:45 +0200
Subject: [PATCH] [v9.3.x] FolderPicker: Fixes issue with typing to search for
 folder (#59649)

---
 .../components/Select/FolderPicker.test.tsx   | 20 +++++++++++++++++++
 .../core/components/Select/FolderPicker.tsx   |  2 +-
 .../OpenLibraryPanelModal.tsx                 |  7 ++-----
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/public/app/core/components/Select/FolderPicker.test.tsx b/public/app/core/components/Select/FolderPicker.test.tsx
index 6fa19a5a935..aa86a4c2c0b 100644
--- a/public/app/core/components/Select/FolderPicker.test.tsx
+++ b/public/app/core/components/Select/FolderPicker.test.tsx
@@ -138,6 +138,26 @@ describe('FolderPicker', () => {
 
     expect(pickerOptions[0]).not.toHaveTextContent('General');
   });
+
+  it('should return the correct search results when typing in the select', async () => {
+    jest.spyOn(api, 'searchFolders').mockImplementation((query: string) => {
+      return Promise.resolve(
+        [
+          { title: 'Dash Test', uid: 'xMsQdBfWz' } as DashboardSearchHit,
+          { title: 'Dash Two', uid: 'wfTJJL5Wz' } as DashboardSearchHit,
+        ].filter((dash) => dash.title.indexOf(query) > -1)
+      );
+    });
+    jest.spyOn(contextSrv, 'hasAccess').mockReturnValue(false);
+    const onChangeFn = jest.fn();
+    render(<FolderPicker onChange={onChangeFn} />);
+
+    const pickerContainer = screen.getByLabelText(selectors.components.FolderPicker.input);
+    await userEvent.type(pickerContainer, 'Test');
+
+    expect(await screen.findByText('Dash Test')).toBeInTheDocument();
+    expect(screen.queryByText('Dash Two')).not.toBeInTheDocument();
+  });
 });
 
 describe('getInitialValues', () => {
diff --git a/public/app/core/components/Select/FolderPicker.tsx b/public/app/core/components/Select/FolderPicker.tsx
index 9e7a8976314..52db957b36e 100644
--- a/public/app/core/components/Select/FolderPicker.tsx
+++ b/public/app/core/components/Select/FolderPicker.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { debounce } from 'lodash';
+import debounce from 'debounce-promise';
 import React, { useState, useEffect, useMemo, useCallback, FormEvent } from 'react';
 import { useAsync } from 'react-use';
 
diff --git a/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx b/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
index 608dfc3e5f1..dc3b05c1902 100644
--- a/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { debounce } from 'lodash';
+import debounce from 'debounce-promise';
 import React, { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue, urlUtil } from '@grafana/data';
@@ -31,10 +31,7 @@ export function OpenLibraryPanelModal({ libraryPanel, onDismiss }: OpenLibraryPa
     (searchString: string) => loadOptionsAsync(libraryPanel.uid, searchString, setLoading),
     [libraryPanel.uid]
   );
-  const debouncedLoadOptions = useMemo(
-    () => debounce(loadOptions, 300, { leading: true, trailing: true }),
-    [loadOptions]
-  );
+  const debouncedLoadOptions = useMemo(() => debounce(loadOptions, 300, { leading: true }), [loadOptions]);
   const onViewPanel = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     locationService.push(urlUtil.renderUrl(`/d/${option?.value?.uid}`, {}));