fix: [Web] Focus restoration mechanism on back navigation (#76921)

src/App.tsx

@@ -1,6 +1,6 @@
 import {PortalProvider} from '@gorhom/portal';
 import * as Sentry from '@sentry/react-native';
-import React from 'react';
+import React, {useEffect} from 'react';
 import {LogBox, View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {PickerStateProvider} from 'react-native-picker-select';
@@ -51,6 +51,7 @@ import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
 import HybridAppHandler from './HybridAppHandler';
 import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
 import './libs/HybridApp';
+import NavigationFocusManager from './libs/NavigationFocusManager';
 import {AttachmentModalContextProvider} from './pages/media/AttachmentModalScreen/AttachmentModalContext';
 import ExpensifyCardContextProvider from './pages/settings/Wallet/ExpensifyCardPage/ExpensifyCardContextProvider';
 import TravelCVVContextProvider from './pages/settings/Wallet/TravelCVVPage/TravelCVVContextProvider';
@@ -75,6 +76,16 @@ function App() {
     useDefaultDragAndDrop();
     OnyxUpdateManager();
 
+    // Initialize NavigationFocusManager for web focus restoration during back navigation
+    // This captures focus on pointerdown/keydown before navigation changes focus to body
+    useEffect(() => {
+        NavigationFocusManager.initialize();
+
+        return () => {
+            NavigationFocusManager.destroy();
+        };
+    }, []);
+
     return (
         <StrictModeWrapper>
             <SplashScreenStateContextProvider>

src/components/ApprovalWorkflowSection.tsx

@@ -71,6 +71,8 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress, currency = CONST.CU
                         </Text>
                     </View>
                 )}
+                {/* MenuItems are display-only (interactive={false}) because the outer
+                    PressableWithoutFeedback handles all click interactions. */}
                 <MenuItem
                     title={translate('workflowsExpensesFromPage.title')}
                     style={styles.p0}
@@ -84,7 +86,7 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress, currency = CONST.CU
                     iconHeight={20}
                     iconWidth={20}
                     iconFill={theme.icon}
-                    onPress={onPress}
+                    interactive={false}
                     shouldRemoveBackground
                     sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.WORKFLOWS.APPROVAL_SECTION_EXPENSES_FROM}
                 />
@@ -106,7 +108,7 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress, currency = CONST.CU
                             iconWidth={20}
                             numberOfLinesDescription={1}
                             iconFill={theme.icon}
-                            onPress={onPress}
+                            interactive={false}
                             shouldRemoveBackground
                             helperText={getApprovalLimitDescription({approver, currency, translate, personalDetailsByEmail})}
                             helperTextStyle={styles.workflowApprovalLimitText}

src/components/ButtonWithDropdownMenu/index.tsx

@@ -1,4 +1,4 @@
-import type {RefObject} from 'react';
+import type {RefCallback} from 'react';
 import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {GestureResponderEvent} from 'react-native';
@@ -14,9 +14,11 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import mergeRefs from '@libs/mergeRefs';
+import NavigationFocusManager from '@libs/NavigationFocusManager';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {AnchorPosition} from '@src/styles';
+import viewRef from '@src/types/utils/viewRef';
 import type {ButtonWithDropdownMenuProps} from './types';
 
 const defaultAnchorAlignment = {
@@ -25,6 +27,8 @@ const defaultAnchorAlignment = {
     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
 };
 
+type DropdownAnchor = View | HTMLDivElement | null;
+
 function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownMenuProps<IValueType>) {
     const {
         success = true,
@@ -74,18 +78,22 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
     // In tests, skip the popover anchor position calculation. The default values are needed for popover menu to be rendered in tests.
     const defaultPopoverAnchorPosition = process.env.NODE_ENV === 'test' ? {horizontal: 100, vertical: 100} : null;
     const [popoverAnchorPosition, setPopoverAnchorPosition] = useState<AnchorPosition | null>(defaultPopoverAnchorPosition);
-    const dropdownAnchor = useRef<View | null>(null);
+    const dropdownAnchor = useRef<DropdownAnchor>(null);
+    const [wasOpenedViaKeyboard, setWasOpenedViaKeyboard] = useState(false);
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct popover styles
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
-    const dropdownButtonRef = isSplitButton ? buttonRef : mergeRefs(buttonRef, dropdownAnchor);
+    const setDropdownAnchor: RefCallback<View> = useCallback((node: DropdownAnchor) => {
+        dropdownAnchor.current = node;
+    }, []);
+    // eslint-disable-next-line react-hooks/refs -- mergeRefs creates a ref callback and does not read ref.current during render
+    const dropdownButtonRef = isSplitButton ? buttonRef : mergeRefs(buttonRef, setDropdownAnchor);
     const selectedItem = options.at(selectedItemIndex) ?? options.at(0);
     const areAllOptionsDisabled = options.every((option) => option.disabled);
     const innerStyleDropButton = StyleUtils.getDropDownButtonHeight(buttonSize);
     const isButtonSizeLarge = buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE;
     const isButtonSizeSmall = buttonSize === CONST.DROPDOWN_BUTTON_SIZE.SMALL;
     const isButtonSizeExtraSmall = buttonSize === CONST.DROPDOWN_BUTTON_SIZE.EXTRA_SMALL;
-    const nullCheckRef = (refParam: RefObject<View | null>) => refParam ?? null;
     const shouldShowButtonRightIcon = !!options.at(0)?.shouldShowButtonRightIcon;
 
     useEffect(() => {
@@ -101,7 +109,7 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
             return;
         }
 
-        calculatePopoverPosition(dropdownAnchor, anchorAlignment).then(setPopoverAnchorPosition);
+        calculatePopoverPosition(viewRef(dropdownAnchor), anchorAlignment).then(setPopoverAnchorPosition);
     }, [isMenuVisible, calculatePopoverPosition, anchorAlignment]);
 
     const handleSingleOptionPress = useCallback(
@@ -123,12 +131,27 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
         [options, onPress, onOptionSelected, onSubItemSelected],
     );
 
+    /** Opens or closes the menu with keyboard tracking */
+    const toggleMenu = useCallback(() => {
+        if (!isMenuVisible) {
+            // Capture keyboard state BEFORE menu opens
+            const wasKeyboardInteraction = NavigationFocusManager.wasRecentKeyboardInteraction();
+            setWasOpenedViaKeyboard(wasKeyboardInteraction);
+            if (wasKeyboardInteraction) {
+                NavigationFocusManager.clearKeyboardInteractionFlag();
+            }
+        } else {
+            setWasOpenedViaKeyboard(false);
+        }
+        setIsMenuVisible(!isMenuVisible);
+    }, [isMenuVisible]);
+
     useKeyboardShortcut(
         CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER,
         (e) => {
             if (shouldAlwaysShowDropdownMenu || options.length) {
                 if (!isSplitButton) {
-                    setIsMenuVisible(!isMenuVisible);
+                    toggleMenu();
                     return;
                 }
                 if (selectedItem?.value) {
@@ -150,18 +173,28 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
     const handlePress = useCallback(
         (event?: GestureResponderEvent | KeyboardEvent) => {
             if (!isSplitButton) {
-                setIsMenuVisible(!isMenuVisible);
+                toggleMenu();
             } else if (selectedItem?.value) {
                 onPress(event, selectedItem.value);
             }
         },
-        [isMenuVisible, isSplitButton, onPress, selectedItem?.value],
+        [isSplitButton, onPress, selectedItem?.value, toggleMenu],
     );
 
     useImperativeHandle(ref, () => ({
         setIsMenuVisible,
     }));
 
+    const focusDropdownAnchor = useCallback(() => {
+        const anchor = dropdownAnchor.current;
+
+        if (!anchor || !('focus' in anchor) || typeof anchor.focus !== 'function') {
+            return;
+        }
+
+        anchor.focus();
+    }, []);
+
     return (
         <View style={wrapperStyle}>
             {shouldAlwaysShowDropdownMenu || options.length > 1 ? (
@@ -199,12 +232,12 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
 
                     {isSplitButton && (
                         <Button
-                            ref={dropdownAnchor}
+                            ref={setDropdownAnchor}
                             success={success}
                             isDisabled={isDisabled}
                             shouldStayNormalOnDisable={shouldStayNormalOnDisable}
                             style={[styles.pl0]}
-                            onPress={() => setIsMenuVisible(!isMenuVisible)}
+                            onPress={toggleMenu}
                             shouldRemoveLeftBorderRadius
                             extraSmall={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.EXTRA_SMALL}
                             large={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE}
@@ -271,9 +304,12 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                     isVisible={isMenuVisible}
                     onClose={() => {
                         setIsMenuVisible(false);
+                        setWasOpenedViaKeyboard(false);
                         onOptionsMenuHide?.();
                     }}
+                    wasOpenedViaKeyboard={wasOpenedViaKeyboard}
                     onModalShow={onOptionsMenuShow}
+                    onModalHide={focusDropdownAnchor}
                     onItemSelected={(selectedSubitem, index, event) => {
                         onSubItemSelected?.(selectedSubitem, index, event);
                         if (selectedSubitem.shouldCloseModalOnSelect !== false) {
@@ -282,7 +318,7 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                     }}
                     anchorPosition={popoverAnchorPosition}
                     shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
-                    anchorRef={nullCheckRef(dropdownAnchor)}
+                    anchorRef={dropdownAnchor}
                     scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && {...styles.pt4, paddingBottom}}
                     anchorAlignment={anchorAlignment}
                     shouldUseModalPaddingStyle={shouldUseModalPaddingStyle}