[$8000] iOS Safari - Blue text selection persists in the compose box even after message is sent @metehanozyurt

[kbecciv]

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:

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

1. Go to https://new.expensify.com on Safari iOS
2. Log in with any account and select any chat
3. Enter incorrectly spelled word in the compose box and let the autocorrection warn you with the blue text selection.
4. 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

[melvin-bot[bot]]

Triggered auto assignment to @cdraeger11 (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

@cdraeger11 Still overdue 6 days?! Let's take care of this!

[melvin-bot[bot]]

@cdraeger11 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[melvin-bot[bot]]

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

[MonilBhavsar]

Can't seem to reproduce on Safari web, but can reproduce on iOS simulator

[MonilBhavsar]

Asked for confirmation on a PR which I think caused this.

[parasharrajat]

Looked at the issue. Tried a few things to see if those fix it but no luck. I will try more tomorrow.

[melvin-bot[bot]]

@MonilBhavsar Huh... This is 4 days overdue. Who can take care of this?

[MonilBhavsar]

Will get back to this

[MonilBhavsar]

@parasharrajat since this seems like a regression, do you want to give it a try to fix this?

[parasharrajat]

I would be happy to do that but I have been preoccupied with other stuff. I will try to debug this over the weekend and let you know by Monday.

[parasharrajat]

I tried many different approaches to solve the problem. But none of them worked. Basically, the selection length is already 0 so there is no reset. I tried to solve 7798 with a different approach than what I have on the PR but this issue persists.

I suggest exporting this if someone can fix this. My ultimate goal was to keep the spellcheck| autoCorrect behavior and only try to reset the blue highlight.

[mallenexpensify]

@MonilBhavsar , any reason this shouldn't be labeled External?
If it's confirmed to be a regression, let's add it to the RCA list even if we don't know what the offending/root issue or PR is yet.

[MonilBhavsar]

No reason, adding external label now. I'm not sure if we should add it to RCA list as it's not the breaking anything

[melvin-bot[bot]]

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

[arielgreen]

https://www.upwork.com/jobs/~01208db9c91b51fa69

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Current assignee @MonilBhavsar is eligible for the Exported assigner, not assigning anyone new.

[arielgreen]

Price increased

[songlang1994]

Proposal

I believe it's an issue of Safari that we can not fix it on the DOM side.

But if you do need to "fix" this issue, a workaround is disabling the autocorrect feature.

// File: src/components/Composer/index.js

<RNTextInput
  autoComplete="off"
+ autoCorrect={false}          // always disable auto correct
+ autoCorrect={isMobileSafari} // or more precisely
  placeholderTextColor={themeColors.placeholderText}
  ref={el => this.textInput = el}

[parasharrajat]

Thanks for the proposal. But as I said here https://github.com/Expensify/App/issues/8592#issuecomment-1116074045. The ultimate goal should be to fix the issue without disabling autoCorrect.

[songlang1994]

@parasharrajat I've read your comment before I post the proposal. But I misunderstood that you mean the spellCheck prop. Spell checking and auto correcting are two different features.

Let's wait a more appropriate solution.

[melvin-bot[bot]]

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

[mananjadhav]

Awaiting proposals

[arielgreen]

Price increased

[parasharrajat]

@mananjadhav Could you please update the RCA doc to add yourself as the leading person? You are C+ here.

[allroundexperts]

@parasharrajat How about doing a blur on click of send button? Something like:

this.textInput.blur();
setTimeout(() => this.textInput.focus(), 500);

We can also make this Safari iOS specific.

Result: https://user-images.githubusercontent.com/30054992/170832542-ddeacd00-455d-42d6-9b3a-d06b0a1d867c.mp4

[parasharrajat]

We never give consider setTimeout hacks as solutions. But this can be used as last resort.

What is the effect of this change on all platforms? What will be your plan for all the platforms?

[allroundexperts]

@parasharrajat This would be applicable to iOS Safari only. This seems to be a problem with Safari browser itself. We can't really create a fix PR against their repo since it's private.