[$250] Android - Taxes - Cursor is placed before the value when reopening saved value

[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: 1.4.57-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #38733

Action Performed:

Precondition:

• User is admin of Collect workspace

1. Go to staging.new.expensify.com
2. Go to Profile > Workspaces > Collect workspace
3. Go to Taxes > Add rate > Value
4. Enter any value and save it
5. Tap Value again

Expected Result:

Cursor is placed behind the value

Actual Result:

Cursor is placed in front of the value. Sometimes it appears behind the value

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6428815_1711552320921.Screen_Recording_20240327_230730_New_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01515a93e0ea4bae26
• Upwork Job ID: 1774175994999578624
• Last Price Increase: 2024-05-07

[melvin-bot]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@MitchExpensify 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]

We think that this bug might be related to #wave-control

[Krishna2323]

Proposal

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

Android - Taxes - Cursor is placed before the value when reopening saved value

What is the root cause of that problem?

We are not updating the selection correctly and due to that sometimes the selection is set to 0,0. We should set selection exactly like we do in MoneyRequestAmountForm.

App/src/components/AmountForm.tsx

Lines 220 to 225 in c7d6926

	onSelectionChange={(e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
	if (!shouldUpdateSelection) {
	return;
	}
	setSelection(e.nativeEvent.selection);
	}}

App/src/pages/iou/steps/MoneyRequestAmountForm.tsx

Lines 323 to 331 in c7d6926

	onSelectionChange={(e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
	if (!shouldUpdateSelection) {
	return;
	}
	const maxSelection = formattedAmount.length;
	const start = Math.min(e.nativeEvent.selection.start, maxSelection);
	const end = Math.min(e.nativeEvent.selection.end, maxSelection);
	setSelection({start, end});
	}}

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

We need to calculate the start and end of the selection instead of using e.nativeEvent.selection. Or we can refrain from updating selection on initial render. For that we can use a ref or state.

onSelectionChange={(e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
    if (!shouldUpdateSelection) {
        return;
    }
    const maxSelection = formattedAmount.length;
    const start = Math.min(e.nativeEvent.selection.start, maxSelection);
    const end = Math.min(e.nativeEvent.selection.end, maxSelection);
    setSelection({start, end});
}}

What alternative solutions did you explore? (Optional)

We don't clear the amount when going back to Add rate page, we should also reset the value when the component AmountForm component mounts.

We need to add changes here:

App/src/components/AmountPicker/AmountSelectorModal.tsx

Line 19 in 14ff944

To:

    useEffect(() => {
        setValue(value);
    }, [isVisible, value]);

Or we can update onBackButtonPress here like:

App/src/components/AmountPicker/AmountSelectorModal.tsx

Line 37 in 14ff944

onBackButtonPress={onClose}

onBackButtonPress={() => {
    onClose();
    setValue(value);
}}

What alternative solutions did you explore? (Optional) 2

We should focus on the input using inputCallbackRef from the useAutoFocusInput hook. We need to utilize the ref passed from AmountForm to AmountSelectorModal and then apply inputCallbackRef.

Or we can follow the code we use in IOURequestStepAmount:

App/src/pages/iou/request/step/IOURequestStepAmount.js

Lines 87 to 97 in e542ba7

	useFocusEffect(
	useCallback(() => {
	focusTimeoutRef.current = setTimeout(() => textInput.current && textInput.current.focus(), CONST.ANIMATED_TRANSITION);
	return () => {
	if (!focusTimeoutRef.current) {
	return;
	}
	clearTimeout(focusTimeoutRef.current);
	};
	}, []),
	);

If we want to fix this issue comprehensively, we can check for the autoFocus prop and replace it with the implementation mentioned above. Additionally, we can cease accepting the autoFocus prop altogether to prevent encountering this issue again in the future.

pseudo-code:

    const textInput = useRef<BaseTextInputRef | null>(null);
    const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);

    useFocusEffect(
        useCallback(() => {
            if (!isVisible) {
                return;
            }
            focusTimeoutRef.current = setTimeout(() => textInput.current && textInput.current.focus(), CONST.ANIMATED_TRANSITION);
            return () => {
                if (!focusTimeoutRef.current) {
                    return;
                }
                clearTimeout(focusTimeoutRef.current);
            };
        }, [isVisible]),
    );

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01515a93e0ea4bae26

[melvin-bot]

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