Merge pull request #43099 from software-mansion-labs/filip-solecki/re…

…move-selection-list-focus-delay Fix Slow Chat Switcher issue
Expensify · Jun 12, 2024 · 4d8d46c · 4d8d46c
2 parents 05f85cb + 35139ea
commit 4d8d46c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -86,6 +86,7 @@ function BaseSelectionList<TItem extends ListItem>(
         windowSize = 5,
         updateCellsBatchingPeriod = 50,
         removeClippedSubviews = true,
+        shouldDelayFocus = true,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -507,27 +508,28 @@ function BaseSelectionList<TItem extends ListItem>(
         };
     }, [debouncedSelectFocusedOption, shouldDebounceRowSelect]);
 
+    /** Function to focus text input */
+    const focusTextInput = useCallback(() => {
+        if (!innerTextInputRef.current) {
+            return;
+        }
+
+        innerTextInputRef.current.focus();
+    }, []);
+
     /** Focuses the text input when the component comes into focus and after any navigation animations finish. */
     useFocusEffect(
         useCallback(() => {
-            if (!textInputAutoFocus) {
-                return;
-            }
-            if (shouldShowTextInput) {
-                focusTimeoutRef.current = setTimeout(() => {
-                    if (!innerTextInputRef.current) {
-                        return;
-                    }
-                    innerTextInputRef.current.focus();
-                }, CONST.ANIMATED_TRANSITION);
-            }
-            return () => {
-                if (!focusTimeoutRef.current) {
-                    return;
+            if (textInputAutoFocus && shouldShowTextInput) {
+                if (shouldDelayFocus) {
+                    focusTimeoutRef.current = setTimeout(focusTextInput, CONST.ANIMATED_TRANSITION);
+                } else {
+                    focusTextInput();
                 }
-                clearTimeout(focusTimeoutRef.current);
-            };
-        }, [shouldShowTextInput, textInputAutoFocus]),
+            }
+
+            return () => focusTimeoutRef.current && clearTimeout(focusTimeoutRef.current);
+        }, [shouldShowTextInput, textInputAutoFocus, shouldDelayFocus, focusTextInput]),
     );
 
     const prevTextInputValue = usePrevious(textInputValue);

diff --git a/src/pages/ChatFinderPage/index.tsx b/src/pages/ChatFinderPage/index.tsx
@@ -193,6 +193,7 @@ function ChatFinderPage({betas, isSearchingForReports, navigation}: ChatFinderPa
                 showLoadingPlaceholder={!areOptionsInitialized || !isScreenTransitionEnd}
                 footerContent={!isDismissed && ChatFinderPageFooterInstance}
                 isLoadingNewOptions={!!isSearchingForReports}
+                shouldDelayFocus={false}
             />
         </ScreenWrapper>
     );