[HOLD for Payment 2024-08-22] [$250] Submit expense - Tabs disappear when changing from Scan to Distance via SHIFT+TAB #43719

lanitochka17 · 2024-06-13T18:21:05Z

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 1.4.83-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4626993
Issue reported by: Applause - Internal Team

Action Performed:

Go to staging.new.expensify.com
Go to FAB > Submit expense
Go to Scan
Click on empty area on the RHP (like the empty header area)
Press SHIFT+TAB

Expected Result:

Nothing will happen

Actual Result:

RHP changes to Distance flow, and tabs (Manual, Scan, Distance) are missing

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

Bug6512234_1718299693563.20240614_012437.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0112bb5e5d8d723e7f
Upwork Job ID: 1801340710232481793
Last Price Increase: 2024-07-18
Automatic offers:

rayane-djouah | Reviewer | 103221643
dominictb | Contributor | 103221644

Issue Owner

Current Issue Owner: @rayane-djouah

melvin-bot · 2024-06-13T18:21:15Z

Triggered auto assignment to @tgolen (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

github-actions · 2024-06-13T18:21:19Z

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

lanitochka17 · 2024-06-13T18:21:50Z

@tgolen FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

lanitochka17 · 2024-06-13T18:22:03Z

We think that this bug might be related to #vip-vsp

melvin-bot · 2024-06-13T19:47:49Z

Job added to Upwork: https://www.upwork.com/jobs/~0112bb5e5d8d723e7f

melvin-bot · 2024-06-13T19:47:54Z

Triggered auto assignment to @OfstadC (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

melvin-bot · 2024-06-13T19:47:54Z

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rayane-djouah (External)

tgolen · 2024-06-13T19:47:56Z

I'm demoting this one and assigning to external.

tsa321 · 2024-06-13T23:59:03Z

cannot reproduce in production release. Offending PR: #39520

studentofcoding · 2024-06-14T10:22:22Z

Not produceable on Production and local

vishnu-karuppusamy · 2024-06-14T13:56:59Z

Proposal

Please re-state the problem that we are trying to solve in this issue.

Pressing SHIFT+TAB on the top section of the RHP updates the contents of the RHP.

What is the root cause of that problem?

The current implementation has a common FocusTrap wrapper (ScreenWrapper) for all three screens (Manual, Scan & Distance).

{* Common wrapper for all the three screens *}
<ScreenWrapper
    includeSafeAreaPaddingBottom={false}
    shouldEnableKeyboardAvoidingView={false}
    shouldEnableMinHeight={DeviceCapabilities.canUseTouchScreen()}
    headerGapStyles={isDraggingOver ? [styles.receiptDropHeaderGap] : []}
    testID={IOURequestStartPage.displayName}
>
    {({safeAreaPaddingBottomStyle}) => (
        <DragAndDropProvider
            setIsDraggingOver={setIsDraggingOver}
            isDisabled={selectedTab !== CONST.TAB_REQUEST.SCAN}
        >
            <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
                <HeaderWithBackButton
                    title={tabTitles[iouType]}
                    onBackButtonPress={navigateBack}
                />
                {iouType !== CONST.IOU.TYPE.SEND && iouType !== CONST.IOU.TYPE.PAY && iouType !== CONST.IOU.TYPE.INVOICE ? (
                    <OnyxTabNavigator
                        id={CONST.TAB.IOU_REQUEST_TYPE}
                        onTabSelected={resetIOUTypeIfChanged}
                        tabBar={TabSelector}
                    >
                        <TopTab.Screen name={CONST.TAB_REQUEST.MANUAL}>
                            {() => (
                                <IOURequestStepAmount
                                    shouldKeepUserInput
                                    route={route}
                                />
                            )}
                        </TopTab.Screen>
                        <TopTab.Screen name={CONST.TAB_REQUEST.SCAN}>{() => <IOURequestStepScan route={route} />}</TopTab.Screen>
                        {shouldDisplayDistanceRequest && <TopTab.Screen name={CONST.TAB_REQUEST.DISTANCE}>{() => <IOURequestStepDistance route={route} />}</TopTab.Screen>}
                    </OnyxTabNavigator>
                ) : (
                    <IOURequestStepAmount route={route} />
                )}
            </View>
        </DragAndDropProvider>
    )}
</ScreenWrapper>

When a click is made on the top empty area on the RHP (like the empty header area), the focus gets initiated on the common FocusTrap wrapper. Pressing SHIFT+TAB focuses the last element on the DOM tree which is the Next button of the Distance screen. (In the issue repro video, we can observe that the Next button of the Distance screen is focused)
Because of the translating nature of the Tabs component OnyxTabNavigator, the tabs (Manual, Scan, Distance) are translated to the left by 750px when the Next button of the Distance screen is focused. This is the reason behind missing of the tabs.

What changes do you think we should make in order to solve the problem?

Since the TAB navigation focus is already handled by focus-trap library, we can remove the below code block in src/pages/iou/request/IOURequestStartPage.tsx.

useFocusEffect(
    useCallback(() => {
        const handler = (event: KeyboardEvent) => {
            if (event.code !== CONST.KEYBOARD_SHORTCUTS.TAB.shortcutKey) {
                return;
            }
            event.preventDefault();
            event.stopPropagation();
        };
        KeyDownPressListener.addKeyDownPressListener(handler);

        return () => KeyDownPressListener.removeKeyDownPressListener(handler);
    }, []),
);

The fix for the issue is to only include the interactive elements of the focussed tab in the TAB navigation behavior order i.e. when the Manual tab is selected, the interactive elements of the Split & Distance tab should be removed from the TAB navigation tree by visually hiding them. FOR PROPOSAL PURPOSES, ONLY A POC-LEVEL CODE IS ADDED BELOW. WILL ADD THE STANDARDIZED CODE WHEN THE SOLUTION IS ACCEPTED.
The major update from the last proposal is that we are using the containerElements (https://www.npmjs.com/package/focus-trap-react#containerelements) prop of the focus-trap-react library.

Update the below in src/pages/iou/request/IOURequestStartPage.tsx:

<ScreenWrapper
    includeSafeAreaPaddingBottom={false}
    shouldEnableKeyboardAvoidingView={false}
    shouldEnableMinHeight={DeviceCapabilities.canUseTouchScreen()}
    headerGapStyles={isDraggingOver ? [styles.receiptDropHeaderGap] : []}
    testID={IOURequestStartPage.displayName}
    selectedTab={selectedTab}
>
    {({safeAreaPaddingBottomStyle}) => (
        <DragAndDropProvider
            setIsDraggingOver={setIsDraggingOver}
            isDisabled={selectedTab !== CONST.TAB_REQUEST.SCAN}
        >
            <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
                <View id={`${CONST.TAB.IOU_REQUEST_TYPE}_header`}>
                    <HeaderWithBackButton
                        title={tabTitles[iouType]}
                        onBackButtonPress={navigateBack}
                    />
                </View>
                {iouType !== CONST.IOU.TYPE.SEND && iouType !== CONST.IOU.TYPE.PAY && iouType !== CONST.IOU.TYPE.INVOICE ? (
                    <OnyxTabNavigator
                        id={CONST.TAB.IOU_REQUEST_TYPE}
                        onTabSelected={resetIOUTypeIfChanged}
                        tabBar={(props) => (
                            <TabSelector
                                {...props}
                                id={`${CONST.TAB.IOU_REQUEST_TYPE}_tabsHeader`}
                            />
                        )}
                    >
                        <TopTab.Screen name={CONST.TAB_REQUEST.MANUAL}>
                            {() => (
                                <View
                                    id={CONST.TAB_REQUEST.MANUAL}
                                    style={{flex: 1}}
                                >
                                    <IOURequestStepAmount
                                        shouldKeepUserInput
                                        route={route}
                                    />
                                </View>
                            )}
                        </TopTab.Screen>
                        <TopTab.Screen name={CONST.TAB_REQUEST.SCAN}>
                            {() => (
                                <View
                                    id={CONST.TAB_REQUEST.SCAN}
                                    style={{flex: 1}}
                                >
                                    <IOURequestStepScan route={route} />
                                </View>
                            )}
                        </TopTab.Screen>
                        {shouldDisplayDistanceRequest && (
                            <TopTab.Screen name={CONST.TAB_REQUEST.DISTANCE}>
                                {() => (
                                    <View
                                        id={CONST.TAB_REQUEST.DISTANCE}
                                        style={{flex: 1}}
                                    >
                                        <IOURequestStepDistance route={route} />
                                    </View>
                                )}
                            </TopTab.Screen>
                        )}
                    </OnyxTabNavigator>
                ) : (
                    <IOURequestStepAmount route={route} />
                )}
            </View>
        </DragAndDropProvider>
    )}
</ScreenWrapper>

Update the below in src/components/ScreenWrapper.tsx:

Line 7: import type {OnyxEntry} from 'react-native-onyx';
Line 22: import type {SelectedTabRequest} from '@src/types/onyx';
Line 105:
/** The tab to select by default (whatever the user visited last) */
selectedTab?: OnyxEntry<SelectedTabRequest>;
Line 134: selectedTab,
Line 251: <FocusTrapForScreens selectedTab={selectedTab}>

Update the below in src/components/FocusTrap/FocusTrapForScreen/FocusTrapProps.ts:

import type { SelectedTabRequest } from "@src/types/onyx";
import type { OnyxEntry } from "react-native-onyx";

type FocusTrapForScreenProps = {
    children: React.ReactNode;
    selectedTab?: OnyxEntry<SelectedTabRequest>;
};

export default FocusTrapForScreenProps;

Update the below in src/components/FocusTrap/FocusTrapForScreen/index.web.tsx:

Line 12: function FocusTrapForScreen({children, selectedTab}: FocusTrapProps) {
Line 16: const [containerElements, setContainerElements] = useState<HTMLElement[]>([]);
Line 36: 
useEffect(() => {
    if (selectedTab) {
        const elements = [
            document.getElementById(`${CONST.TAB.IOU_REQUEST_TYPE}_header`),
            document.getElementById(`${CONST.TAB.IOU_REQUEST_TYPE}_tabsHeader`),
            document.getElementById(selectedTab),
        ];
        setContainerElements(() => elements.filter((el) => Boolean(el)));
    }
}, [selectedTab]);
Line 70: containerElements={isActive && containerElements?.length ? containerElements : undefined}

Update the below in src/components/TabSelector/TabSelector.tsx:

Line 17: id?: string;
Line 57: function TabSelector({state, navigation, onTabPress = () => {}, position, id}: TabSelectorProps) {
Line 87:
<View
    style={styles.tabSelector}
    id={id}
>

What alternative solutions did you explore? (Optional)

We can fix this issue also by not rendering the contents of other screens i.e. when the Manual screen is in view, the contents of the Split & Distance screens shouldn't be rendered.

Since the TAB navigation focus is already handled by focus-trap library, we can remove the below code block.

useFocusEffect(
    useCallback(() => {
        const handler = (event: KeyboardEvent) => {
            if (event.code !== CONST.KEYBOARD_SHORTCUTS.TAB.shortcutKey) {
                return;
            }
            event.preventDefault();
            event.stopPropagation();
        };
        KeyDownPressListener.addKeyDownPressListener(handler);

        return () => KeyDownPressListener.removeKeyDownPressListener(handler);
    }, []),
);

The fix for the issue is to only include the interactive elements of the focussed tab in the TAB navigation behavior order i.e. when the Manual tab is selected, the interactive elements of the Split & Distance tab should be removed from the TAB navigation tree by visually hiding them.

<OnyxTabNavigator
    id={CONST.TAB.IOU_REQUEST_TYPE}
    onTabSelected={resetIOUTypeIfChanged}
    tabBar={TabSelector}
>
    <TopTab.Screen name={CONST.TAB_REQUEST.MANUAL}>
        {(props) => (
            <View style={{visibility: props?.navigation?.isFocused() ? 'visible' : 'hidden', flex: 1}}>
                <IOURequestStepAmount
                    shouldKeepUserInput
                    route={route}
                />
            </View>
        )}
    </TopTab.Screen>
    <TopTab.Screen name={CONST.TAB_REQUEST.SCAN}>
        {(props) => (
            <View style={{visibility: props?.navigation?.isFocused() ? 'visible' : 'hidden', flex: 1}}>
                <IOURequestStepScan route={route} />
            </View>
        )}
    </TopTab.Screen>
    {shouldDisplayDistanceRequest && (
        <TopTab.Screen name={CONST.TAB_REQUEST.DISTANCE}>
            {(props) => (
                <View style={{visibility: props.navigation.isFocused() ? 'visible' : 'hidden', flex: 1}}>
                    <IOURequestStepDistance route={route} />
                </View>
            )}
        </TopTab.Screen>
    )}
</OnyxTabNavigator>

With the above update, the contents of all the tabs are never re-rendered and only the visible elements are included in the TAB navigation tree.

Since the TAB navigation focus is already handled by focus-trap library, we can remove the below code block in src/pages/iou/request/IOURequestStartPage.tsx.

useFocusEffect(
    useCallback(() => {
        const handler = (event: KeyboardEvent) => {
            if (event.code !== CONST.KEYBOARD_SHORTCUTS.TAB.shortcutKey) {
                return;
            }
            event.preventDefault();
            event.stopPropagation();
        };
        KeyDownPressListener.addKeyDownPressListener(handler);

        return () => KeyDownPressListener.removeKeyDownPressListener(handler);
    }, []),
);

Since each screen is individually wrapped by FocusTrap by the component ScreenWrapper, we can remove the common ScreenWrapper for all the screens. By this approach, only the active tab's FocusTrap will be active at once.
FOR PROPOSAL PURPOSES, ONLY A POC-LEVEL CODE IS ADDED BELOW. WILL ADD THE STANDARDIZED CODE WHEN THE SOLUTION IS ACCEPTED.

Update the below in src/pages/iou/request/IOURequestStartPage.tsx:

<AccessOrNotFoundWrapper
    reportID={reportID}
    iouType={iouType}
    policyID={policy?.id}
    accessVariants={[CONST.IOU.ACCESS_VARIANTS.CREATE]}
    allPolicies={allPolicies}
>
    <DragAndDropProvider
        setIsDraggingOver={setIsDraggingOver}
        isDisabled={selectedTab !== CONST.TAB_REQUEST.SCAN}
    >
        <View style={[styles.flex1]}>
            <View id={`${CONST.TAB.IOU_REQUEST_TYPE}_header`}>
                <HeaderWithBackButton
                    title={tabTitles[iouType]}
                    onBackButtonPress={navigateBack}
                />
            </View>
            {iouType !== CONST.IOU.TYPE.SEND && iouType !== CONST.IOU.TYPE.PAY && iouType !== CONST.IOU.TYPE.INVOICE ? (
                <OnyxTabNavigator
                    id={CONST.TAB.IOU_REQUEST_TYPE}
                    onTabSelected={resetIOUTypeIfChanged}
                    tabBar={(props) => (
                        <TabSelector
                            {...props}
                            id={`${CONST.TAB.IOU_REQUEST_TYPE}_tabsHeader`}
                        />
                    )}
                >
                    <TopTab.Screen name={CONST.TAB_REQUEST.MANUAL}>
                        {() => (
                            <View
                                id={CONST.TAB_REQUEST.MANUAL}
                                style={{flex: 1}}
                            >
                                <IOURequestStepAmount
                                    shouldKeepUserInput
                                    route={route}
                                />
                            </View>
                        )}
                    </TopTab.Screen>
                    <TopTab.Screen name={CONST.TAB_REQUEST.SCAN}>
                        {() => (
                            <View
                                id={CONST.TAB_REQUEST.SCAN}
                                style={{flex: 1}}
                            >
                                <IOURequestStepScan route={route} />
                            </View>
                        )}
                    </TopTab.Screen>
                    {shouldDisplayDistanceRequest && (
                        <TopTab.Screen name={CONST.TAB_REQUEST.DISTANCE}>
                            {() => (
                                <View
                                    id={CONST.TAB_REQUEST.DISTANCE}
                                    style={{flex: 1}}
                                >
                                    <IOURequestStepDistance route={route} />
                                </View>
                            )}
                        </TopTab.Screen>
                    )}
                </OnyxTabNavigator>
            ) : (
                <IOURequestStepAmount route={route} />
            )}
        </View>
    </DragAndDropProvider>
</AccessOrNotFoundWrapper>

Update the below in src/components/FocusTrap/FocusTrapForScreen/index.web.tsx:

Line no 10: import CONST from '@src/CONST';
Line no: 65:
containerElements={
    isActive && !!TOP_TAB_SCREENS.find((screen) => screen === route.name)
        ? [
                document.getElementById(`${CONST.TAB.IOU_REQUEST_TYPE}_header`),
                document.getElementById(`${CONST.TAB.IOU_REQUEST_TYPE}_tabsHeader`),
                document.getElementById(route.name),
            ]
        : undefined
}

Update the below in src/components/TabSelector/TabSelector.tsx:

Line no 17: id?: string;
Line no 57: function TabSelector({state, navigation, onTabPress = () => {}, position, id}: TabSelectorProps) {
Line no 87: 
<View
    style={styles.tabSelector}
    id={id}
>

Update the below in src/pages/iou/request/step/IOURequestStepAmount.tsx:

Line no 314: 
// shouldShowWrapper={!!backTo || isEditing}
shouldShowWrapper
hideHeader

Update the below in src/pages/iou/request/step/IOURequestStepDistance.tsx:

Line no 314: 
// shouldShowWrapper={!isCreatingNewRequest}
shouldShowWrapper
hideHeader

Update the below in src/pages/iou/request/step/IOURequestStepScan/index.tsx:

Line no 314: 
// shouldShowWrapper={!!backTo}
shouldShowWrapper
hideHeader

Update the below in src/pages/iou/request/step/StepScreenDragAndDropWrapper.tsx:

Line no 29: 
/** Hide the header when the wrapper is shown */
hideHeader?: boolean;
Line no 34:
function StepScreenDragAndDropWrapper({testID, hideHeader, headerTitle, onBackButtonPress, onEntryTransitionEnd, children, shouldShowWrapper}: StepScreenDragAndDropWrapperProps) {
Line no 55:
{!hideHeader ? (
    <HeaderWithBackButton
        title={headerTitle}
        onBackButtonPress={onBackButtonPress}
    />
) : null}

Update the below in src/pages/iou/request/step/StepScreenWrapper.tsx:

Line no 36: 
/** Hide the header when the wrapper is shown */
hideHeader?: boolean;
Line no 50: hideHeader,
Line no 68:
{!hideHeader ? (
    <HeaderWithBackButton
        title={headerTitle}
        onBackButtonPress={onBackButtonPress}
    />
) : null}

The id & other props are passed directly in the above changes for the purpose of creating a PoC. The additional ScreenWrapper in the IOURequestStartPage page is also removed with the above approach.

melvin-bot · 2024-06-14T13:57:02Z

📣 @vishnu-karuppusamy! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

vishnu-karuppusamy · 2024-06-14T13:58:21Z

Contributor details
Your Expensify account email: vishnu566662@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01fded0233eaf38db6

melvin-bot · 2024-06-14T13:58:24Z

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

dominictb · 2024-07-19T05:00:57Z

@rayane-djouah main...dominictb:epsf-app:fix/43719-shift-tab-test

This roughly the idea. The detailed implementation can be refined later.

dominictb · 2024-07-19T05:05:02Z

Proposal updated.

rayane-djouah · 2024-07-20T15:08:49Z

@rayane-djouah for a simpler solution, you can simply don't render anything if the tab isn't focus. Check out option 3 of my original proposal. We can even lift the logic up to IOURequestStepScan
<Tab.Screen>
   {() => {
      if(selectedTab !== 'scan') return null
     return <IOURequestStepScan .../>
   }}
</Tab.Screen>

As I mentioned here: #43719 (comment) This solution will cause a performance issue (re-render delays when tab switching, especially for the map in the distance tab)

rayane-djouah · 2024-07-20T15:08:56Z

@tgolen, Summary:
Tab navigation was disabled on the initial page of the IOU flow as per this PR to address this issue. Subsequently, the implementation of a focus trap in this PR caused this regression, as explained in the RCA within this proposal. To fix this bug from root, it is recommended to set the preventScroll option to true as outlined in the second option of the solution section in the proposal. If re-enabling tab navigation on this page is desired, we can utilize the containerElements prop from focus-trap-react, as suggested here in the alternative solution section of the proposal. I defer the decision to you on whether we should re-enable tab navigation on this page, especially considering our recent focus on improving tab navigation in the app, as seen in #36476.

@dominictb's proposal looks good to me.

🎀👀🎀 C+ reviewed

melvin-bot · 2024-07-20T15:09:05Z

Current assignee @tgolen is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

vishnu-karuppusamy · 2024-07-21T08:33:51Z

I would like to re-assist the solutions proposed as both the solutions proposed such as hiding the in-active tabs and the use of containerElements prop in the focus-trap-react were proposed initially by me.

@rayane-djouah could you please confirm the above statement?

cc: @OfstadC

tgolen · 2024-07-22T17:06:34Z

I think we should try to have tab navigation anywhere we can, so if it's possible to re-enable tab navigation (it sounds like it), then I think we should do it. I'll wait for ^ question to be resolved before doing anything here though.

…

On Sun, Jul 21, 2024 at 2:34 AM vishnu-karuppusamy ***@***.***> wrote: I would like to re-assist the solutions proposed as both the solutions proposed such as hiding the in-active tabs and the use of containerElements prop in the focus-trap-react were proposed initially by me. @rayane-djouah <https://github.com/rayane-djouah> could you please confirm the above statement? cc: @OfstadC <https://github.com/OfstadC> — Reply to this email directly, view it on GitHub <#43719 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJMABZ5WK76ZMN3YCTKTDLZNNXAJAVCNFSM6AAAAABJI5OZFOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENBRGUZDONRSG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

rayane-djouah · 2024-07-22T19:11:19Z

I would like to re-assist the solutions proposed as both the solutions proposed such as hiding the in-active tabs and the use of containerElements prop in the focus-trap-react were proposed initially by me.

@rayane-djouah could you please confirm the above statement?

@vishnu-karuppusamy - Thank you for your initial suggestion regarding the use of the containerElements prop. I appreciate your contribution to this discussion. I noticed, however, that your proposal might benefit from a more detailed explanation, particularly concerning the root cause analysis of this bug and a fully elaborated working solution.

I tried implementing the solution you suggested, as seen in the test branch, but unfortunately, it did not resolve the bug. In striving for the clearest and highest-quality proposal, with a fully working solution, I've decided to proceed with @dominictb's proposal that meets these criteria more fully.

Thank you again for your efforts and understanding.

rayane-djouah · 2024-07-22T19:15:14Z

@tgolen - Thank you for confirming the way to move forward! I agree that enabling tab navigation wherever possible will improve usability. Let's go ahead with @dominictb's solution.

melvin-bot · 2024-07-22T19:59:46Z

📣 @rayane-djouah 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

melvin-bot · 2024-07-22T19:59:50Z

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

OfstadC · 2024-08-01T20:23:52Z

Any update here @dominictb @rayane-djouah ? 😃

rayane-djouah · 2024-08-02T01:02:19Z

PR under review

melvin-bot · 2024-08-14T08:43:35Z

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

rayane-djouah · 2024-08-20T19:47:44Z

This ^ is a false positive #47381 (comment)

rayane-djouah · 2024-08-20T19:47:50Z

Note

The production deploy automation failed: This should be on [HOLD for Payment 2024-08-22] according to #47356 prod deploy checklist, confirmed in #45982 (comment).

cc @OfstadC

OfstadC · 2024-08-21T16:32:56Z

Thanks @rayane-djouah - since the automation failed. I'll posted the checklist below 😄

The PR that introduced the bug has been identified. Link to the PR:
The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
Determine if we should create a regression test for this bug.
If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

rayane-djouah · 2024-08-22T16:08:13Z

Checklist

The PR that introduced the bug has been identified. Link to the PR: Add focus trap #39520
The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Add focus trap #39520 (comment)
A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
Determine if we should create a regression test for this bug. Yes
If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

Open the app on web / desktop
Go to FAB > Submit expense
Verify that tab navigation works correctly
Verify that the focus jumps around the page but there's no UI shifting (Page tabs should not disappear)
Click on empty area on the RHP (like the empty header area)
Press SHIFT+TAB
Verify that there's no UI shifting (Page tabs should not disappear)

Do we agree 👍 or 👎

cc @OfstadC

OfstadC · 2024-08-22T19:12:12Z

Payment Summary:

@rayane-djouah paid $250 via Upwork
@dominictb paid $250 via Upwork

lanitochka17 added DeployBlockerCash This issue or pull request should block deployment DeployBlocker Indicates it should block deploying the API labels Jun 13, 2024

melvin-bot bot assigned tgolen Jun 13, 2024

github-actions bot added Engineering Hourly KSv2 labels Jun 13, 2024

github-actions bot mentioned this issue Jun 13, 2024

Deploy Checklist: New Expensify 2024-06-13 #43655

Closed

64 tasks

melvin-bot bot changed the title ~~Submit expense - Tabs disappear when changing from Scan to Distance via SHIFT+TAB~~ [$250] Submit expense - Tabs disappear when changing from Scan to Distance via SHIFT+TAB Jun 13, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jun 13, 2024

melvin-bot bot assigned OfstadC and rayane-djouah Jun 13, 2024

melvin-bot bot added the Overdue label Jul 22, 2024

melvin-bot bot removed the Overdue label Jul 22, 2024

tgolen assigned dominictb Jul 22, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Jul 22, 2024

dominictb mentioned this issue Jul 23, 2024

fix: enable tab on IOU request start page #45982

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Jul 23, 2024

OfstadC changed the title ~~[$250] Submit expense - Tabs disappear when changing from Scan to Distance via SHIFT+TAB~~ [HOLD for Payment 2024-08-22] [$250] Submit expense - Tabs disappear when changing from Scan to Distance via SHIFT+TAB Aug 21, 2024

rayane-djouah mentioned this issue Aug 22, 2024

Add focus trap #39520

Merged

50 tasks

OfstadC closed this as completed Aug 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for Payment 2024-08-22] [$250] Submit expense - Tabs disappear when changing from Scan to Distance via SHIFT+TAB #43719

[HOLD for Payment 2024-08-22] [$250] Submit expense - Tabs disappear when changing from Scan to Distance via SHIFT+TAB #43719

lanitochka17 commented Jun 13, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jun 13, 2024

github-actions bot commented Jun 13, 2024

lanitochka17 commented Jun 13, 2024

lanitochka17 commented Jun 13, 2024

melvin-bot bot commented Jun 13, 2024

melvin-bot bot commented Jun 13, 2024

melvin-bot bot commented Jun 13, 2024

tgolen commented Jun 13, 2024

tsa321 commented Jun 13, 2024 •

edited

Loading

studentofcoding commented Jun 14, 2024

vishnu-karuppusamy commented Jun 14, 2024 •

edited

Loading

melvin-bot bot commented Jun 14, 2024

vishnu-karuppusamy commented Jun 14, 2024

melvin-bot bot commented Jun 14, 2024

dominictb commented Jul 19, 2024

dominictb commented Jul 19, 2024

rayane-djouah commented Jul 20, 2024

rayane-djouah commented Jul 20, 2024

melvin-bot bot commented Jul 20, 2024

vishnu-karuppusamy commented Jul 21, 2024

tgolen commented Jul 22, 2024 via email

rayane-djouah commented Jul 22, 2024

rayane-djouah commented Jul 22, 2024

melvin-bot bot commented Jul 22, 2024

melvin-bot bot commented Jul 22, 2024

OfstadC commented Aug 1, 2024

rayane-djouah commented Aug 2, 2024

melvin-bot bot commented Aug 14, 2024

rayane-djouah commented Aug 20, 2024

rayane-djouah commented Aug 20, 2024

OfstadC commented Aug 21, 2024

rayane-djouah commented Aug 22, 2024

OfstadC commented Aug 22, 2024

[HOLD for Payment 2024-08-22] [$250] Submit expense - Tabs disappear when changing from Scan to Distance via SHIFT+TAB #43719

[HOLD for Payment 2024-08-22] [$250] Submit expense - Tabs disappear when changing from Scan to Distance via SHIFT+TAB #43719

Comments

lanitochka17 commented Jun 13, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Jun 13, 2024

github-actions bot commented Jun 13, 2024

lanitochka17 commented Jun 13, 2024

lanitochka17 commented Jun 13, 2024

melvin-bot bot commented Jun 13, 2024

melvin-bot bot commented Jun 13, 2024

melvin-bot bot commented Jun 13, 2024

tgolen commented Jun 13, 2024

tsa321 commented Jun 13, 2024 • edited Loading

studentofcoding commented Jun 14, 2024

vishnu-karuppusamy commented Jun 14, 2024 • edited Loading

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Jun 14, 2024

vishnu-karuppusamy commented Jun 14, 2024

melvin-bot bot commented Jun 14, 2024

dominictb commented Jul 19, 2024

dominictb commented Jul 19, 2024

rayane-djouah commented Jul 20, 2024

rayane-djouah commented Jul 20, 2024

melvin-bot bot commented Jul 20, 2024

vishnu-karuppusamy commented Jul 21, 2024

tgolen commented Jul 22, 2024 via email

rayane-djouah commented Jul 22, 2024

rayane-djouah commented Jul 22, 2024

melvin-bot bot commented Jul 22, 2024

melvin-bot bot commented Jul 22, 2024

OfstadC commented Aug 1, 2024

rayane-djouah commented Aug 2, 2024

melvin-bot bot commented Aug 14, 2024

rayane-djouah commented Aug 20, 2024

rayane-djouah commented Aug 20, 2024

OfstadC commented Aug 21, 2024

rayane-djouah commented Aug 22, 2024

Checklist

OfstadC commented Aug 22, 2024

Payment Summary:

lanitochka17 commented Jun 13, 2024 •

edited by melvin-bot bot

Loading

tsa321 commented Jun 13, 2024 •

edited

Loading

vishnu-karuppusamy commented Jun 14, 2024 •

edited

Loading