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
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6679690_1732854856554.2024-11-29_07_25_33.mp4

View all open jobs on GitHub

[melvin-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.

[CyberAndrii]

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...

App/src/components/ConnectToNetSuiteFlow/index.tsx

Lines 60 to 67 in 32ce9d4

	if (!shouldUseNarrowLayout) {
	threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
	setReuseConnectionPopoverPosition({
	horizontal: x + width,
	vertical: y + height,
	});
	});
	}

App/src/components/ConnectToSageIntacctFlow/index.tsx

Lines 65 to 72 in 32ce9d4

	if (!shouldUseNarrowLayout) {
	threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
	setReuseConnectionPopoverPosition({
	horizontal: x + width,
	vertical: y + height,
	});
	});
	}

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.

App/src/hooks/useAutoFocusInput.ts

Lines 24 to 39 in f12b73c

	useEffect(() => {
	if (!isScreenTransitionEnded || !isInputInitialized || !inputRef.current || splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN) {
	return;
	}
	const focusTaskHandle = InteractionManager.runAfterInteractions(() => {
	if (inputRef.current && isMultiline) {
	moveSelectionToEnd(inputRef.current);
	}
	inputRef.current?.focus();
	setIsScreenTransitionEnded(false);
	});
	return () => {
	focusTaskHandle.cancel();
	};
	}, [isMultiline, isScreenTransitionEnded, isInputInitialized, splashScreenState]);


    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]

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