Fix double click navigating twice on lists

src/components/CurrencySelectionList/index.tsx

@@ -48,6 +48,7 @@ function CurrencySelectionList({searchInputLabel, initiallySelectedCurrencyCode,
             textInputValue={searchValue}
             onChangeText={setSearchValue}
             onSelectRow={onSelect}
+            shouldDebounceRowSelect
             headerMessage={headerMessage}
             initiallyFocusedOptionKey={initiallySelectedCurrencyCode}
             showScrollIndicator

src/components/MenuItemGroup.tsx

@@ -5,7 +5,7 @@ import useWaitForNavigation from '@hooks/useWaitForNavigation';
 
 type MenuItemGroupContextProps = {
     isExecuting: boolean;
-    singleExecution: <T extends unknown[]>(action?: Action<T> | undefined) => (...params: T) => void;
+    singleExecution: <T extends unknown[]>(action: Action<T>) => (...params: T) => void;
     waitForNavigate: ReturnType<typeof useWaitForNavigation>;
 };
 

src/components/MoneyRequestConfirmationList.tsx

@@ -1237,6 +1237,7 @@ function MoneyRequestConfirmationList({
             sections={sections}
             ListItem={UserListItem}
             onSelectRow={navigateToReportOrUserDetail}
+            shouldDebounceRowSelect
             canSelectMultiple={false}
             shouldPreventDefaultFocusOnSelectRow
             footerContent={footerContent}

src/components/Search.tsx

@@ -86,6 +86,7 @@ function Search({query, policyIDs}: SearchProps) {
             onSelectRow={(item) => {
                 openReport(item.transactionThreadReportID);
             }}
+            shouldDebounceRowSelect
             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
             listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
             containerStyle={[styles.pv0]}

src/components/SelectionList/BaseSelectionList.tsx

@@ -1,4 +1,5 @@
 import {useFocusEffect, useIsFocused} from '@react-navigation/native';
+import lodashDebounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
@@ -35,6 +36,7 @@ function BaseSelectionList<TItem extends ListItem>(
         ListItem,
         canSelectMultiple = false,
         onSelectRow,
+        shouldDebounceRowSelect = false,
         onCheckboxPress,
         onSelectAll,
         onDismissError,
@@ -252,6 +254,9 @@ function BaseSelectionList<TItem extends ListItem>(
         isFocused,
     });
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedOnSelectRow = useCallback(lodashDebounce(onSelectRow, 1000, {leading: true}), [onSelectRow]);
+
     /**
      * Logic to run when a row is selected, either with click/press or keyboard hotkeys.
      *
@@ -273,7 +278,11 @@ function BaseSelectionList<TItem extends ListItem>(
             }
         }
 
-        onSelectRow(item);
+        if (shouldDebounceRowSelect) {
+            debouncedOnSelectRow(item);
+        } else {
+            onSelectRow(item);
+        }
 
         if (shouldShowTextInput && shouldPreventDefaultFocusOnSelectRow && innerTextInputRef.current) {
             innerTextInputRef.current.focus();
@@ -298,6 +307,11 @@ function BaseSelectionList<TItem extends ListItem>(
         selectRow(focusedOption);
     };
 
+    // This debounce happens on the trailing edge because on repeated enter presses, rapid component state update cancels the existing debounce and the redundant
+    // enter presses runs the debounced function again.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedSelectFocusedOption = useCallback(lodashDebounce(selectFocusedOption, 100), [selectFocusedOption]);
+
     /**
      * This function is used to compute the layout of any given item in our list.
      * We need to implement it so that we can programmatically scroll to items outside the virtual render window of the SectionList.
@@ -450,6 +464,26 @@ function BaseSelectionList<TItem extends ListItem>(
         [scrollToIndex, setFocusedIndex],
     );
 
+    useEffect(() => {
+        if (!(shouldDebounceRowSelect && debouncedOnSelectRow.cancel)) {
+            return;
+        }
+
+        return () => {
+            debouncedOnSelectRow.cancel();
+        };
+    }, [debouncedOnSelectRow, shouldDebounceRowSelect]);
+
+    useEffect(() => {
+        if (!(shouldDebounceRowSelect && debouncedSelectFocusedOption.cancel)) {
+            return;
+        }
+
+        return () => {
+            debouncedSelectFocusedOption.cancel();
+        };
+    }, [debouncedSelectFocusedOption, shouldDebounceRowSelect]);
+
     /** Focuses the text input when the component comes into focus and after any navigation animations finish. */
     useFocusEffect(
         useCallback(() => {
@@ -539,7 +573,7 @@ function BaseSelectionList<TItem extends ListItem>(
     useImperativeHandle(ref, () => ({scrollAndHighlightItem}), [scrollAndHighlightItem]);
 
     /** Selects row when pressing Enter */
-    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
+    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, shouldDebounceRowSelect ? debouncedSelectFocusedOption : selectFocusedOption, {
         captureOnInputs: true,
         shouldBubble: !flattenedSections.allOptions[focusedIndex],
         shouldStopPropagation,
@@ -599,7 +633,7 @@ function BaseSelectionList<TItem extends ListItem>(
                                 selectTextOnFocus
                                 spellCheck={false}
                                 iconLeft={textInputIconLeft}
-                                onSubmitEditing={selectFocusedOption}
+                                onSubmitEditing={shouldDebounceRowSelect ? debouncedSelectFocusedOption : selectFocusedOption}
                                 blurOnSubmit={!!flattenedSections.allOptions.length}
                                 isLoading={isLoadingNewOptions}
                                 testID="selection-list-text-input"

src/components/SelectionList/types.ts

@@ -240,6 +240,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Callback to fire when a row is pressed */
     onSelectRow: (item: TItem) => void;
 
+    /** Whether to debounce `onRowSelect` */
+    shouldDebounceRowSelect?: boolean;
+
     /** Optional callback function triggered upon pressing a checkbox. If undefined and the list displays checkboxes, checkbox interactions are managed by onSelectRow, allowing for pressing anywhere on the list. */
     onCheckboxPress?: (item: TItem) => void;
 

src/pages/ChatFinderPage/index.tsx

@@ -179,6 +179,7 @@ function ChatFinderPage({betas, isSearchingForReports, navigation}: ChatFinderPa
                 headerMessage={headerMessage}
                 onLayout={setPerformanceTimersEnd}
                 onSelectRow={selectReport}
+                shouldDebounceRowSelect
                 showLoadingPlaceholder={!areOptionsInitialized || !isScreenTransitionEnd}
                 footerContent={!isDismissed && ChatFinderPageFooterInstance}
                 isLoadingNewOptions={!!isSearchingForReports}

src/pages/NewChatPage.tsx

@@ -311,6 +311,7 @@ function NewChatPage({isGroupChat}: NewChatPageProps) {
                     textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
                     headerMessage={headerMessage}
                     onSelectRow={createChat}
+                    shouldDebounceRowSelect
                     onConfirm={(e, option) => (selectedOptions.length > 0 ? createGroup() : createChat(option))}
                     rightHandSideComponent={itemRightSideComponent}
                     footerContent={footerContent}

src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx

@@ -65,6 +65,7 @@ function BusinessTypeSelectorModal({isVisible, currentBusinessType, onBusinessTy
                     sections={[{data: incorporationTypes}]}
                     initiallyFocusedOptionKey={currentBusinessType}
                     onSelectRow={onBusinessTypeSelected}
+                    shouldDebounceRowSelect
                     shouldStopPropagation
                     shouldUseDynamicMaxToRenderPerBatch
                     ListItem={RadioListItem}

src/pages/ReportParticipantRoleSelectionPage.tsx

@@ -68,6 +68,7 @@ function ReportParticipantRoleSelectionPage({report, route}: ReportParticipantRo
                     sections={[{data: items}]}
                     ListItem={RadioListItem}
                     onSelectRow={changeRole}
+                    shouldDebounceRowSelect
                     initiallyFocusedOptionKey={items.find((item) => item.isSelected)?.keyForList}
                 />
             </View>

src/pages/ReportParticipantsPage.tsx

@@ -351,6 +351,7 @@ function ReportParticipantsPage({report, personalDetails, session}: ReportPartic
                         ListItem={TableListItem}
                         headerContent={headerContent}
                         onSelectRow={openMemberDetails}
+                        shouldDebounceRowSelect={!(isGroupChat && isCurrentUserAdmin)}
                         onCheckboxPress={(item) => toggleUser(item.accountID)}
                         onSelectAll={() => toggleAllUsers(participants)}
                         showScrollIndicator

src/pages/WorkspaceSwitcherPage/index.tsx

@@ -178,6 +178,7 @@ function WorkspaceSwitcherPage() {
                 ListItem={UserListItem}
                 sections={sections}
                 onSelectRow={selectPolicy}
+                shouldDebounceRowSelect
                 textInputLabel={usersWorkspaces.length >= CONST.WORKSPACE_SWITCHER.MINIMUM_WORKSPACES_TO_SHOW_SEARCH ? translate('common.search') : undefined}
                 textInputValue={searchTerm}
                 onChangeText={setSearchTerm}

src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

@@ -358,6 +358,7 @@ function MoneyRequestParticipantsSelector({participants = [], onFinish, onPartic
             onChangeText={setSearchTerm}
             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
             onSelectRow={(item) => (isIOUSplit ? addParticipantToSelection(item) : addSingleParticipant(item))}
+            shouldDebounceRowSelect
             footerContent={footerContent}
             headerMessage={headerMessage}
             showLoadingPlaceholder={!areOptionsInitialized || !didScreenTransitionEnd}

src/pages/iou/request/step/IOURequestStepDistanceRate.tsx

@@ -86,6 +86,7 @@ function IOURequestStepDistanceRate({
                 sections={[{data: sections}]}
                 ListItem={RadioListItem}
                 onSelectRow={({value}) => selectDistanceRate(value ?? '')}
+                shouldDebounceRowSelect
                 initiallyFocusedOptionKey={initiallyFocusedOption}
             />
         </StepScreenWrapper>

src/pages/iou/request/step/IOURequestStepSendFrom.tsx

@@ -86,6 +86,7 @@ function IOURequestStepSendFrom({route, transaction, allPolicies}: IOURequestSte
             <SelectionList
                 sections={[{data: workspaceOptions, title: translate('common.workspaces')}]}
                 onSelectRow={selectWorkspace}
+                shouldDebounceRowSelect
                 ListItem={UserListItem}
                 initiallyFocusedOptionKey={selectedWorkspace?.policyID}
             />

src/pages/iou/request/step/IOURequestStepSplitPayer.tsx

@@ -87,6 +87,7 @@ function IOURequestStepSplitPayer({
                 sections={sections}
                 ListItem={UserListItem}
                 onSelectRow={setSplitPayer}
+                shouldDebounceRowSelect
                 showLoadingPlaceholder={!didScreenTransitionEnd}
             />
         </StepScreenWrapper>

src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx

@@ -105,6 +105,7 @@ function BaseShareLogList({onAttachLogToReport}: BaseShareLogListProps) {
                         ListItem={UserListItem}
                         sections={didScreenTransitionEnd ? sections : CONST.EMPTY_ARRAY}
                         onSelectRow={attachLogToReport}
+                        shouldDebounceRowSelect
                         onChangeText={setSearchValue}
                         textInputValue={searchValue}
                         headerMessage={searchOptions.headerMessage}

src/pages/settings/Preferences/LanguagePage.tsx

@@ -31,6 +31,7 @@ function LanguagePage() {
                 sections={[{data: localesToLanguages}]}
                 ListItem={RadioListItem}
                 onSelectRow={(language) => App.setLocaleAndNavigate(language.value)}
+                shouldDebounceRowSelect
                 initiallyFocusedOptionKey={localesToLanguages.find((locale) => locale.isSelected)?.keyForList}
             />
         </ScreenWrapper>

src/pages/settings/Preferences/PriorityModePage.tsx

@@ -58,6 +58,7 @@ function PriorityModePage() {
                 sections={[{data: priorityModes}]}
                 ListItem={RadioListItem}
                 onSelectRow={updateMode}
+                shouldDebounceRowSelect
                 initiallyFocusedOptionKey={priorityModes.find((mode) => mode.isSelected)?.keyForList}
             />
         </ScreenWrapper>

src/pages/settings/Preferences/ThemePage.tsx

@@ -49,6 +49,7 @@ function ThemePage({preferredTheme}: ThemePageProps) {
                 sections={[{data: localesToThemes}]}
                 ListItem={RadioListItem}
                 onSelectRow={(theme) => User.updateTheme(theme.value)}
+                shouldDebounceRowSelect
                 initiallyFocusedOptionKey={localesToThemes.find((theme) => theme.isSelected)?.keyForList}
             />
         </ScreenWrapper>

src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx

@@ -80,6 +80,7 @@ function CountrySelectionPage({route, navigation}: CountrySelectionPageProps) {
                 sections={[{data: searchResults}]}
                 ListItem={RadioListItem}
                 onSelectRow={selectCountry}
+                shouldDebounceRowSelect
                 onChangeText={setSearchValue}
                 initiallyFocusedOptionKey={currentCountry}
                 shouldUseDynamicMaxToRenderPerBatch

src/pages/settings/Profile/PersonalDetails/StateSelectionPage.tsx

@@ -105,6 +105,7 @@ function StateSelectionPage() {
 
             <SelectionList
                 onSelectRow={selectCountryState}
+                shouldDebounceRowSelect
                 headerMessage={headerMessage}
                 // Label can be an empty string
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing

src/pages/settings/Profile/PronounsPage.tsx

@@ -95,6 +95,7 @@ function PronounsPage({currentUserPersonalDetails, isLoadingApp = true}: Pronoun
                         sections={[{data: filteredPronounsList}]}
                         ListItem={RadioListItem}
                         onSelectRow={updatePronouns}
+                        shouldDebounceRowSelect
                         onChangeText={setSearchValue}
                         initiallyFocusedOptionKey={currentPronounsKey}
                     />

src/pages/settings/Profile/TimezoneSelectPage.tsx

@@ -72,6 +72,7 @@ function TimezoneSelectPage({currentUserPersonalDetails}: TimezoneSelectPageProp
                 textInputValue={timezoneInputText}
                 onChangeText={filterShownTimezones}
                 onSelectRow={saveSelectedTimezone}
+                shouldDebounceRowSelect
                 sections={[{data: timezoneOptions, isDisabled: timezone.automatic}]}
                 initiallyFocusedOptionKey={timezoneOptions.find((tz) => tz.text === timezone.selected)?.keyForList}
                 showScrollIndicator

src/pages/settings/Report/NotificationPreferencePage.tsx

@@ -44,6 +44,7 @@ function NotificationPreferencePage({report}: NotificationPreferencePageProps) {
                     onSelectRow={(option) =>
                         report && ReportActions.updateNotificationPreference(report.reportID, report.notificationPreference, option.value, true, undefined, undefined, report)
                     }
+                    shouldDebounceRowSelect
                     initiallyFocusedOptionKey={notificationPreferenceOptions.find((locale) => locale.isSelected)?.keyForList}
                 />
             </FullPageNotFoundView>

src/pages/settings/Report/VisibilityPage.tsx

@@ -72,6 +72,7 @@ function VisibilityPage({report}: VisibilityProps) {
                         }
                         changeVisibility(option.value);
                     }}
+                    shouldDebounceRowSelect
                     initiallyFocusedOptionKey={visibilityOptions.find((visibility) => visibility.isSelected)?.keyForList}
                     ListItem={RadioListItem}
                 />

src/pages/settings/Report/WriteCapabilityPage.tsx

@@ -55,6 +55,7 @@ function WriteCapabilityPage({report, policy}: WriteCapabilityPageProps) {
                     sections={[{data: writeCapabilityOptions}]}
                     ListItem={RadioListItem}
                     onSelectRow={(option) => report && ReportActions.updateWriteCapabilityAndNavigate(report, option.value)}
+                    shouldDebounceRowSelect
                     initiallyFocusedOptionKey={writeCapabilityOptions.find((locale) => locale.isSelected)?.keyForList}
                 />
             </FullPageNotFoundView>

src/pages/tasks/TaskAssigneeSelectorModal.tsx

@@ -217,6 +217,7 @@ function TaskAssigneeSelectorModal({reports, task}: TaskAssigneeSelectorModalPro
                         sections={areOptionsInitialized ? sections : []}
                         ListItem={UserListItem}
                         onSelectRow={selectReport}
+                        shouldDebounceRowSelect
                         onChangeText={setSearchValue}
                         textInputValue={searchValue}
                         headerMessage={headerMessage}

src/pages/tasks/TaskShareDestinationSelectorModal.tsx

@@ -105,6 +105,7 @@ function TaskShareDestinationSelectorModal() {
                         ListItem={UserListItem}
                         sections={areOptionsInitialized ? options.sections : []}
                         onSelectRow={selectReportHandler}
+                        shouldDebounceRowSelect
                         onChangeText={setSearchValue}
                         textInputValue={searchValue}
                         headerMessage={options.headerMessage}

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -574,6 +574,7 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft,
                         headerMessage={getHeaderMessage()}
                         headerContent={!isSmallScreenWidth && getHeaderContent()}
                         onSelectRow={openMemberDetails}
+                        shouldDebounceRowSelect={!isPolicyAdmin}
                         onCheckboxPress={(item) => toggleUser(item.accountID)}
                         onSelectAll={() => toggleAllUsers(data)}
                         onDismissError={dismissError}

src/pages/workspace/accounting/qbo/advanced/QuickbooksAccountSelectPage.tsx

@@ -75,6 +75,7 @@ function QuickbooksAccountSelectPage({policy}: WithPolicyConnectionsProps) {
                     ListItem={RadioListItem}
                     headerContent={listHeaderComponent}
                     onSelectRow={saveSelection}
+                    shouldDebounceRowSelect
                     initiallyFocusedOptionKey={initiallyFocusedOptionKey}
                 />
             </ScreenWrapper>

src/pages/workspace/accounting/qbo/advanced/QuickbooksInvoiceAccountSelectPage.tsx

@@ -76,6 +76,7 @@ function QuickbooksInvoiceAccountSelectPage({policy}: WithPolicyConnectionsProps
                     ListItem={RadioListItem}
                     headerContent={listHeaderComponent}
                     onSelectRow={updateAccount}
+                    shouldDebounceRowSelect
                     initiallyFocusedOptionKey={initiallyFocusedOptionKey}
                 />
             </ScreenWrapper>

src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectCardPage.tsx

@@ -101,6 +101,7 @@ function QuickbooksCompanyCardExpenseAccountSelectCardPage({policy}: WithPolicyC
                         sections={sections}
                         ListItem={RadioListItem}
                         onSelectRow={selectExportCompanyCard}
+                        shouldDebounceRowSelect
                         initiallyFocusedOptionKey={sections[0].data.find((option) => option.isSelected)?.keyForList}
                         footerContent={
                             isLocationEnabled && <Text style={[styles.mutedNormalTextLabel, styles.pt2]}>{translate('workspace.qbo.companyCardsLocationEnabledDescription')}</Text>

src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectPage.tsx

@@ -85,6 +85,7 @@ function QuickbooksCompanyCardExpenseAccountSelectPage({policy}: WithPolicyConne
                     sections={[{data}]}
                     ListItem={RadioListItem}
                     onSelectRow={selectExportAccount}
+                    shouldDebounceRowSelect
                     initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList}
                 />
             </ScreenWrapper>

src/pages/workspace/accounting/qbo/export/QuickbooksExportDateSelectPage.tsx

@@ -58,6 +58,7 @@ function QuickbooksExportDateSelectPage({policy}: WithPolicyConnectionsProps) {
                     sections={[{data}]}
                     ListItem={RadioListItem}
                     onSelectRow={selectExportDate}
+                    shouldDebounceRowSelect
                     initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList}
                 />
             </ScreenWrapper>

src/pages/workspace/accounting/qbo/export/QuickbooksExportInvoiceAccountSelectPage.tsx

@@ -61,6 +61,7 @@ function QuickbooksExportInvoiceAccountSelectPage({policy}: WithPolicyConnection
                     sections={[{data}]}
                     ListItem={RadioListItem}
                     onSelectRow={selectExportInvoice}
+                    shouldDebounceRowSelect
                     initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList}
                 />
             </ScreenWrapper>