IOU - Unable to erase the first digit in BNP and Next button is disabled

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Log in App with any account
Press green + fab button
Select request money / send money or split bill
Enter the amount and try to delete it

Expected Result:

The amount can be deleted without any problem.

Actual Result:

Unable delete first digit and Next button is disabled in request money / send money /split bill

Workaround:

unknown

Platform:

Where is this issue occurring?

iOS
Android
Mobile Web

Version Number: v1.1.74-1

Reproducible in staging?: Y

Reproducible in production?: N

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Bug5601704_Record_2022-06-08-21-36-37_4f9154176b47c00da84e32064abf1c48.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause internal team

Slack conversation:

View all open jobs on GitHub

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

@amyevans

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

@mdneyazahmad

cc @mdneyazahmad and @parasharrajat
Updated: you all good @mdneyazahmad , sorry for the ping, it was different PR :)

it seems like this must be related to the Localize currency PR which refactored the page a bit as well. What's odd to me is that the production version is fine and the PR which added the blurOnSubmit prop is not causing it either, I tested that.

@mountiny

@mountiny did you try reverting the PR and see if that is really causing it? I tested this during PR review but I will look again to confirm this.

I tried reverting this PR and it does not cause it, even without it the problem occurs.

I havent tried reverting this PR because I confirmed it is not reproducible in production and that one is already in production.

@amyevans

@amyevans and @parasharrajat Double-confirmed that reverting the #9351 does not fix this problem, I played around a bit more and I could not find what directly from the PR which is in production could cause this, but also I cant see anything in the current staging release which would touch this 😬

Further investigation will be needed.

@mountiny

Okay, definitely appreciate the investigation you've done @mountiny! I'm taking a look now as well

I have stopped my VM etc, but the only other PR which is distantly related to this could be this as there are some changes to the BaseTextInput which is used in this problem underneath. I would try to revert that PR locally and test if it prevails.

@luacmartins

Great suggestion - reverting #9056 locally does indeed fix the issue. This commit changing the BaseTextInput is the source (cc @luacmartins)

Proposal:
The issue here is that the this.props.value passed down to BaseTextInput is regarded as falsey for an empty string. This causes the second condition on Line 68 to be true since the value of inputValue matches the state value.

App/src/components/TextInput/BaseTextInput.js

Lines 66 to 70 in 9dfa7e4

    
           // Only update when value prop is provided 
        
           const inputValue = this.props.value || this.input.value; 
        
           if (_.isEmpty(inputValue) || this.state.value === inputValue) { 
        
               return; 
        
           }

The solution seems to as simple as handling the empty string in the prop value separately.

 componentDidUpdate() {
        // Activate or deactivate the label when value is changed programmatically from outside
        // Only update when value prop is provided
        const inputValue = this.props.value || this.input.value;

        if (_.isEmpty(inputValue) || (this.state.value === inputValue && _.isEmpty(this.props.value))) {
            return;
        }

        if (inputValue === '' || _.isEmpty(this.props.value)) {
            this.input.clear();
        }

        if (_.isEmpty(this.props.value)) {
            this.deactivateLabel();
            // eslint-disable-next-line react/no-did-update-set-state
            this.setState({value: this.props.value});
            return;
        }

        // eslint-disable-next-line react/no-did-update-set-state
        this.setState({value: inputValue});
        this.input.setNativeProps({text: inputValue});

        // In some cases, When the value prop is empty, it is not properly updated on the TextInput due to its uncontrolled nature, thus manually clearing the TextInput.


        if (inputValue) {
            this.activateLabel();
        } else if (!this.state.isFocused) {
            this.deactivateLabel();
        }
    }

PR: #9367 (comment)

Put up a fix here

@sig5

Sorry @sig5, but we will fix this one internally. Thanks for the interest though!

Fixed, nice work!

Navigation Menu

Repository navigation

IOU - Unable to erase the first digit in BNP and Next button is disabled #9362

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	// Only update when value prop is provided
	const inputValue = this.props.value \|\| this.input.value;
	if (_.isEmpty(inputValue) \|\| this.state.value === inputValue) {
	return;
	}

IOU - Unable to erase the first digit in BNP and Next button is disabled #9362

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Activity

OSBotify commented on Jun 8, 2022

melvin-bot commented on Jun 8, 2022

mountiny commented on Jun 8, 2022

parasharrajat commented on Jun 8, 2022

mountiny commented on Jun 8, 2022

mountiny commented on Jun 8, 2022

amyevans commented on Jun 8, 2022

mountiny commented on Jun 8, 2022

amyevans commented on Jun 8, 2022

sig5 commented on Jun 9, 2022

luacmartins commented on Jun 9, 2022

luacmartins commented on Jun 9, 2022

mountiny commented on Jun 9, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions