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(); + + 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) => { e.preventDefault(); locationService.push(urlUtil.renderUrl(`/d/${option?.value?.uid}`, {}));