diff --git a/src/library-authoring/LibraryAuthoringPage.test.tsx b/src/library-authoring/LibraryAuthoringPage.test.tsx
index cded3d334..f0c0404c9 100644
--- a/src/library-authoring/LibraryAuthoringPage.test.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.test.tsx
@@ -370,7 +370,7 @@ describe('', () => {
fireEvent.change(searchBox, { target: { value: 'words to find' } });
// Default sort option changes to "Most Relevant"
- expect(screen.getAllByText('Most Relevant').length).toEqual(2);
+ expect((await screen.findAllByText('Most Relevant')).length).toEqual(2);
await waitFor(() => {
expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
body: expect.stringContaining('"sort":[]'),
diff --git a/src/library-authoring/collections/LibraryCollectionPage.test.tsx b/src/library-authoring/collections/LibraryCollectionPage.test.tsx
index 3c3bf4547..eb102d2ed 100644
--- a/src/library-authoring/collections/LibraryCollectionPage.test.tsx
+++ b/src/library-authoring/collections/LibraryCollectionPage.test.tsx
@@ -315,7 +315,7 @@ describe('', () => {
fireEvent.change(searchBox, { target: { value: 'words to find' } });
// Default sort option changes to "Most Relevant"
- expect(screen.getAllByText('Most Relevant').length).toEqual(2);
+ expect((await screen.findAllByText('Most Relevant')).length).toEqual(2);
await waitFor(() => {
expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
body: expect.stringContaining('"sort":[]'),
diff --git a/src/search-manager/SearchKeywordsField.tsx b/src/search-manager/SearchKeywordsField.tsx
index 90c09fdd9..bbe3b67f8 100644
--- a/src/search-manager/SearchKeywordsField.tsx
+++ b/src/search-manager/SearchKeywordsField.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { useIntl } from '@edx/frontend-platform/i18n';
import { SearchField } from '@openedx/paragon';
+import { debounce } from 'lodash';
import messages from './messages';
import { useSearchContext } from './SearchManager';
@@ -17,10 +18,15 @@ const SearchKeywordsField: React.FC<{
const defaultPlaceholder = usageKey ? messages.clearUsageKeyToSearch : messages.inputPlaceholder;
const { placeholder = intl.formatMessage(defaultPlaceholder) } = props;
+ const handleSearch = React.useCallback(
+ debounce((term) => setSearchKeywords(term.trim()), 400),
+ [searchKeywords],
+ );// Perform search after 500ms
+
return (
setSearchKeywords('')}
value={searchKeywords}
className={props.className}