Merge pull request Expensify#76228 from software-mansion-labs/@zfurtak/fix-input-scrolling

[CP Staging] Manage scrolling with text input in `SelectionList`

Author: MonilBhavsar

src/components/SelectionList/BaseSelectionList.tsx

@@ -12,6 +12,7 @@ import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useDebounce from '@hooks/useDebounce';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useKeyboardState from '@hooks/useKeyboardState';
+import usePrevious from '@hooks/usePrevious';
 import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
 import useScrollEnabled from '@hooks/useScrollEnabled';
 import useSingleExecution from '@hooks/useSingleExecution';
@@ -288,7 +289,6 @@ function BaseSelectionList<TItem extends ListItem>({
                 onFocusChange={(v: boolean) => (isTextInputFocusedRef.current = v)}
                 showLoadingPlaceholder={showLoadingPlaceholder}
                 isLoadingNewOptions={isLoadingNewOptions}
-                setFocusedIndex={setFocusedIndex}
             />
         );
     };
@@ -392,6 +392,56 @@ function BaseSelectionList<TItem extends ListItem>({
         [data.length, scrollToIndex, setFocusedIndex],
     );
 
+    const prevSearchValue = usePrevious(textInputOptions?.value);
+    const prevSelectedOptionsLength = usePrevious(dataDetails.selectedOptions.length);
+    const prevAllOptionsLength = usePrevious(data.length);
+
+    useEffect(() => {
+        const currentSearchValue = textInputOptions?.value;
+        const searchChanged = prevSearchValue !== currentSearchValue;
+        const selectedOptionsChanged = dataDetails.selectedOptions.length !== prevSelectedOptionsLength;
+        // Do not change focus if:
+        // 1. Input value is the same or
+        // 2. Data length is 0 or
+        // 3. shouldUpdateFocusedIndex is true => other function handles the focus
+        if ((!searchChanged && !selectedOptionsChanged) || data.length === 0 || shouldUpdateFocusedIndex) {
+            return;
+        }
+
+        const hasSearchBeenCleared = prevSearchValue && !currentSearchValue;
+        if (hasSearchBeenCleared) {
+            const foundSelectedItemIndex = data.findIndex(isItemSelected);
+
+            if (foundSelectedItemIndex !== -1 && !canSelectMultiple) {
+                scrollToIndex(foundSelectedItemIndex);
+                setFocusedIndex(foundSelectedItemIndex);
+                return;
+            }
+        }
+
+        // Remove focus (set focused index to -1) if:
+        // 1. If the search is idle or
+        // 2. If the user is just toggling options without changing the list content
+        // Otherwise (e.g. when filtering/typing), focus on the first item (0)
+        const isSearchIdle = !prevSearchValue && !currentSearchValue;
+        const newSelectedIndex = isSearchIdle || (selectedOptionsChanged && prevAllOptionsLength === data.length) ? -1 : 0;
+
+        scrollToIndex(newSelectedIndex);
+        setFocusedIndex(newSelectedIndex);
+    }, [
+        canSelectMultiple,
+        data,
+        dataDetails.selectedOptions.length,
+        isItemSelected,
+        prevAllOptionsLength,
+        prevSelectedOptionsLength,
+        prevSearchValue,
+        scrollToIndex,
+        setFocusedIndex,
+        shouldUpdateFocusedIndex,
+        textInputOptions?.value,
+    ]);
+
     useEffect(() => {
         if (!itemFocusTimeoutRef.current) {
             return;

src/components/SelectionList/components/TextInput.tsx

@@ -45,9 +45,6 @@ type TextInputProps = {
     /** Whether to show the loading indicator for new options */
     isLoadingNewOptions?: boolean;
 
-    /** Function to update the focused index in the list */
-    setFocusedIndex: (index: number) => void;
-
     /** Function to focus text input component */
     focusTextInput: () => void;
 };
@@ -64,7 +61,6 @@ function TextInput({
     showLoadingPlaceholder,
     isLoadingNewOptions,
     shouldShowTextInput,
-    setFocusedIndex,
     focusTextInput,
 }: TextInputProps) {
     const styles = useThemeStyles();
@@ -80,9 +76,8 @@ function TextInput({
     const handleTextInputChange = useCallback(
         (text: string) => {
             onChangeText?.(text);
-            setFocusedIndex(0);
         },
-        [onChangeText, setFocusedIndex],
+        [onChangeText],
     );
 
     useFocusEffect(