Taxes - BNP input is not auto focused in add rate page

[lanitochka17]

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: 9.0.54-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5134453
Email or phone of affected tester (no customers): applausetester+kh1610015@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch New Expensify app
2. Go to workspace settings > Taxes
3. Tap Add rate
4. Tap Value

Expected Result:

BNP input will be auto focused

Actual Result:

BNP input is not auto focused

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6647125_1730008681078.ScreenRecording_10-27-2024_13-52-22_1.mp4

View all open jobs on GitHub

[melvin-bot]

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

[github-actions]

👋 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:

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[lanitochka17]

Production:

RPReplay_Final1730050554.MP4

[Krishna2323]

Proposal


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

Taxes - BNP input is not auto focused in add rate page

What is the root cause of that problem?

• I don't think this is caused by any recent PR.
• We aren't focusing the input when the modal is visible.

App/src/components/AmountPicker/AmountSelectorModal.tsx

Lines 42 to 48 in 5103b4b

	<AmountForm
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...rest}
	autoFocus
	value={currentValue}
	onInputChange={setValue}
	/>

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


• To focus on the amount input whenever the modal is set to visible we should use the same method as we do in
  

  App/src/components/TextPicker/TextSelectorModal.tsx

  Lines 27 to 33 in 5103b4b

  	const inputRef = useRef<BaseTextInputRef | null>(null);
  	const inputValueRef = useRef(value);
  	const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  	const inputCallbackRef = (ref: BaseTextInputRef | null) => {
  	inputRef.current = ref;
  	};

  
  

  App/src/components/TextPicker/TextSelectorModal.tsx

  Lines 56 to 71 in 5103b4b

  	useFocusEffect(
  	useCallback(() => {
  	focusTimeoutRef.current = setTimeout(() => {
  	if (inputRef.current && isVisible) {
  	inputRef.current.focus();
  	(inputRef.current as TextInputType).setSelection?.(inputValueRef.current?.length ?? 0, inputValueRef.current?.length ?? 0);
  	}
  	return () => {
  	if (!focusTimeoutRef.current || !isVisible) {
  	return;
  	}
  	clearTimeout(focusTimeoutRef.current);
  	};
  	}, CONST.ANIMATED_TRANSITION);
  	}, [isVisible]),
  	);

  
  

  App/src/components/TextPicker/TextSelectorModal.tsx

  Lines 106 to 107 in 5103b4b

  	<InputWrapper
  	ref={inputCallbackRef}

• We should add the following in AmountSelectorModal.

    // Store the ref of the input
    const inputRef = useRef<BaseTextInputRef | null>(null);
    const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);

    const inputCallbackRef = (ref: BaseTextInputRef | null) => {
        inputRef.current = ref;
    };

    // use "useFocusEffect" focus on the input whenever "isVisible" state is changed.
    useFocusEffect(
        useCallback(() => {
            focusTimeoutRef.current = setTimeout(() => {
                if (inputRef.current && isVisible) {
                    inputRef.current.focus();
                }
                return () => {
                    if (!focusTimeoutRef.current || !isVisible) {
                        return;
                    }
                    clearTimeout(focusTimeoutRef.current);
                };
            }, CONST.ANIMATED_TRANSITION);
        }, [isVisible, inputRef]),
    );
    
    // Pass the ref to "AmountForm"
    ref={(ref) => inputCallbackRef(ref)}

What alternative solutions did you explore? (Optional)

Result

tax_amount_not_focused.mp4

[Beamanator]

@Krishna2323

I don't think this is caused by any recent PR.

But then wouldn't that mean that the issue should be reproducible in prod?

[Beamanator]

I'm going to call this NAB - also I don't know if we need it to look "focused" - pressing numbers works fine