From acfc614ecc8caedf3c46b83120b51c5fa50b9232 Mon Sep 17 00:00:00 2001
From: Thiago Brezinski <thiagobrez@gmail.com>
Date: Fri, 25 Aug 2023 17:10:34 +0100
Subject: [PATCH 1/2] fix(selection-list): scroll to top, cmd enter, tab key

---
 .../SelectionList/BaseSelectionList.js        | 27 ++++++++++++++---
 .../SelectionList/CheckboxListItem.js         | 30 ++++++++++++++-----
 .../SelectionList/selectionListPropTypes.js   |  3 ++
 src/hooks/useActiveElement/index.js           | 25 ++++++++++++++++
 src/hooks/useActiveElement/index.native.js    |  3 ++
 src/pages/workspace/WorkspaceInvitePage.js    |  1 +
 6 files changed, 77 insertions(+), 12 deletions(-)
 create mode 100644 src/hooks/useActiveElement/index.js
 create mode 100644 src/hooks/useActiveElement/index.native.js

diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index 60214d60715b..d13a9cced57d 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -22,6 +22,7 @@ import Button from '../Button';
 import useLocalize from '../../hooks/useLocalize';
 import Log from '../../libs/Log';
 import OptionsListSkeletonView from '../OptionsListSkeletonView';
