[HOLD for payment 2022-12-20] [$8000] iOS Safari - Blue text selection persists in the compose box even after message is sent @metehanozyurt

kbecciv commented 2 years ago

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:

In iOS Settings, Go to General > Keyboard and enable autocorrection

Go to https://new.expensify.com on Safari iOS
Log in with any account and select any chat
Enter incorrectly spelled word in the compose box and let the autocorrection warn you with the blue text selection.
Send the message

Expected Result:

Compose box should be cleared and empty blue selection shouldn't persist.

Actual Result:

Blue text selection still exist.

Workaround:

Unknown

Platform:

Where is this issue occurring?

Mobile Web (safari)

Version Number: 1.1.92.0 (Matt A retested 8/26/22)

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): n/a

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

Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/93399543/162746866-ab9925a0-99c9-4f8f-b63b-2c0601647649.mp4

https://user-images.githubusercontent.com/93399543/162746890-ad84201d-c88b-4bba-9ae4-7d2210b4f1ef.mp4

Expensify/Expensify Issue URL:

Issue reported by: @metehanozyurt

Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1648452635209129

View all open jobs on GitHub

parasharrajat commented 1 year ago

ok, Please report it on Slack then. But it is very likely that both of those will be fixed with single solution.

aneequeahmad commented 1 year ago

@parasharrajat is this bug about the blue highlight(blue border-color) on text input after the message is sent ? I still dont understand the bug. It is on all platforms. Please help me understand the bug.

parasharrajat commented 1 year ago

It must be clear from the above discussion. But yeah the issue is that the blue highlighted color is left on the composer after the message is sent.

This affects Mweb. There is another issue with iOS but also it remains in text input with the auto-correct word in iOS (app) https://github.com/Expensify/App/issues/8592#issuecomment-1152926071

MonilBhavsar commented 1 year ago

Making it Monthly so we cap the price of this issue https://expensify.slack.com/archives/C01SKUP7QR0/p1653671315618679 @arielgreen

dhairyasenjaliya commented 1 year ago

Proposal

Root Cause

hello since I was debugging this issue I found out that this issue is mainly caused because we have added the mouseDown event ( e.preventDefault() ) in send button in order to keep the focus on text input even after the message is sent, preventDefault method will stop all the default event for text input and keeps keyboard open, although we do clear the text values from text input when spellchecker is enabled iOS keeps the text values in suggestion and simple .clear() is not being able to clear from root (suggestion) for iOS, in order to reset the values along with suggestion we need to force update text input in order to actual reset text input with the suggestion also keeping the focus on

mouseDown Event

https://github.com/Expensify/App/blob/84f6bbe72702621e85f172a3e2e168728ab4f1e5/src/pages/home/report/ReportActionCompose.js#L656

Solution

Safari Mobile

In order to solve this issue we need to add a key property to the composer for safari and update this key only when we press send button this will force update the text input with reset text + clear suggestions from previously sent message and will remove blue opacity as expected while keeping focus and keyboard open

The following changes: only in index.js (web) https://github.com/Expensify/App/blob/84f6bbe72702621e85f172a3e2e168728ab4f1e5/src/components/Composer/index.js#L123-130

From

this.state = {
        numberOfLines: 1,
        selection: {
            start: initialValue.length,
            end: initialValue.length,
        },
    };

To

this.state = {
        numberOfLines: 1,
        selection: {
            start: initialValue.length,
            end: initialValue.length,
        },
        keyUpdate: false,
    };

https://github.com/Expensify/App/blob/84f6bbe72702621e85f172a3e2e168728ab4f1e5/src/components/Composer/index.js#L161

From

    if (!prevProps.shouldClear && this.props.shouldClear) {
        this.textInput.clear();
        // eslint-disable-next-line react/no-did-update-set-state
        this.setState({numberOfLines: 1});
        this.props.onClear();
    }

To

       if (!prevProps.shouldClear && this.props.shouldClear) {
        // eslint-disable-next-line react/no-did-update-set-state
        this.setState({
            numberOfLines: 1,
            // eslint-disable-next-line react/no-access-state-in-setstate
            keyUpdate: !this.state.keyUpdate,    // key is updated only when we textinput has shouldClear true
        }, () => {
            this.textInput.clear();
            this.props.onClear();
        });
    }

https://github.com/Expensify/App/blob/84f6bbe72702621e85f172a3e2e168728ab4f1e5/src/components/Composer/index.js#L350

From

   <RNTextInput
            autoComplete="off"
            placeholderTextColor={themeColors.placeholderText}
            ref={el => this.textInput = el}
            selection={this.state.selection}
            onChange={() => {
                this.updateNumberOfLines();
            }}
            onSelectionChange={this.onSelectionChange}
            numberOfLines={this.state.numberOfLines}
            style={propStyles}
            /* eslint-disable-next-line react/jsx-props-no-spreading */
            {...propsWithoutStyles}
            disabled={this.props.isDisabled}
        />

