From 6f3b7ab962c1eabfe6ba542d51afa7d1dd76ca0c Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 19 May 2025 17:30:16 +0000
Subject: [PATCH] fix: search text flickering (#1999)

Fix flickering issue in search field.
---
 src/library-authoring/LibraryAuthoringPage.test.tsx       | 2 +-
 .../collections/LibraryCollectionPage.test.tsx            | 2 +-
 src/search-manager/SearchKeywordsField.tsx                | 8 +++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

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('<LibraryAuthoringPage />', () => {
     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('<LibraryCollectionPage />', () => {
     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 (
     <SearchField.Advanced
       onSubmit={setSearchKeywords}
-      onChange={setSearchKeywords}
+      onChange={handleSearch}
       onClear={() => setSearchKeywords('')}
       value={searchKeywords}
       className={props.className}