[Due for payment 2025-12-11] [$250] wallet-Inconsistent cursor behaviour when pasting magic code in mweb vs android

[mitarachim]

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: V9.2.63
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/folder/13176692/test-cases/41236749
Email or phone of affected tester (no customers): dreamnitethedragon+yydyd373@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10S Android 13
App Component: User Settings

Action Performed:

1. Launch app in both mWeb and android also perform below steps in both environments
2. Login with new gmail account
3. Copy an magic code
4. Go to Account - Wallet - Add Bank account
5. Enter an incorrect magic code
6. Long press on first box and paste the magic code

Expected Result:

There shouldn't be inconsistent behavior on pasting magic code.

Actual Result:

In mweb, cursor remains in first box being highlighted in green.
In android, cursor remains in last box being highlighted in green.
Inconsistent behaviour on pasting magic code.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug7012608_1764029832958.Screenrecorder-2025-11-25-05-37-51-584.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021993460614120011710
• Upwork Job ID: 1993460614120011710
• Last Price Increase: 2025-11-25

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

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

[Eskalifer1]

🚨 Edited by proposal-police: This proposal was edited at 2025-11-26 15:40:46 UTC.

Proposal

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

wallet-Inconsistent cursor behaviour when pasting magic code in mweb vs android

What is the root cause of that problem?

There is no logic on the web that would focus the input when pasting, because on native devices, the onChangeText function is also executed when pasting, which has the logic of setting the focused element, but on the web, this callback is not executed when pasting, which is why there is a difference in behavior.

Here is a part with this logic:

App/src/components/MagicCodeInput.tsx

Line 168 in b241944

useMagicCodePaste(inputRef, onChangeTextProp);

App/src/components/MagicCodeInput.tsx

Lines 20 to 56 in b241944

	/**
	* Trims whitespace from pasted magic codes
	*/
	const useMagicCodePaste = (inputRef: React.RefObject<BaseTextInputRef | null>, onChangeText: (value: string) => void) => {
	useEffect(() => {
	if (typeof document === 'undefined') {
	return;
	}
	const handlePaste = (event: ClipboardEvent) => {
	if (!inputRef.current) {
	return;
	}
	const isFocused = (inputRef.current as RNTextInput)?.isFocused?.() ?? false;
	if (!isFocused) {
	return;
	}
	event.preventDefault();
	const plainText = event.clipboardData?.getData('text/plain');
	if (plainText) {
	const trimmedText = plainText.trim();
	if (trimmedText && isNumeric(trimmedText)) {
	onChangeText(trimmedText);
	}
	}
	};
	document.addEventListener('paste', handlePaste, true);
	return () => {
	document.removeEventListener('paste', handlePaste, true);
	};
	}, [inputRef, onChangeText]);
	};

It turns out that with this hook, we are overwriting the paste logic, since we are using event.preventDefault(); here:

App/src/components/MagicCodeInput.tsx

Line 39 in b241944

event.preventDefault();

This means that instead of the default behavior being executed in the input and onChangeText (which we pass with custom logic) being executed when pasting, we prohibit the default behavior when pasting and add only onChangeTextProp execution. I don't think removing event.preventDefault() is a good idea, so I suggested simply passing the callback that we actually pass to TextInput itself:

App/src/components/MagicCodeInput.tsx

Line 480 in b241944

onChangeText={onChangeText}

Nothing happens on native devices because we have a check for document here, and it is not available on native devices, so this hook essentially does nothing there:

App/src/components/MagicCodeInput.tsx

Lines 25 to 27 in b241944

	if (typeof document === 'undefined') {
	return;
	}

As a result, on native devices, the default behavior and onChangeText are executed, while in the browser, when pasting, instead of onChangeText, we execute onChangeTextProp, which leads to a difference in behavior.

If you were asking about the part where the active element is set during the execution of onChangeText, here it is:

App/src/components/MagicCodeInput.tsx

Lines 313 to 324 in b241944

	// Updates the focused input taking into consideration the last input
	// edited and the number of digits added by the user.
	const numbersArr = addedValue
	.trim()
	.split('')
	.slice(0, maxLength - editIndex.current);
	const updatedFocusedIndex = Math.min(editIndex.current + (numbersArr.length - 1) + 1, maxLength - 1);
	let numbers = decomposeString(valueRef.current, maxLength);
	numbers = [...numbers.slice(0, editIndex.current), ...numbersArr, ...numbers.slice(numbersArr.length + editIndex.current, maxLength)];
	setInputAndIndex(updatedFocusedIndex);

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