+import useActiveElement from '../../hooks/useActiveElement';
 
 const propTypes = {
     ...keyboardStatePropTypes,
@@ -49,6 +50,7 @@ function BaseSelectionList({
     onConfirm,
     showScrollIndicator = false,
     showLoadingPlaceholder = false,
+    showConfirmButton = false,
     isKeyboardShown = false,
 }) {
     const {translate} = useLocalize();
@@ -58,7 +60,9 @@ function BaseSelectionList({
     const focusTimeoutRef = useRef(null);
     const shouldShowTextInput = Boolean(textInputLabel);
     const shouldShowSelectAll = Boolean(onSelectAll);
-    const shouldShowConfirmButton = Boolean(onConfirm);
+    const activeElement = useActiveElement();
+
+    console.log('activeElement', activeElement);
 
     /**
      * Iterates through the sections and items inside each section, and builds 3 arrays along the way:
@@ -162,7 +166,7 @@ function BaseSelectionList({
             }
         }
 
-        listRef.current.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex, animated});
+        listRef.current.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex, animated, viewOffset: variables.contentHeaderHeight});
     };
 
     const selectRow = (item, index) => {
@@ -176,6 +180,11 @@ function BaseSelectionList({
                 // If the list has multiple sections (e.g. Workspace Invite list), we focus the first one after all the selected (selected items are always at the top)
                 const selectedOptionsCount = item.isSelected ? flattenedSections.selectedOptions.length - 1 : flattenedSections.selectedOptions.length + 1;
                 setFocusedIndex(selectedOptionsCount);
+
+                if (!item.isSelected) {
+                    // If we're selecting an item, scroll to it's position at the top, so we can see it
+                    scrollToIndex(Math.max(selectedOptionsCount - 1, 0), true);
+                }
             }
         }
 
@@ -183,6 +192,8 @@ function BaseSelectionList({
     };
 
     const selectFocusedOption = () => {
+        console.log('ENTER');
+
         const focusedOption = flattenedSections.allOptions[focusedIndex];
 
         if (!focusedOption || focusedOption.isDisabled) {
@@ -277,10 +288,18 @@ function BaseSelectionList({
         };
     }, [shouldDelayFocus, shouldShowTextInput]);
 
-    /** Selects row when pressing enter */
+    /** Selects row when pressing Enter */
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
         captureOnInputs: true,
         shouldBubble: () => !flattenedSections.allOptions[focusedIndex],
+        isActive: !activeElement,
+    });
+
+    /** Calls confirm action when pressing CTRL (CMD) + Enter */
+    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER, onConfirm, {
+        captureOnInputs: true,
+        shouldBubble: () => !flattenedSections.allOptions[focusedIndex],
+        isActive: Boolean(onConfirm),
     });
 
     return (
@@ -371,7 +390,7 @@ function BaseSelectionList({
                                 />
                             </>
                         )}
-                        {shouldShowConfirmButton && (
+                        {showConfirmButton && (
                             <FixedFooter>
                                 <Button
                                     success
diff --git a/src/components/SelectionList/CheckboxListItem.js b/src/components/SelectionList/CheckboxListItem.js
index 81771fb07ce7..256182a38e8b 100644
--- a/src/components/SelectionList/CheckboxListItem.js
+++ b/src/components/SelectionList/CheckboxListItem.js
@@ -6,10 +6,13 @@ import PressableWithFeedback from '../Pressable/PressableWithFeedback';
 import styles from '../../styles/styles';
 import Text from '../Text';
 import {checkboxListItemPropTypes} from './selectionListPropTypes';
-import Checkbox from '../Checkbox';
 import Avatar from '../Avatar';
 import OfflineWithFeedback from '../OfflineWithFeedback';
 import CONST from '../../CONST';
+import * as StyleUtils from '../../styles/StyleUtils';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
+import themeColors from '../../styles/themes/default';
 
 function CheckboxListItem({item, isFocused = false, onSelectRow, onDismissError = () => {}}) {
     const hasError = !_.isEmpty(item.errors);
@@ -32,13 +35,24 @@ function CheckboxListItem({item, isFocused = false, onSelectRow, onDismissError
                 hoverStyle={styles.hoveredComponentBG}
                 focusStyle={styles.hoveredComponentBG}
             >
-                <Checkbox
-                    accessibilityLabel={item.text}
-                    disabled={item.isDisabled}
-                    isChecked={item.isSelected}
-                    onPress={() => onSelectRow(item)}
-                    style={item.isDisabled ? styles.buttonOpacityDisabled : {}}
-                />
+                <View
+                    style={[
+                        StyleUtils.getCheckboxContainerStyle(20, 4),
+                        item.isSelected && styles.checkedContainer,
+                        item.isSelected && styles.borderColorFocus,
+                        item.isDisabled && styles.cursorDisabled,
+                        item.isDisabled && styles.buttonOpacityDisabled,
+                    ]}
+                >
+                    {item.isSelected && (
+                        <Icon
+                            src={Expensicons.Checkmark}
+                            fill={themeColors.textLight}
+                            height={14}
+                            width={14}
+                        />
+                    )}
+                </View>
                 {Boolean(item.avatar) && (
                     <Avatar
                         containerStyles={styles.pl5}
diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js
index 414a838d269f..9adf42833ebc 100644
--- a/src/components/SelectionList/selectionListPropTypes.js
+++ b/src/components/SelectionList/selectionListPropTypes.js
@@ -153,6 +153,9 @@ const propTypes = {
 
     /** Whether to show the loading placeholder */
     showLoadingPlaceholder: PropTypes.bool,
+
+    /** Whether to show the default confirm button */
+    showConfirmButton: PropTypes.bool,
 };
 
 export {propTypes, radioListItemPropTypes, checkboxListItemPropTypes};
diff --git a/src/hooks/useActiveElement/index.js b/src/hooks/useActiveElement/index.js
new file mode 100644
index 000000000000..c973eb8eda18
--- /dev/null
+++ b/src/hooks/useActiveElement/index.js
@@ -0,0 +1,25 @@
+import {useEffect, useState} from 'react';
+
+export default function useActiveElement() {
+    const [active, setActive] = useState(document.activeElement);
+
+    const handleFocusIn = () => {
+        setActive(document.activeElement);
+    };
+
+    const handleFocusOut = () => {
+        setActive(null);
+    };
+
+    useEffect(() => {
+        document.addEventListener('focusin', handleFocusIn);
+        document.addEventListener('focusout', handleFocusOut);
+
+        return () => {
+            document.removeEventListener('focusin', handleFocusIn);
+            document.removeEventListener('focusout', handleFocusOut);
+        };
+    }, []);
+
+    return active;
+}
diff --git a/src/hooks/useActiveElement/index.native.js b/src/hooks/useActiveElement/index.native.js
new file mode 100644
index 000000000000..2f658d48ca9a
--- /dev/null
+++ b/src/hooks/useActiveElement/index.native.js
@@ -0,0 +1,3 @@
+export default function useActiveElement() {
+    return null;
+}
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 8a25d02ec7d8..744f1564687a 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -225,6 +225,7 @@ function WorkspaceInvitePage(props) {
                             onChangeText={setSearchTerm}
                             headerMessage={headerMessage}
                             onSelectRow={toggleOption}
+                            onConfirm={inviteUser}
                             showScrollIndicator
                             shouldDelayFocus
                         />

From d25179b3323d3218c1615e860ab7d91b66a46c30 Mon Sep 17 00:00:00 2001
From: Thiago Brezinski <thiagobrez@gmail.com>
Date: Fri, 25 Aug 2023 17:12:23 +0100
Subject: [PATCH 2/2] fix(selection-list): remove logs

---
 src/components/SelectionList/BaseSelectionList.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index d13a9cced57d..046b64e9e5c0 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -62,8 +62,6 @@ function BaseSelectionList({
     const shouldShowSelectAll = Boolean(onSelectAll);
     const activeElement = useActiveElement();
 
-    console.log('activeElement', activeElement);
-
     /**
      * Iterates through the sections and items inside each section, and builds 3 arrays along the way:
      * - `allOptions`: Contains all the items in the list, flattened, regardless of section
@@ -192,8 +190,6 @@ function BaseSelectionList({
     };
 
     const selectFocusedOption = () => {
-        console.log('ENTER');
-
         const focusedOption = flattenedSections.allOptions[focusedIndex];
 
         if (!focusedOption || focusedOption.isDisabled) {