[$250] [Android] mWeb/Chrome - BNP - Inserting decimal point, inconsistent behavior in mweb&Android

[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: 9.0.18
Reproducible in staging?: Y
Reproducible in production?: 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/4836262
Issue reported by: Applause Internal Team

Action Performed:

1. Launch app in both mweb and Android
2. Tap fab -- submit expense
3. Enter 23 and keep cursor between 2&3 and type dot to insert decimal point
4. Note the behavior in mweb & Android

Expected Result:

Inserting decimal point, behavior must be consistent in mweb& Android.

Actual Result:

In Android, decimal point is inserted correctly in the same place but in mweb, decimal point is inserted after a number. Inserting decimal point, inconsistent behavior in mweb& Android.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

Screenshots/Videos

Bug6565332_1723101158572.Screenrecorder-2024-08-08-12-34-45-180_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021846593217215177350
• Upwork Job ID: 1846593217215177350
• Last Price Increase: 2024-10-16

Issue Owner

Current Issue Owner: @thesahindia

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #vip-vsb

[IuliiaHerets]

@mallenexpensify 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

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[mallenexpensify]

Gonna try to pawn this off on Sheena when she gets assigned another iOS bug :)

[mallenexpensify]

Oh snap.... we got an Android phone on the way to the bank! I'll be able to test soon.

[melvin-bot]

@mallenexpensify 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!

[mallenexpensify]

Need to get Android phone setup, will do next week, bumped to Daily

[mallenexpensify]

Unsure when in the office this week but planning to get phone setup

[melvin-bot]

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

[mallenexpensify]

Still need to get phone setup 😿

[mallenexpensify]

Waiting on retest

[mvtglobally]

Issue is reproducible during KI retests.

1728711736643.Screenrecorder-2024-10-12-11-11-24-818_compress_1.mp4

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

Wow.. I really kicked the can down the road for a while here :/
Got Android phone setup and tested both on web and native, def a bug on mWeb where decimal goes to the end instead of the being placed in the middle where the cursor is.

[rezkiy37]

Hi, I am Michael (Mykhailo) from Callstack, an expert agency and I can work on this issue.

[rezkiy37]

The bug is replicable on all mobile web. I am investigating.

Details

Bug.mp4

[rezkiy37]

No overdue. I am working on the issue.

[rezkiy37]

I understand why the bug exists. The app does not recognize a cursor change for this edge case, and the callback of onSelectionChange is not called. Working on some fix.

[melvin-bot]

@mallenexpensify, @rezkiy37, @thesahindia Whoops! This issue is 2 days overdue. Let's get this updated quick!

[rezkiy37]

Since the bug is web-only we can utilize onPress (onClick) to get the latest selection. Preparing a proposal.

[rezkiy37]

Proposal

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

When the user clicks on the "<" (remove) button in mWeb, any further input is inserted in a previous selection (cursor) position. For instance:

1. Enter 234.
2. Set a decimal point after 2. Result: 2.34.
3. Click on the remove button. Result: 234.
4. Set a decimal point after 3. Expected result: 23.4 but actual result: 2.34.

Video

Bug1.mp4

What is the root cause of that problem?

The app does not recognize a cursor change for this edge case, and the callback of onSelectionChange is not called. However, the cursor position displays correctly visually.

App/src/components/MoneyRequestAmountInput.tsx

Line 307 in 4f0ca94

onSelectionChange={(e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {

Since the callback has not been called, the state is outdated.

App/src/components/MoneyRequestAmountInput.tsx

Lines 143 to 146 in 4f0ca94

	const [selection, setSelection] = useState({
	start: selectedAmountAsString.length,
	end: selectedAmountAsString.length,
	});

Therefore any further input is inserted in order with the outdated state.

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

The app uses BaseTextInputWithCurrencySymbol to display the input. There are platform separation for the component index.android.tsx and index.tsx. It utilizes onSelectionChange of TextInput.

I propose to create a web-specific file index.web.tsx, where I will put the next selection-specific logic:

onSelectionChange={(event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
    onSelectionChange(event.nativeEvent.selection.start, event.nativeEvent.selection.end);
}}
onPress={() => {
    const selectionStart = (textInputRef.current?.selectionStart as number) ?? 0;
    const selectionEnd = (textInputRef.current?.selectionEnd as number) ?? 0;
    onSelectionChange(selectionStart, selectionEnd);
}}

It utilizes one more handler — onPress — which is basically onClick on the web. The event informs the component about every click including the particular edge case. The app can take the correct selection of an input ref and update the internal state. Therefore any further input is inserted correctly.

Video

No.bug.mp4

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

@mallenexpensify, @rezkiy37, @thesahindia Eep! 4 days overdue now. Issues have feelings too...

[mallenexpensify]

@thesahindia can you review the above proposal plz? thx

[melvin-bot]

@mallenexpensify, @rezkiy37, @thesahindia 6 days overdue. This is scarier than being forced to listen to Vogon poetry!