CSS Hack to fix safari text inputs

[roryabraham]

Details

For some reason the userSelect property is being overridden by react-native-web internals for text inputs. This CSS hack solves the problem and doesn't seem to introduce any others.

We should really consider filing a bug report in react-native-web, unless I'm gravely misunderstanding why TextInput components should by default (and in fact, in all cases) have the property user-select: none.

Fixed Issues

Fixes #3598

Tests / QA Steps

1. Run the app in Safari
2. Hit the + icon in the ReportActionCompose and choose Request Money/Split Bill.
3. Enter an amount for the request, and hit Next
4. Verify that you can enter a value into the text input above "What's it for?"

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Still working on Chrome:

Also working on Safari:

Mobile Web

Desktop

iOS

Android

[parasharrajat]

Awesome Find. I believe it has been fixed in the new version. @Jag96 here is trying to update the lib. So maybe, in that case, we don't need it at all.

[roryabraham]

I believe it has been fixed in the new version.

Did you see something about this in the changelog?

[parasharrajat]

I haven't checked but It seems a major problem that I think should have been addressed. Also, we saw one more bug which was fixed in the new version on RN-web so I guessed, but still a belief. 😄

[roryabraham]

Okay, well @Jag96 if/when we upgrade RNW let's try to remember to check if we can remove this CSS hack.

[roryabraham]

I haven't checked but It seems a major problem that I think should have been addressed

It might not have consistent reproduction ... maybe it has to do with the TextInput being nested in a ScrollView?

[OSBotify]

🚀 Deployed to staging in version: 1.0.69-2🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[rushatgabhane]

In my testing, updating React-Native-Web to 0.17.0 (latest) doesn't fix this issue.
Platform iOS Safari.

[OSBotify]

🚀 Deployed to production in version: 1.0.73-3🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