[$1000] IOU - digit appears cutoff for a moment when entering a digit before decimal point

[kavimuru]

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

---

Action Performed:

1. Open the app on android chrome
2. Click on plus
3. Click on request money/send money
4. Write any amount of digits, add dot and now get the cursor before dot
5. Insert any digit (2 and 5 has most amount of cut and lag) and observe that digit is cut off for few seconds and dot is also not visible for that moment

Expected Result:

App should display all the digits and dot without cutting it off like is does on android app and all other platforms

Actual Result:

When trying to add new digit before dot, app cuts off the digit for few seconds on android chrome

Workaround:

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

Platforms:

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

• [ ] Android / native
• [x] Android / Chrome
• [ ] iOS / native
• [ ] iOS / Safari
• [ ] MacOS / Chrome / Safari
• [ ] MacOS / Desktop

Version Number: 1.3.3 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/43996225/233728081-ff5baaa3-1aa0-478b-a66c-47ae1acee18c.mp4

https://user-images.githubusercontent.com/43996225/233728103-c05beee0-a4e7-461e-a378-90e874d4fa29.mp4

Expensify/Expensify Issue URL: Issue reported by: @dhanashree-sawant Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1682066050918369

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019e5fd2a492a92ff5
• Upwork Job ID: 1650216918652129280
• Last Price Increase: 2023-04-23

[MelvinBot]

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

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• [x] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [x] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• [x] This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• [x] This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• [x] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[strepanier03]

I am able to recreate this behavior.

Tested with Google Pixel 6 Pro on m/web Chrome staging.new.expensify.com.

It is most pronounced with the "5" digit in my opinion but it is still fairly quick to correct placement.

I think it's a UX improvement but not a majorly huge one because it's just a few fractions of a second off and isn't overly noticeable.

[MelvinBot]

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

[MelvinBot]

Current assignee @strepanier03 is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

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

[strepanier03]

If you disagree with this being fixed let me know!

[aldo-expensify]

~It could be a performance issue that is only visible in slow phones 🤷~ , it doesn't look great, so I think it is fine if we leave it open for investigation.

I agree with it having low priority.

Update: I guess it is not only "slow" phones, considering that you reproduced it in a "Google Pixel 6 Pro" :P

[parasharrajat]

I think this is a real problem. IOU is an important feature of the app and any sluggish UI does not look good. It should be 60FPS.

[strepanier03]

Thank you for weighing in @aldo-expensify and @parasharrajat - Leaving it open and external.

I am going to be out of office April 26-May 3 but I don't expect my action will be needed on this GH before then so I don't plan to unassign this.

If something is needed from a BZ team member please post in #expensify-open-source and someone can help out.

[mountiny]

maybe @narefyev91 would be interested in this one

[narefyev91]

Hi I'm Nicolay from Callstack - expert contributor group - will start investigation in this area

[parasharrajat]

Let us know what you find. My understanding is that depending on the onLayout events calculating the text width is slow. We can try off-canvas rendering.

[aldo-expensify]

Thanks @narefyev91 !

[MelvinBot]

📣 @narefyev91 You have been assigned to this job by @mountiny! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[narefyev91]

My updates here - still investigating - was able to reproduce on real device - not only with dot, but with randomly moving cursor and typing

[aldo-expensify]

No overdue, @narefyev91 is working on it.

[narefyev91]

Updates from my side - indicate a root case of the issue - trying to find a solution to fix - will provide internal proposal as soon as possible

[narefyev91]

Posted local proposal for review - will add it here as soon as i get approve

[narefyev91]

Proposal

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

Resize of dynamic input happens after number already presented inside input component

What is the root cause of that problem?

The root cause of problem - is sequence of how we manipulate with state in lifecycle and how BaseTextInput component with props autoGrow is working. The sequence is this: user click on NumPad -> we send new value prop -> componentDidUpdate fires to set value from props -> value is showing in input -> Text component(which is hidden for calculating width) onLayout fires -> set new width -> width applies to input. The issue here that we should not set new value inside input - until we change width of the input - because width is dynamic and should be calculated based on value.

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

All changes should be done only if autoGrow is true

1. we need to add local value - based on it we will calculate width of dynamic input
2. value for input should be set only when width will be calculated and set after onLayout event from hidden Text component Most of the changes will be done inside componentDidUpdate:

    componentDidUpdate(prevProps, prevState) {
        // Activate or deactivate the label when value is changed programmatically from outside
        const inputValue = _.isUndefined(this.props.value) ? this.input.value : this.props.value;
        if ((_.isUndefined(inputValue) || this.state.value === inputValue) && _.isEqual(prevProps.selection, this.props.selection)) {
            return;
        }

        if (this.props.autoGrow) {
            if (inputValue !== this.state.localValue) {
                this.setState({localValue: inputValue});
            }

            if (prevState.textInputWidth === this.state.textInputWidth) {
                return;
            }
        }

Hidden Text will be changes from this.state.value -> this.state.localValue

            {this.props.autoGrow && (

                // Add +2 to width so that the first digit of amount do not cut off on mWeb - https://github.com/Expensify/App/issues/8158.
                <Text
                    style={[...this.props.inputStyle, styles.hiddenElementOutsideOfWindow, styles.visibilityHidden]}
                    onLayout={e => this.setState({textInputWidth: e.nativeEvent.layout.width + 2})}
                >
                    {this.state.localValue || this.props.placeholder}
                </Text>
            )}

What alternative solutions did you explore?

cc @strepanier03 @aldo-expensify @parasharrajat

[parasharrajat]

I will check this asap.

[parasharrajat]

The proposal sounds like it will work. But it shouldn't create a delay for user inputs. Users can use the keyboard on the web as well. Paste the number directly in the input etc.

[melvin-bot[bot]]

@strepanier03 @parasharrajat @narefyev91 @aldo-expensify this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[aldo-expensify]

@narefyev91 please start working in a PR and then we can test if it causes delays for the user.

[strepanier03]

All good Melvin, PR is started.

[melvin-bot[bot]]

@strepanier03, @parasharrajat, @narefyev91, @aldo-expensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[strepanier03]

Discussion is ongoing on the PR and it looks like we're making progress.

[strepanier03]

Bumped on PR.

[strepanier03]

Update on PR, will be reviewed within the next few hours so we're still moving along here.