Merge pull request #27323 from bernhardoj/fix/26667-enter-listener-in…

…-workspace-invite Unsubscribe enter listener when screen is out of focus
Expensify · Sep 15, 2023 · 1ec7186 · 1ec7186
2 parents 2099aa6 + ff81f95
commit 1ec7186
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
@@ -2,7 +2,7 @@ import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import SectionList from '../SectionList';
 import Text from '../Text';
 import styles from '../../styles/styles';
@@ -61,6 +61,7 @@ function BaseSelectionList({
     const shouldShowTextInput = Boolean(textInputLabel);
     const shouldShowSelectAll = Boolean(onSelectAll);
     const activeElement = useActiveElement();
+    const isFocused = useIsFocused();
 
     /**
      * Iterates through the sections and items inside each section, and builds 3 arrays along the way:
@@ -244,15 +245,15 @@ function BaseSelectionList({
     const renderItem = ({item, index, section}) => {
         const normalizedIndex = index + lodashGet(section, 'indexOffset', 0);
         const isDisabled = section.isDisabled;
-        const isFocused = !isDisabled && focusedIndex === normalizedIndex;
+        const isItemFocused = !isDisabled && focusedIndex === normalizedIndex;
         // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
         const showTooltip = normalizedIndex < 10;
 
         if (canSelectMultiple) {
             return (
                 <UserListItem
                     item={item}
-                    isFocused={isFocused}
+                    isFocused={isItemFocused}
                     onSelectRow={() => selectRow(item, index)}
                     onDismissError={onDismissError}
                     showTooltip={showTooltip}
@@ -263,7 +264,7 @@ function BaseSelectionList({
         return (
             <RadioListItem
                 item={item}
-                isFocused={isFocused}
+                isFocused={isItemFocused}
                 isDisabled={isDisabled}
                 onSelectRow={() => selectRow(item, index)}
             />
@@ -289,14 +290,14 @@ function BaseSelectionList({
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
         captureOnInputs: true,
         shouldBubble: () => !flattenedSections.allOptions[focusedIndex],
-        isActive: !activeElement,
+        isActive: !activeElement && isFocused,
     });
 
     /** Calls confirm action when pressing CTRL (CMD) + Enter */
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER, onConfirm, {
         captureOnInputs: true,
         shouldBubble: () => !flattenedSections.allOptions[focusedIndex],
-        isActive: Boolean(onConfirm),
+        isActive: Boolean(onConfirm) && isFocused,
     });
 
     return (

diff --git a/tests/perf-test/SelectionList.perf-test.js b/tests/perf-test/SelectionList.perf-test.js
@@ -31,6 +31,7 @@ jest.mock('../../src/components/withKeyboardState', () => (Component) => (props)
 
 jest.mock('@react-navigation/native', () => ({
     useFocusEffect: () => {},
+    useIsFocused: () => true,
     createNavigationContainerRef: jest.fn(),
 }));