Merge pull request #59659 from callstack-internal/fix/59262-search-input

Enhance SearchAutocompleteInput with the debounced search

Author: youssef-lr

src/components/Search/SearchAutocompleteInput.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable rulesdir/no-acc-spread-in-reduce */
+import lodashDebounce from 'lodash/debounce';
 import type {ForwardedRef, ReactNode, RefObject} from 'react';
-import React, {forwardRef, useCallback, useEffect, useLayoutEffect, useMemo} from 'react';
+import React, {forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, TextInputProps, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -134,6 +135,18 @@ function SearchAutocompleteInput(
         return focusedSharedValue.get() ? wrapperFocusedStyle : wrapperStyle ?? {};
     });
 
+    const [localValue, setLocalValue] = useState(value);
+
+    const debouncedOnSearchQueryChange = useMemo(() => lodashDebounce(onSearchQueryChange, CONST.TIMING.USE_DEBOUNCED_STATE_DELAY), [onSearchQueryChange]);
+
+    const handleChangeText = useCallback(
+        (text: string) => {
+            setLocalValue(text);
+            debouncedOnSearchQueryChange(text);
+        },
+        [debouncedOnSearchQueryChange],
+    );
+
     useEffect(() => {
         runOnLiveMarkdownRuntime(() => {
             'worklet';
@@ -193,8 +206,8 @@ function SearchAutocompleteInput(
                 >
                     <TextInput
                         testID="search-autocomplete-text-input"
-                        value={value}
-                        onChangeText={onSearchQueryChange}
+                        value={localValue}
+                        onChangeText={handleChangeText}
                         autoFocus={autoFocus}
                         shouldDelayFocus={shouldDelayFocus}
                         caretHidden={caretHidden}