IOU - Request Money - Unable to write in field What's this for?

[isagoico]

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:

1. Log in as account B and request money to account C
2. Write in the field "What's this for?"

Expected Result:

User can write information in the field.

Actual Result:

Unable to write information in the field.

Workaround:

Unknown.

Platform:

Where is this issue confirmed?

Web
iOS
Android
Desktop App
Mobile Web ✔️

Version Number: 1.0.69-0

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

Notes/Photos/Videos: Any additional supporting documentation

Bug5114676_15.06.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

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

[parasharrajat]

Damn, Safari always has some problem. I can confirm that this works absolutely fine on chrome M-web. And it seems a regression from #3193

[jasperhuangg]

Yup, Apple uses a different CSS rendering engine from Chromium based browsers which can cause issues like this, I can confirm that this doesn't work on Safari on desktop web either.

The fix definitely involves some random CSS finesse.

@parasharrajat Since you submitted that other PR, do you have any ideas as to what might have broke this?

[roryabraham]

I can confirm that manually changing the css property -webkit-user-select: none to -webkit-user-select: text fixes the problem. However, giving the textInput style the property userSelect: 'text' does not seem to work. For some reason the property is overridden:

I also doubt we'll be able to open an issue in react-native-web, because he will probably close it since we are not on the latest package version.

[roryabraham]

It's not pretty, but I've found a solution.

[roryabraham]

Verified that this is fixed on staging, checking it off the list