fix selected item bug

Expensify · Sep 17, 2024 · 69f4a85 · 69f4a85
1 parent dd32f45
commit 69f4a85
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx
@@ -1,5 +1,5 @@
 import {Str} from 'expensify-common';
-import React, {useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -42,11 +42,19 @@ function AccountSwitcher() {
 
     const [shouldShowDelegatorMenu, setShouldShowDelegatorMenu] = useState(false);
     const [shouldShowOfflineModal, setShouldShowOfflineModal] = useState(false);
+    const [focusedAccountID, setFocusedAccountID] = useState<number>(currentUserPersonalDetails.accountID);
     const delegators = account?.delegatedAccess?.delegators ?? [];
 
     const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false;
     const canSwitchAccounts = canUseNewDotCopilot && (delegators.length > 0 || isActingAsDelegate);
 
+    useEffect(() => {
+        if (!shouldShowDelegatorMenu) {
+            return;
+        }
+        setFocusedAccountID(currentUserPersonalDetails.accountID);
+    }, [currentUserPersonalDetails.accountID, shouldShowDelegatorMenu]);
+
     const createBaseMenuItem = (
         personalDetails: PersonalDetails | undefined,
         errors?: Errors,
@@ -73,7 +81,7 @@ function AccountSwitcher() {
             shouldShowRightIcon: true,
             iconRight: Expensicons.Checkmark,
             success: true,
-            isSelected: true,
+            isSelected: focusedAccountID === currentUserPersonalDetails.accountID,
         });
 
         if (isActingAsDelegate) {
@@ -96,6 +104,7 @@ function AccountSwitcher() {
                         }
                         disconnect();
                     },
+                    isSelected: focusedAccountID === delegatePersonalDetails?.accountID,
                 }),
                 currentUserMenuItem,
             ];
@@ -115,6 +124,7 @@ function AccountSwitcher() {
                         }
                         connect(email);
                     },
+                    isSelected: focusedAccountID === personalDetails?.accountID,
                 });
             });
 
@@ -190,7 +200,11 @@ function AccountSwitcher() {
                         }
                         item.onSelected();
                     }}
+                    onFocus={(item) => {
+                        setFocusedAccountID(Number(item?.avatarID));
+                    }}
                     containerStyle={{maxHeight: windowHeight / 2, width: 'fit-content'}}
+                    headerStyle={styles.pt0}
                     shouldUseScrollView
                 />
             )}

diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx
@@ -2,7 +2,7 @@ import lodashIsEqual from 'lodash/isEqual';
 import type {RefObject} from 'react';
 import React, {Fragment, useLayoutEffect, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
-import type {StyleProp, ViewStyle} from 'react-native';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import type {ModalProps} from 'react-native-modal';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
@@ -65,6 +65,9 @@ type PopoverMenuProps = Partial<PopoverModalProps> & {
     /** Callback to fire when a CreateMenu item is selected */
     onItemSelected: (selectedItem: PopoverMenuItem, index: number) => void;
 
+    /** Handles what to do when the item is focused */
+    onFocus?: (item: PopoverMenuItem) => void;
+
     /** Menu items to be rendered on the list */
     menuItems: PopoverMenuItem[];
 
@@ -107,6 +110,9 @@ type PopoverMenuProps = Partial<PopoverModalProps> & {
     /** The style of content container which wraps all child views */
     containerStyle?: StyleProp<ViewStyle>;
 
+    /** Used to apply styles specifically to the header text */
+    headerStyle?: TextStyle;
+
     /** Whether we should wrap the list item in a scroll view */
     shouldUseScrollView?: boolean;
 };
@@ -119,6 +125,7 @@ function PopoverMenu({
     anchorRef,
     onClose,
     onModalShow,
+    onFocus = () => {},
     headerText,
     fromSidebarMediumScreen,
     anchorAlignment = {
@@ -135,6 +142,7 @@ function PopoverMenu({
     restoreFocusType,
     shouldShowSelectedItemCheck = false,
     containerStyle,
+    headerStyle,
     shouldUseScrollView = false,
 }: PopoverMenuProps) {
     const styles = useThemeStyles();
@@ -146,7 +154,15 @@ function PopoverMenu({
     const [enteredSubMenuIndexes, setEnteredSubMenuIndexes] = useState<readonly number[]>(CONST.EMPTY_ARRAY);
     const {windowHeight} = useWindowDimensions();
 
-    const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: currentMenuItemsFocusedIndex, maxIndex: currentMenuItems.length - 1, isActive: isVisible});
+    const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({
+        initialFocusedIndex: currentMenuItemsFocusedIndex,
+        maxIndex: currentMenuItems.length - 1,
+        isActive: isVisible,
+        onFocusedIndexChange: (index) => {
+            onFocus?.(currentMenuItems[index]);
+        },
+    });
+
     const WrapComponent = shouldUseScrollView ? ScrollView : Fragment;
 
     const selectItem = (index: number) => {
@@ -212,7 +228,7 @@ function PopoverMenu({
         if (!headerText || enteredSubMenuIndexes.length !== 0) {
             return;
         }
-        return <Text style={[styles.createMenuHeaderText, styles.ph5, styles.pv3]}>{headerText}</Text>;
+        return <Text style={[styles.createMenuHeaderText, styles.ph5, styles.pv3, headerStyle]}>{headerText}</Text>;
     };
 
     useKeyboardShortcut(
@@ -282,8 +298,11 @@ function PopoverMenu({
                                     focused={focusedIndex === menuIndex}
                                     shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
                                     shouldCheckActionAllowedOnPress={false}
-                                    onFocus={() => setFocusedIndex(menuIndex)}
-                                    style={{backgroundColor: focusedIndex === menuIndex ? theme.activeComponentBG : undefined}}
+                                    onFocus={() => {
+                                        setFocusedIndex(menuIndex);
+                                        onFocus?.(item);
+                                    }}
+                                    style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}}
                                     titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
                                     // eslint-disable-next-line react/jsx-props-no-spreading
                                     {...menuItemProps}
@@ -302,7 +321,7 @@ PopoverMenu.displayName = 'PopoverMenu';
 export default React.memo(
     PopoverMenu,
     (prevProps, nextProps) =>
-        prevProps.menuItems.length === nextProps.menuItems.length &&
+        prevProps.menuItems === nextProps.menuItems &&
         prevProps.isVisible === nextProps.isVisible &&
         lodashIsEqual(prevProps.anchorPosition, nextProps.anchorPosition) &&
         prevProps.anchorRef === nextProps.anchorRef &&

diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx
@@ -178,6 +178,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
                 onClose={closeMenu}
                 onItemSelected={closeMenu}
                 anchorRef={buttonRef}
+                shouldUseScrollView
             />
             <DeleteConfirmModal />
         </View>