[$500] mWeb - Request Money- Missing cursor when requesting/split the money

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Issue found when executing #10147

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with any account
3. Click FAB > Request Money
4. Enter an amount
5. Move cursor to the middle of the amount 5.1. Enter a Digit 5.2. Delete a digit 5.3. Paste a couple of digits 5.4. Cut a couple of digits

Expected Result:

Cursor should be present when requesting/split the money

Actual Result:

Missing cursor when requesting/split the money

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Mobile Web (Android)

Version Number: 1.1.94.4 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos:

https://user-images.githubusercontent.com/43996225/187492774-2cd40f6e-7598-42eb-8fc5-b004ebea5cba.mp4

Expensify/Expensify Issue URL: Issue reported by: Applause internal team Slack conversation:

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @yuwenmemon (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot[bot]]

Triggered auto assignment to @adelekennedy (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[adelekennedy]

internal external

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to @thienlnam (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[AndrewGable]

This is a regression from https://github.com/Expensify/App/issues/6154 - I believe @eVoloshchak should fix this.

[rushatgabhane]

@AndrewGable not really. This issue was present before the PR

I looked into solving it during 6154 PR, and i believe a fix for it is out of scope of the PR

[trjExpensify]

I'm also a bit confused by the steps in the OP versus the video. Something isn't clear, because I can see the cursor in the video? 😕

I also can't seem to reproduce it, if that's the problem as stated.

https://user-images.githubusercontent.com/16232057/187634101-d693cf6d-c642-41b7-9c18-f9cf7ceefe83.MP4

[rushatgabhane]

@trjExpensify I think this is a mWeb - Android only issue

[trjExpensify]

Oh, I see. @kavimuru can you confirm that, please?

[kbecciv]

@trjExpensify Correct, mWeb - Andriod

[trjExpensify]

Cool, thanks for clarifying.

[vinicius-grandi]

Proposal

Problem

The textbox is losing focus when number pad is pressed.

Solution

You should pass the method focusTextInput to the number pad and use it when onPress event occurs

src/pages/iou/steps/IOUAmountPage.js

...
<BigNumberPad
    numberPressed={this.updateAmountNumberPad}
    longPressHandlerStateChanged={state => this.shouldUpdateSelection = !state}
+   focusTextInput={this.focusTextInput}
/>
...

src/components/BigNumberPad.js

...
<Button
    ...
+   onPress={() => {
+       this.props.focusTextInput()
        this.props.numberPressed(column);
+   }}
    ...
/>
...

[rushatgabhane]

The textbox is losing focus when number pad is pressed

@vinicius-grandi can we make it not loose the focus in the first place?

[vinicius-grandi]

The textbox is losing focus when number pad is pressed

@vinicius-grandi can we make it not loose the focus in the first place?

Proposal

Just use preventDefault on pressOut event (which would normally cause focus on button). The side effect is that prevents the click event as well, so to solve this, fire click event manually.

src/components/BigNumberPad.js

<Button 
...
    onPressOut={(e) => {
+     e.preventDefault();
+     e.target.click();
      clearInterval(this.state.timer);
      ControlSelection.unblock();
      this.props.longPressHandlerStateChanged(false);
    }}
...
/>
...

[rushatgabhane]

@vinicius-grandi i don't think native platforms have a click() function

[aimane-chnaif]

Proposal

RCA: In web, focused input is blurred as default when click (mouse down) other elements.

Solution: When click number pad, prevent web's default behavior of mouse down event. This doesn't affect other callbacks of Pressable component (i.e. onPress, onLongPress, onPressIn, onPressOut)

Code proposal:

• Introduce onMouseDown prop on Button component (Adding to propTypes, defaultProps can be done when create PR) https://github.com/Expensify/App/blob/a0340070ebf94fe3acde872c8c0c4222edd984c3/src/components/Button.js#L233-L258

                onMouseDown={this.props.onMouseDown}

• Add onMouseDown callback on Button component of BigNumberPad

https://github.com/Expensify/App/blob/a0340070ebf94fe3acde872c8c0c4222edd984c3/src/components/BigNumberPad.js#L68-L81

                onMouseDown={e => e.preventDefault()}

This solution is only for web/mWeb and affects nothing on native iOS/Android platforms because onMouseDown callback is only for web.

[rushatgabhane]

because onMouseDown callback is only for web.

wait, how is this being taken care of? @aimane-chnaif

[aimane-chnaif]

wait, how is this being taken care of? @aimane-chnaif

onMouseDown is web only property, not exist in native mobile. This is already used in the app as an important feature: send button on composer (https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionCompose.js#L667) reference: https://github.com/Expensify/App/issues/7798 (PR)

[rushatgabhane]

@aimane-chnaif your proposal looks great!

cc: @thienlnam C+ reviewed 🎀 👀 🎀

[melvin-bot[bot]]

@rushatgabhane, @thienlnam, @adelekennedy Whoops! This issue is 2 days overdue. Let's get this updated quick!

[adelekennedy]

@thienlnam thoughts on the proposal above?

[thienlnam]

Sorry, just got back from OOO

@rushatgabhane Did you have a chance to test those changes locally? The proposal looks good but want to make sure it doesn't impact other button places this is used

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[thienlnam]

There seem to be a few cursor issues that are related - the fix should encapsulate these issues

https://github.com/Expensify/App/issues/11095

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[thienlnam]

Pending proposal review in https://github.com/Expensify/App/issues/11095

[trjExpensify]

@thienlnam, should this issue be on hold for that one then?

[parasharrajat]

Reviewed the other issue https://github.com/Expensify/App/issues/11095. I think may be another regression from https://github.com/Expensify/App/pull/10147 or a missed test case during the review.

But the reprodcution of this issue is not covered in https://github.com/Expensify/App/issues/11095.

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.