From: Revanshu Paliwal <revanshu.paliwal@sonarsource.com>
Date: Thu, 27 Jul 2023 09:30:47 +0000 (+0200)
Subject: SONAR-19709 Fixing input search debounce related issue
X-Git-Tag: 10.2.0.77647~284
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=cdebe5bd1f5602cb68b6ca21b6d96be210a31681;p=sonarqube.git

SONAR-19709 Fixing input search debounce related issue
---

diff --git a/server/sonar-web/design-system/src/components/input/InputSearch.tsx b/server/sonar-web/design-system/src/components/input/InputSearch.tsx
index beb1ef1ca18..c6d14f4639c 100644
--- a/server/sonar-web/design-system/src/components/input/InputSearch.tsx
+++ b/server/sonar-web/design-system/src/components/input/InputSearch.tsx
@@ -87,11 +87,16 @@ export function InputSearch({
     'sw-pr-10': value.length > 0,
   });
 
+  /*
+   * ParentValue is useful as an initial value for a page load
+   * And when the parent component wants to empty the search (facet search)
+   * After that the input value is controlled by this component
+   */
   useEffect(() => {
-    if (parentValue !== undefined) {
+    if (parentValue === '' || (parentValue !== undefined && value === '')) {
       setValue(parentValue);
     }
-  }, [parentValue]);
+  }, [parentValue]); // eslint-disable-line
 
   useEffect(() => {
     if (autoFocus && input.current) {
@@ -121,9 +126,7 @@ export function InputSearch({
 
   const handleClearClick = () => {
     onChange('');
-    if (parentValue === undefined || parentValue === '') {
-      setValue('');
-    }
+    setValue('');
     input.current?.focus();
   };
   const ref = (node: HTMLInputElement | null) => {