SONAR-21188 Fixing input search component for typing issue

1 files 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);
   };