To

    <RNTextInput
            key={this.state.keyUpdate} // key updated only when textinput has shouldClear true
            autoComplete="off"
            placeholderTextColor={themeColors.placeholderText}
            ref={el => this.textInput = el}
            selection={this.state.selection}
            onChange={() => {
                this.updateNumberOfLines();
            }}
            onSelectionChange={this.onSelectionChange}
            numberOfLines={this.state.numberOfLines}
            style={propStyles}
            /* eslint-disable-next-line react/jsx-props-no-spreading */
            {...propsWithoutStyles}
            disabled={this.props.isDisabled}
        />

Result

https://user-images.githubusercontent.com/47522946/176236276-38d6ae0e-1aac-4ff4-a46d-1ab093c8b34f.mp4

Without changes

https://user-images.githubusercontent.com/47522946/176235809-2022458a-e79d-43f0-ad4e-ee1c1883c2ae.mp4

iOS app

To fix the iOS app I suggest my old proposal https://github.com/Expensify/App/issues/8592#issuecomment-1152926071

parasharrajat commented 1 year ago

https://github.com/Expensify/App/issues/8592#issuecomment-1152926071 is doable but https://github.com/Expensify/App/issues/8592#issuecomment-1168985203 will be least preferable. Remounting is not a fix but rather a workaround. It is expensive. It could cause other issues.

Let's wait to see if others have better ideas. Will revise this in a few days.

We can always explore different solutions to keep the focus on text input instead of mousedown.

dhairyasenjaliya commented 1 year ago

yup agreed have tried a lot of different ways to solve this issue, and this solution only fits best in given conditions from my side, sure let's wait for better ideas

arielgreen commented 1 year ago

Reposted, the Upwork job automatically closed. https://www.upwork.com/jobs/~0141f966437b7764e6

dhairyasenjaliya commented 1 year ago

@parasharrajat how about we add a fix with this proposal https://github.com/Expensify/App/issues/8592#issuecomment-1152926071 which will solve 2 issues

blue opacity for iOS (app) (for safari its issue for a long time and yet we have no fix from apple this is the only reference I can find https://stackoverflow.com/questions/18689842/clearing-input-element-in-mobile-safari-with-javascript-does-not-clear-the-ios-a)
If we add a typo in text input it will send a message and remain in text input with auto correct value https://github.com/Expensify/App/issues/10291

note: Edited the correct issue link

parasharrajat commented 1 year ago

I will discuss this @dhairyasenjaliya.

parasharrajat commented 1 year ago

Asked here https://expensify.slack.com/archives/C02NK2DQWUX/p1659432359765889

melvin-bot[bot] commented 1 year ago

⚠️ 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.

parasharrajat commented 1 year ago

Ok, based on the discussion, we decided to break this into two issues. One for iOS and the second for mWeb Safari. Further details will be coming shortly...

Note: this issue was completely focused on safari mWeb since the start.

cc: @MonilBhavsar

dhairyasenjaliya commented 1 year ago

alright, will wait for additional details :)

melvin-bot[bot] commented 1 year ago

⚠️ 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.

melvin-bot[bot] commented 1 year ago

⚠️ 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.

arielgreen commented 1 year ago

@parasharrajat per this comment, what's the status here?

MonilBhavsar commented 1 year ago

@arielgreen, we're still discussing the issue

mallenexpensify commented 1 year ago

Per an internal discussion about monthly labels, bumped back to weekly so we can try to get this fixed soon.

@MonilBhavsar are next best steps to

