Fix double click navigating twice on lists

src/components/MoneyRequestConfirmationList.js

@@ -333,6 +333,7 @@ function MoneyRequestConfirmationList(props) {
             sections={optionSelectorSections}
             value=""
             onSelectRow={canModifyParticipants ? selectParticipant : navigateToReportOrUserDetail}
+            shouldDebounceRowSelect={!canModifyParticipants}
             onConfirmSelection={confirm}
             selectedOptions={selectedOptions}
             canSelectMultipleOptions={canModifyParticipants}

src/components/OptionRow.js

@@ -36,6 +36,9 @@ const propTypes = {
     /** A function that is called when an option is selected. Selected option is passed as a param */
     onSelectRow: PropTypes.func,
 
+    /** Boolean to indicate if onSelectRow should be debounced */
+    shouldDebounceRowSelect: PropTypes.bool,
+
     /** Whether we should show the selected state */
     showSelectedState: PropTypes.bool,
 
@@ -69,6 +72,7 @@ const defaultProps = {
     boldStyle: false,
     showTitleTooltip: false,
     onSelectRow: undefined,
+    shouldDebounceRowSelect: false,
     isDisabled: false,
     optionIsFocused: false,
     style: null,
@@ -82,6 +86,8 @@ class OptionRow extends Component {
         this.state = {
             isDisabled: this.props.isDisabled,
         };
+
+        this.updateOnSelectRow();
     }
 
     // It is very important to use shouldComponentUpdate here so SectionList items will not unnecessarily re-render
@@ -103,16 +109,28 @@ class OptionRow extends Component {
             this.props.option.ownerAccountID !== nextProps.option.ownerAccountID ||
             this.props.option.subtitle !== nextProps.option.subtitle ||
             this.props.option.pendingAction !== nextProps.option.pendingAction ||
-            this.props.option.customIcon !== nextProps.option.customIcon
+            this.props.option.customIcon !== nextProps.option.customIcon ||
+            this.props.shouldDebounceRowSelect !== nextProps.shouldDebounceRowSelect
         );
     }
 
     componentDidUpdate(prevProps) {
-        if (this.props.isDisabled === prevProps.isDisabled) {
-            return;
+        if (this.props.isDisabled !== prevProps.isDisabled) {
+            this.setState({isDisabled: this.props.isDisabled});
+        }
+
+        if (prevProps.onSelectRow !== this.props.onSelectRow || prevProps.shouldDebounceRowSelect !== this.props.shouldDebounceRowSelect) {
+            this.updateOnSelectRow();
         }
+    }
+
+    componentWillUnmount() {
+        if (!(this.props.shouldDebounceRowSelect && this.onSelectRow.cancel)) return;
+        this.onSelectRow.cancel();
+    }
 
-        this.setState({isDisabled: this.props.isDisabled});
+    updateOnSelectRow() {
+        this.onSelectRow = this.props.shouldDebounceRowSelect && this.props.onSelectRow ? _.debounce(this.props.onSelectRow, 1000, {leading: true}) : this.props.onSelectRow;
     }
 
     render() {
@@ -164,7 +182,7 @@ class OptionRow extends Component {
                                 if (e) {
                                     e.preventDefault();
                                 }
-                                let result = this.props.onSelectRow(this.props.option, pressableRef);
+                                let result = this.onSelectRow(this.props.option, pressableRef);
                                 if (!(result instanceof Promise)) {
                                     result = Promise.resolve();
                                 }

src/components/OptionsList/BaseOptionsList.js

@@ -168,6 +168,7 @@ class BaseOptionsList extends Component {
                 hoverStyle={this.props.optionHoveredStyle}
                 optionIsFocused={!this.props.disableFocusOptions && !isDisabled && this.props.focusedIndex === index + section.indexOffset}
                 onSelectRow={this.props.onSelectRow}
+                shouldDebounceRowSelect={this.props.shouldDebounceRowSelect}
                 isSelected={Boolean(_.find(this.props.selectedOptions, (option) => option.accountID === item.accountID))}
                 showSelectedState={this.props.canSelectMultipleOptions}
                 boldStyle={this.props.boldStyle}

src/components/OptionsList/optionsListPropTypes.js

@@ -52,6 +52,9 @@ const propTypes = {
     /** Callback to fire when a row is selected */
     onSelectRow: PropTypes.func,
 
+    /** Boolean to indicate if onSelectRow should be debounced */
+    shouldDebounceRowSelect: PropTypes.bool,
+
     /** Optional header message */
     headerMessage: PropTypes.string,
 
@@ -92,6 +95,7 @@ const defaultProps = {
     disableFocusOptions: false,
     boldStyle: false,
     onSelectRow: undefined,
+    shouldDebounceRowSelect: false,
     headerMessage: '',
     innerRef: null,
     showTitleTooltip: false,

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -336,6 +336,7 @@ class BaseOptionsSelector extends Component {
                 ref={(el) => (this.list = el)}
                 optionHoveredStyle={this.props.optionHoveredStyle}
                 onSelectRow={this.props.onSelectRow ? this.selectRow : undefined}
+                shouldDebounceRowSelect={this.props.shouldDebounceRowSelect}
                 sections={this.props.sections}
                 focusedIndex={this.state.focusedIndex}
                 selectedOptions={this.props.selectedOptions}

src/components/OptionsSelector/optionsSelectorPropTypes.js

@@ -6,6 +6,9 @@ const propTypes = {
     /** Callback to fire when a row is tapped */
     onSelectRow: PropTypes.func,
 
+    /** Boolean to indicate if onSelectRow should be debounced */
+    shouldDebounceRowSelect: PropTypes.bool,
+
     /** Sections for the section list */
     sections: PropTypes.arrayOf(
         PropTypes.shape({
@@ -110,6 +113,7 @@ const propTypes = {
 
 const defaultProps = {
     onSelectRow: undefined,
+    shouldDebounceRowSelect: false,
     textInputLabel: '',
     placeholderText: '',
     keyboardType: 'default',

src/components/SelectionList/BaseSelectionList.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState, useCallback} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
@@ -32,6 +32,7 @@ function BaseSelectionList({
     sections,
     canSelectMultiple = false,
     onSelectRow,
+    shouldDebounceRowSelect = false,
     onSelectAll,
     onDismissError,
     textInputLabel = '',
@@ -145,6 +146,12 @@ function BaseSelectionList({
         return defaultIndex;
     });
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedOnSelectRow = useCallback(shouldDebounceRowSelect ? _.debounce((item) => onSelectRow(item), 1000, {leading: true}) : (item) => onSelectRow(item), [
+        shouldDebounceRowSelect,
+        onSelectRow,
+    ]);
+
     /**
      * Scrolls to the desired item index in the section list
      *
@@ -188,7 +195,7 @@ function BaseSelectionList({
             }
         }
 
-        onSelectRow(item);
+        debouncedOnSelectRow(item);
     };
 
     const selectFocusedOption = () => {
@@ -268,6 +275,14 @@ function BaseSelectionList({
         );
     };
 
+    // eslint-disable-next-line arrow-body-style
+    useEffect(() => {
+        return () => {
+            if (!(shouldDebounceRowSelect && debouncedOnSelectRow.cancel)) return;
+            debouncedOnSelectRow.cancel();
+        };
+    }, [debouncedOnSelectRow, shouldDebounceRowSelect]);
+
     /** Focuses the text input when the component mounts. If `props.shouldDelayFocus` is true, we wait for the animation to finish */
     useEffect(() => {
         if (shouldShowTextInput) {

src/components/SelectionList/selectionListPropTypes.js

@@ -103,6 +103,9 @@ const propTypes = {
     /** Callback to fire when a row is pressed */
     onSelectRow: PropTypes.func.isRequired,
 
+    /** Boolean to indicate if onSelectRow should be debounced */
+    shouldDebounceRowSelect: PropTypes.bool,
+
     /** Callback to fire when "Select All" checkbox is pressed. Only use along with `canSelectMultiple` */
     onSelectAll: PropTypes.func,
 

src/pages/NewChatPage.js

@@ -195,6 +195,7 @@ function NewChatPage(props) {
                             selectedOptions={selectedOptions}
                             value={searchTerm}
                             onSelectRow={(option) => (props.isGroupChat ? toggleOption(option) : createChat(option))}
+                            shouldDebounceRowSelect={!props.isGroupChat}
                             onChangeText={setSearchTerm}
                             headerMessage={headerMessage}
                             boldStyle

src/pages/ReportParticipantsPage.js

@@ -129,6 +129,7 @@ function ReportParticipantsPage(props) {
                                 onSelectRow={(option) => {
                                     Navigation.navigate(ROUTES.getProfileRoute(option.accountID));
                                 }}
+                                shouldDebounceRowSelect
                                 hideSectionHeaders
                                 showTitleTooltip
                                 showScrollIndicator

src/pages/SearchPage.js

@@ -178,6 +178,7 @@ class SearchPage extends Component {
                                 sections={sections}
                                 value={this.state.searchValue}
                                 onSelectRow={this.selectReport}
+                                shouldDebounceRowSelect
                                 onChangeText={this.onChangeText}
                                 headerMessage={headerMessage}
                                 hideSectionHeaders

src/pages/home/report/ReactionList/BaseReactionList.js

@@ -81,6 +81,7 @@ function BaseReactionList(props) {
                 props.onClose();
                 Navigation.navigate(ROUTES.getProfileRoute(item.accountID));
             }}
+            shouldDebounceRowSelect
             option={{
                 text: Str.removeSMSDomain(item.displayName),
                 alternateText: Str.removeSMSDomain(item.login || ''),

src/pages/iou/IOUCurrencySelection.js

@@ -122,6 +122,7 @@ function IOUCurrencySelection(props) {
                     <OptionsSelector
                         sections={sections}
                         onSelectRow={confirmCurrencySelection}
+                        shouldDebounceRowSelect
                         value={searchValue}
                         onChangeText={setSearchValue}
                         textInputLabel={translate('common.search')}

src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

@@ -163,6 +163,7 @@ class MoneyRequestParticipantsSelector extends Component {
                 sections={this.getSections()}
                 value={this.state.searchTerm}
                 onSelectRow={this.addSingleParticipant}
+                shouldDebounceRowSelect
                 onChangeText={this.updateOptionsWithSearchTerm}
                 headerMessage={headerMessage}
                 textInputLabel={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}

src/pages/settings/Preferences/LanguagePage.js

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

src/pages/settings/Preferences/PriorityModePage.js

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

src/pages/settings/Profile/PronounsPage.js

@@ -70,9 +70,12 @@ function PronounsPage(props) {
     /**
      * @param {Object} selectedPronouns
      */
-    const updatePronouns = (selectedPronouns) => {
-        PersonalDetails.updatePronouns(selectedPronouns.keyForList === initiallyFocusedOption.keyForList ? '' : lodashGet(selectedPronouns, 'value', ''));
-    };
+    const updatePronouns = useCallback(
+        (selectedPronouns) => {
+            PersonalDetails.updatePronouns(selectedPronouns.keyForList === initiallyFocusedOption.keyForList ? '' : lodashGet(selectedPronouns, 'value', ''));
+        },
+        [initiallyFocusedOption],
+    );
 
     /**
      * Pronouns list filtered by searchValue needed for the OptionsSelector.
@@ -111,6 +114,7 @@ function PronounsPage(props) {
                 textInputValue={searchValue}
                 sections={[{data: filteredPronounsList, indexOffset: 0}]}
                 onSelectRow={updatePronouns}
+                shouldDebounceRowSelect
                 onChangeText={onChangeText}
                 initiallyFocusedOptionKey={initiallyFocusedOption.keyForList}
             />

src/pages/settings/Profile/TimezoneSelectPage.js

@@ -76,6 +76,7 @@ function TimezoneSelectPage(props) {
                 textInputValue={timezoneInputText}
                 onChangeText={filterShownTimezones}
                 onSelectRow={saveSelectedTimezone}
+                shouldDebounceRowSelect
                 sections={[{data: timezoneOptions, indexOffset: 0, isDisabled: timezone.automatic}]}
                 initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.selected)[0], 'keyForList')}
             />

src/pages/settings/Report/NotificationPreferencePage.js

@@ -48,6 +48,7 @@ function NotificationPreferencePage(props) {
                 <OptionsList
                     sections={[{data: notificationPreferenceOptions}]}
                     onSelectRow={(option) => Report.updateNotificationPreferenceAndNavigate(props.report.reportID, props.report.notificationPreference, option.value)}
+                    shouldDebounceRowSelect
                     hideSectionHeaders
                     optionHoveredStyle={{
                         ...styles.hoveredComponentBG,

src/pages/settings/Report/WriteCapabilityPage.js

@@ -61,6 +61,7 @@ function WriteCapabilityPage(props) {
                 <OptionsList
                     sections={[{data: writeCapabilityOptions}]}
                     onSelectRow={(option) => Report.updateWriteCapabilityAndNavigate(props.report, option.value)}
+                    shouldDebounceRowSelect
                     hideSectionHeaders
                     optionHoveredStyle={{
                         ...styles.hoveredComponentBG,

src/pages/tasks/TaskAssigneeSelectorModal.js

@@ -198,6 +198,7 @@ function TaskAssigneeSelectorModal(props) {
                             sections={sections}
                             value={searchValue}
                             onSelectRow={selectReport}
+                            shouldDebounceRowSelect
                             onChangeText={onChangeText}
                             headerMessage={headerMessage}
                             showTitleTooltip

src/pages/tasks/TaskShareDestinationSelectorModal.js

@@ -119,6 +119,7 @@ function TaskShareDestinationSelectorModal(props) {
                             sections={sections}
                             value={searchValue}
                             onSelectRow={selectReport}
+                            shouldDebounceRowSelect
                             onChangeText={onChangeText}
                             headerMessage={headerMessage}
                             hideSection