From 59fa489912c52e548b0d80a12b57c34b3f7502ab Mon Sep 17 00:00:00 2001
From: Revanshu Paliwal <revanshu.paliwal@sonarsource.com>
Date: Wed, 31 Jan 2024 17:55:06 +0100
Subject: [PATCH] SONAR-21188 Fixing input search component for typing issue

---
 .../design-system/src/components/input/InputSearch.tsx     | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

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 e3288bbc497..6880e047c49 100644
--- a/server/sonar-web/design-system/src/components/input/InputSearch.tsx
+++ b/server/sonar-web/design-system/src/components/input/InputSearch.tsx
@@ -78,12 +78,10 @@ export function InputSearch(props: PropsWithChildren<Props>) {
   const intl = useIntl();
   const input = useRef<null | HTMLElement>(null);
   const [value, setValue] = useState(parentValue ?? '');
-  const [dirty, setDirty] = useState(false);
   const debouncedOnChange = useMemo(
     () =>
       debounce((val: string) => {
         onChange(val);
-        setDirty(false);
       }, DEBOUNCE_DELAY),
     [onChange],
   );
@@ -95,7 +93,9 @@ export function InputSearch(props: PropsWithChildren<Props>) {
   });
 
   useEffect(() => {
-    if (parentValue !== undefined && !dirty) {
+    // initially letting parentValue control the value of the input
+    // later the value is controlled by the local value state
+    if (parentValue === '' || (parentValue !== undefined && value === '')) {
       setValue(parentValue);
     }
   }, [parentValue]); // eslint-disable-line
@@ -115,7 +115,6 @@ export function InputSearch(props: PropsWithChildren<Props>) {
   const handleInputChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
     const eventValue = event.currentTarget.value;
     setValue(eventValue);
-    setDirty(true);
     changeValue(eventValue);
   };
 
-- 
2.39.5