We already have logic of pasting text here:

App/src/components/MagicCodeInput.tsx

Line 168 in bb216c8

useMagicCodePaste(inputRef, onChangeTextProp);

But we only pass onChangeTextProp so additional logic form this function is not executed:

App/src/components/MagicCodeInput.tsx

Line 301 in bb216c8

const onChangeText = (textValue?: string) => {

We can pass onChangeText instead of that function from the props(onChangeTextProp)

useMagicCodePaste(inputRef, onChangeText);

What alternative solutions did you explore? (Optional)

We can add 3-rd parametr to useMagicCodePaste to pass setFocusedIndex and add only logic for focusig index
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[JmillsExpensify]

Opened up for proposals

[bernhardoj]

because on native devices, the onChangeText function is also executed when pasting, which has the logic of setting the focused element,

@Eskalifer1 can you point out the code that is responsible for this, please? Thanks!

[Eskalifer1]

Hi @bernhardoj Sure! this part:

App/src/components/MagicCodeInput.tsx

Line 168 in b241944

useMagicCodePaste(inputRef, onChangeTextProp);

App/src/components/MagicCodeInput.tsx

Lines 20 to 56 in b241944

	/**
	* Trims whitespace from pasted magic codes
	*/
	const useMagicCodePaste = (inputRef: React.RefObject<BaseTextInputRef | null>, onChangeText: (value: string) => void) => {
	useEffect(() => {
	if (typeof document === 'undefined') {
	return;
	}
	const handlePaste = (event: ClipboardEvent) => {
	if (!inputRef.current) {
	return;
	}
	const isFocused = (inputRef.current as RNTextInput)?.isFocused?.() ?? false;
	if (!isFocused) {
	return;
	}
	event.preventDefault();
	const plainText = event.clipboardData?.getData('text/plain');
	if (plainText) {
	const trimmedText = plainText.trim();
	if (trimmedText && isNumeric(trimmedText)) {
	onChangeText(trimmedText);
	}
	}
	};
	document.addEventListener('paste', handlePaste, true);
	return () => {
	document.removeEventListener('paste', handlePaste, true);
	};
	}, [inputRef, onChangeText]);
	};

It turns out that with this hook, we are overwriting the paste logic, since we are using event.preventDefault(); here:

App/src/components/MagicCodeInput.tsx

Line 39 in b241944

event.preventDefault();

This means that instead of the default behavior being executed in the input and onChangeText (which we pass with custom logic) being executed when pasting, we prohibit the default behavior when pasting and add only onChangeTextProp execution. I don't think removing event.preventDefault() is a good idea, so I suggested simply passing the callback that we actually pass to TextInput itself:

App/src/components/MagicCodeInput.tsx

Line 480 in b241944

onChangeText={onChangeText}

Nothing happens on native devices because we have a check for document here, and it is not available on native devices, so this hook essentially does nothing there:

App/src/components/MagicCodeInput.tsx

Lines 25 to 27 in b241944

	if (typeof document === 'undefined') {
	return;
	}

As a result, on native devices, the default behavior and onChangeText are executed, while in the browser, when pasting, instead of onChangeText, we execute onChangeTextProp, which leads to a difference in behavior.

If you were asking about the part where the active element is set during the execution of onChangeText, here it is:

App/src/components/MagicCodeInput.tsx

Lines 313 to 324 in b241944

	// Updates the focused input taking into consideration the last input
	// edited and the number of digits added by the user.
	const numbersArr = addedValue
	.trim()
	.split('')
	.slice(0, maxLength - editIndex.current);
	const updatedFocusedIndex = Math.min(editIndex.current + (numbersArr.length - 1) + 1, maxLength - 1);
	let numbers = decomposeString(valueRef.current, maxLength);
	numbers = [...numbers.slice(0, editIndex.current), ...numbersArr, ...numbers.slice(numbersArr.length + editIndex.current, maxLength)];
	setInputAndIndex(updatedFocusedIndex);

2025-11-26.13.10.53.mp4