Update the OP to make it clear this issue is specific to fix mWeb (I'm assuming we'll leave the $4000 price then double price a week after if we don't have any takers
Create a new issue/job focused on iOS. If so, what should the starting price be for that job @MonilBhavsar, @parasharrajat

parasharrajat commented 1 year ago

Create a new issue/job focused on iOS. If so, what should the starting price be for that job

we are already fixing this in some other issue. PR is merged to the best of my knowledge.

mallenexpensify commented 1 year ago

Thanks @parasharrajat, I'll wait for @MonilBhavsar to chime in about next steps too, I'm unsure what we can/should do here.

dhairyasenjaliya commented 1 year ago

Am I eligible to get compensation here? As I have added an initial proposal for solving the iOS blue opacity here https://github.com/Expensify/App/issues/8592#issuecomment-1152926071 which eventually gets resolved recently into my another PR which is to solve auto-correct word iOS app issue as mentioned here https://github.com/Expensify/App/issues/8592#issuecomment-1200671587

As this issue not only focuses on safari mWeb here at the start issue is updated with the iOS app as well https://github.com/Expensify/App/issues/8592#issuecomment-1105019343
I have also added more insight and found the exact root cause here (for safari) https://github.com/Expensify/App/issues/8592#issuecomment-1168985203

mallenexpensify commented 1 year ago

I'm still a bit confused here so bear with me....

@dhairyasenjaliya you fixed https://github.com/Expensify/App/issues/10291 for iOS native app with this PR - https://github.com/Expensify/App/pull/10457 so you'll be compensated for that at the amount stated $250.
This issue (title and OP) has been updated to specifically address iOS Safari. @dhairyasenjaliya , do you anticipate the fix for #10291 will automatically fix this issue as well?
If no to #2 you will need to get an approved proposal from @parasharrajat and @MonilBhavsar for this issue then a PR submitted, approved then deployed to production. If that all works, then you'll be compensated $4k for this issue a week after it's been deployed to production, assuming there are no regressions

dhairyasenjaliya commented 1 year ago

hm @mallenexpensify actually when I started working on this issue, it was affecting both the iOS app and safari then I added a proposal for the iOS app-specific fix here on 11th June https://github.com/Expensify/App/issues/8592#issuecomment-1152926071 but somehow it gets to hold for internal discussion and then one more issue for auto-correct text got issued in git with the same proposal it gets fixed which I posted on 11th June we have added in the latest PR on 19th august

So here my initial proposal got over-ridden with the new issue which I have fixed eventually for this issue

parasharrajat commented 1 year ago

Just a note to add.

app-specific fix here on 11th June https://github.com/Expensify/App/issues/8592#issuecomment-1152926071 but somehow it gets to hold for internal discussion

https://github.com/Expensify/App/issues/8592#issuecomment-1157915558 I replied that we are mainly focusing on mWeb on this issue. Later on, you made a couple of proposals...then after this https://github.com/Expensify/App/issues/8592#issuecomment-1200671587 suggestion, we stopped for internal discussion.

dhairyasenjaliya commented 1 year ago

@parasharrajat here as we can see the title is updated to iOS on 21st April (for both app and mobile safari) https://github.com/Expensify/App/issues/8592#issuecomment-1105019343, on 16th June you mentioned issue only specific to mWeb https://github.com/Expensify/App/issues/8592#issuecomment-1157915558 perhaps you might miss out the issue was already updated for both platform

arielgreen commented 1 year ago

https://expensify.slack.com/archives/C02NK2DQWUX/p1662463071985089?thread_ts=1659432359.765889&cid=C02NK2DQWUX

melvin-bot[bot] commented 1 year ago

⚠️ 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.

melvin-bot[bot] commented 1 year ago

⚠️ 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.

arielgreen commented 1 year ago

@dhairyasenjaliya can you confirm whether you will be submitting a separate proposal for this issue?

dhairyasenjaliya commented 1 year ago

@arielgreen currently I have no separate proposal for this issue, I have added a solution just for the iOS app and did try to solve it for safari as well but no luck, so currently this is open to all contributors

mvtglobally commented 1 year ago

Issue not reproducible during KI retests. (First week)

MonilBhavsar commented 1 year ago

Hmm, I can still see the issue. @mvtglobally could you check and confirm. Thank you! https://user-images.githubusercontent.com/32012005/192542465-90f93b5d-7a26-4f4c-9c54-130ceda7fe4b.MOV

melvin-bot[bot] commented 1 year ago

⚠️ 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.

arielgreen commented 1 year ago

@mvtglobally https://github.com/Expensify/App/issues/8592#issuecomment-1259529887

mvtglobally commented 1 year ago

Issue not reproducible during KI retests. (Second week) @arielgreen @MonilBhavsar
Not sure if we are missing any steps

https://user-images.githubusercontent.com/43995119/195095812-4b627605-75ee-4a19-a6c5-865645b708f0.mp4

https://user-images.githubusercontent.com/43995119/195095770-a1f84eb5-2096-4db6-bd20-9a070211d844.mp4

parasharrajat commented 1 year ago

Yeah, Please test it on Safari Mweb. In videos, you are testing it on iOS.

arielgreen commented 1 year ago

Retested this on Safari mWeb, iOS 16.0 -- no longer reproducible.

MonilBhavsar commented 1 year ago

I'm able to reproduce this. @arielgreen Did you have "autocorrection" setting toggled on?

arielgreen commented 1 year ago

@MonilBhavsar yes I do. Are you on iOS 16?

arielgreen commented 1 year ago

Waiting on confirmation

MonilBhavsar commented 1 year ago

Yes, I'm on iOS 16 too

MonilBhavsar commented 1 year ago

https://user-images.githubusercontent.com/32012005/198282013-86ade9a6-d615-48cf-8b0d-b3845682cee2.MP4

arielgreen commented 1 year ago

Thanks Monil. Confirmed I can reproduce too.

arielgreen commented 1 year ago

Reposted here with an increased price: https://www.upwork.com/jobs/~01a221ac893d2d0e6f

Dev-Abdul-Aleem commented 1 year ago

It seems like this is either related to state management or input field value or css, I just want you guide me about file directory and then I will give you a detailed brief.

melvin-bot[bot] commented 1 year ago

@parasharrajat, @MonilBhavsar, @arielgreen Whoops! This issue is 2 days overdue. Let's get this updated quick!

melvin-bot[bot] commented 1 year ago

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

MonilBhavsar commented 1 year ago

@Dev-Abdul-Aleem you can find the code around compose box in this file https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionCompose.js You can find more instruction about app's directory structure and architecture here - https://github.com/Expensify/App#app-structure-and-conventions If you have any questions, feel free to ask in #expensify-open-source slack channel.

arielgreen commented 1 year ago

@MonilBhavsar heads up we are now keeping E/App issues as daily

Expensify / App