Web - NetSuite - Input is not auto-focused in setup RHP after dismissing and restarting setup

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.0.68-2 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): [email protected] Issue reported by: Applause Internal Team

Action Performed:

1. Log into new dot
2. Create a new workspace
3. Navigate to workspace settings > More features > Enable accounting
4. Click on connect next to NetSuite > Upgrade > Go through the flow until step 5
5. Here notice that the input is auto-focused
6. When asked to enter credentials, dismiss the RHP by clicking outside of it
7. Now click on connect to NetSuite and go through the flow until step 5

Expected Result:

The input is auto-focused in the enter credentials RHP

Actual Result:

The input is not auto-focused in the enter credentials RHP. The issue also occurs when reconnecting to NetSuite after disconnecting

Workaround:

Unknown

Platforms:

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [ ] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/03774b3b-8db0-41a5-bafd-ccc199d4d905

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @VictoriaExpensify (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.

[andriivitiv]

Edited by proposal-police: This proposal was edited at 2024-11-30 17:04:38 UTC.

Proposal

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

Input is not auto-focused in setup RHP after dismissing and restarting the setup

What is the root cause of that problem?

This issue occurs due to a bug in the ConnectToNetSuiteFlow and the ConnectToSageIntacctFlow components.

We're updating reuseConnectionPopoverPosition state without verifying if the new value differs from the current one. Every time the setReuseConnectionPopoverPosition func is called, a new object is created. React interprets this as a change and marks the component for re-rendering.

This creates an infinite loop: reuseConnectionPopoverPosition changed > component re-renders > reuseConnectionPopoverPosition changed > component re-renders...

https://github.com/Expensify/App/blob/32ce9d429db83ab4ae861af3b39754d800189d6e/src/components/ConnectToNetSuiteFlow/index.tsx#L60-L67

https://github.com/Expensify/App/blob/32ce9d429db83ab4ae861af3b39754d800189d6e/src/components/ConnectToSageIntacctFlow/index.tsx#L65-L72

The infinite re-render then blocks the execution of InteractionManager.runAfterInteractions callbacks, which is used inside the useAutoFocusInput() hook. Specifically, it stalls on this line of the react-native-web package. The requestIdleCallback function waits until nothing blocks the event loop, but the continuous re-renders prevent this from happening.

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

Add an if check to ensure the horizontal or vertical property has actually changed before updating the state

const horizontal = x + width;
const vertical = y + height;

// Check if the value has changed to prevent infinite re-renders
if(reuseConnectionPopoverPosition.horizontal !== horizontal || reuseConnectionPopoverPosition.vertical !== vertical) {
    setReuseConnectionPopoverPosition({horizontal, vertical});
}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Write tests that ensure the ConnectToNetSuiteFlow and the ConnectToSageIntacctFlow components do not re-render when there are no changes to their props.

[avkotau]

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

Input is not auto-focused in setup RHP after dismissing and restarting the setup

What is the root cause of that problem?

inputRef.current loses its relevance: By the time the task in InteractionManager executes, the reference to inputRef.current might be outdated or null.



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


Move focus() Outside of InteractionManager By calling inputRef.current.focus() immediately when the conditions are ready, we ensure the element receives focus as soon as possible. However, we can still use InteractionManager to gracefully handle other UI interactions if necessary. https://github.com/Expensify/App/blob/f12b73c3aff5fea8cb8d41f111d52d5bfd187eb1/src/hooks/useAutoFocusInput.ts#L24-L39


    useEffect(() => {
        if (!isScreenTransitionEnded || !isInputInitialized || !inputRef.current || splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN) {
            return;
        }

 	
        
        inputRef.current?.focus();

        
        const focusTaskHandle = InteractionManager.runAfterInteractions(() => {
            if (inputRef.current && isMultiline) {
                moveSelectionToEnd(inputRef.current);
            }
            setIsScreenTransitionEnded(false);
        });
        return () => {
            focusTaskHandle.cancel();
        };
    }, [isMultiline, isScreenTransitionEnded, isInputInitialized, splashScreenState]);

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~01e80951ba5f62450f

[melvin-bot[bot]]

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

[melvin-bot[bot]]

@VictoriaExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[VictoriaExpensify]

Seeing if this can be fixed as part of the Sage issue - https://github.com/Expensify/App/issues/53156

[VictoriaExpensify]

Followed up on this issue - https://github.com/Expensify/App/issues/53156

[VictoriaExpensify]

This is going to be fixed as part of https://github.com/Expensify/App/issues/53156

[melvin-bot[bot]]

@VictoriaExpensify this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[VictoriaExpensify]

Not overdue

[melvin-bot[bot]]

@VictoriaExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.79-5 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/54396

If no regressions arise, payment will be issued on 2025-01-07. :confetti_ball:

[melvin-bot[bot]]

@VictoriaExpensify The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[melvin-bot[bot]]

Skipping the payment summary for this issue since all the assignees are employees or vendors. If this is incorrect, please manually add the payment summary SO.

[VictoriaExpensify]

No payment required, closing the issue out