[Samsung Galaxy S7, S7 Edge, S8] TextInput is breaking spell check red underline indicator for android devices.

[gabcvit]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

For devices which have android's red-underline-indicator spell check functionality turned on, it's possible to see a rather strange behaviour for react native apps.
The red underline appears for wrong words normally for all TextInput component as long as the developer is NOT using the onChangeText prop to update the string value of the state variable which is being used as the value prop of that same component.
By using the onChangeText functionality to update the string value being typed in the TextInput component, the red underline indicator disappears right after, not following the standards set by the user on android's main settings.

This is currently happening on Samsung android devices S7, S7 Edge and S8 (as stated in the issue #15590 (comment) as well). Possibly this could be an issue for other android devices as well, although I don't have more devices to test this.

.gif showing the behaviour on a Samsung Galaxy S7 Edge (please note how the red underline indicator "flashes" under the word once it's finished being typed. This doesn't happen on other apps in this same device):

React Native version:

System:
OS: macOS 10.15.6
CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
Memory: 806.82 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.14.2 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
Android SDK:
API Levels: 22, 23, 24, 25, 26, 27, 28, 29
Build Tools: 24.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.0, 26.0.2, 27.0.3, 28.0.3, 29.0.2
System Images: a...pis | Google APIs ARM EABI v7a Syste..., a...google_apis | Google APIs Intel x86 Atom Sys..., a...s_playstore | Google Play Intel x86 Atom Sys..., a...google_apis | Google APIs Intel x86 Atom Sys...
Android NDK: Not Found
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 12.0/12A7209 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_131 - /usr/bin/javac
Python: 2.7.15 - /usr/local/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.3 => 0.63.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Clone the repository I created to reproduce the code: https://github.com/gabcvit/ReactNativeTextInputBugExample
2. Install all dependencies (just like any react-native project)
3. Connect an android device to your computer and make sure that this device has the spell check red underline indicator turned ON on the device's settings (in my case I'm using a Samsung Galaxy S7 Edge running android version 8.0.0)
4. Run npm run android on the project folder
5. Once the app is running on your device, type wrong words in a sequence. It's possible to see that the red underline indicator appears after the word is finished being typed and disappears quickly right after.

Steps to illustrate how this is being caused by the onChangeText prop:
6. Now comment out the lines 56 and 57 of the App.js file, namely these ones:

https://github.com/gabcvit/ReactNativeTextInputBugExample/blob/f51923654cbcd92b227e7b28e03d1b2f3a9cfba8/App.js#L56

https://github.com/gabcvit/ReactNativeTextInputBugExample/blob/f51923654cbcd92b227e7b28e03d1b2f3a9cfba8/App.js#L57

7. Notice that the wrong words being typed now show a persistent and reliable red underline.

Expected Results

The app should always show a red underline indicator for grammatically incorrect words, if this is the configuration set in the device's settings. Regardless if the developer is using the prop onChangeText to make changes in the value prop or not.

Snack, code example, screenshot, or link to a repository:

My own repository created to expose this behaviour: https://github.com/gabcvit/ReactNativeTextInputBugExample . To create this repository I simply wrote react-native init NameOfProject and edited the App.js file, so this should not be difficult to reproduce.

[Arnoldicus]

is this bug will be fixed in near future?

[LiliShust]

Hello, this is an important feature for my app to have incorrect words underlined, is this going to be fixed and when?

[gabcvit]

Good question... As far as I know my issue report was just politely ignored 😅

[fabOnReact]

I read the issue but could not understand the problem. Thanks for reporting

[LiliShust]

@fabriziobertoglio1987 in short, the problem is: the red underline indicator disappears right after you start a new word, not following the standards set by the user on android's main settings.
ER: red underline highlights the word constantly (unless the mistake is corrected).

[fabOnReact]

@LiliShust thanks, but does not reproduce in both API 26 and API 30. I tested in today master branch. Thanks ☮️

CLICK TO OPEN TESTS RESULTS

API 30
testcase_2021-02-26_172021.mp4

API 26
testcase_2021-02-26_172728.mp4

[Arnoldicus]

@LiliShust thanks, but does not reproduce in both API 26 and API 30. I tested in today master branch. Thanks ☮️

CLICK TO OPEN TESTS RESULTS

The red underline appears for wrong words normally for all TextInput component as long as the developer is NOT using the onChangeText prop to update the string value of the state variable which is being used as the value prop of that same component.
By using the onChangeText functionality to update the string value being typed in the TextInput component, the red underline indicator disappears right after, not following the standards set by the user on android's main settings.

[LiliShust]

@fabriziobertoglio1987 please pay attention to this step in the bug description:
The red underline appears for wrong words normally for all TextInput component as long as the developer is NOT using the onChangeText prop to update the string value of the state variable which is being used as the value prop of that same component.
By using the onChangeText functionality to update the string value being typed in the TextInput component, the red underline indicator disappears right after, not following the standards set by the user on android's main settings.

[fabOnReact]

added the following example and still can not reproduce. Please provide minimum reproducible example to test and fix this issue. The example is a simplified version of https://github.com/gabcvit/ReactNativeTextInputBugExample/blob/main/App.js Thanks a lot 🙏 ☮️

class RewriteExample extends React.Component<$FlowFixMeProps, any> {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }
  render() {
    return (
      <View style={styles.rewriteContainer}>
        <TextInput
          placeholder={"Type text here"}
          returnKeyType={'done'}
          clearButtonMode="always"
          value={this.state.value}
          onChangeText={(text) => {this.setState({value: text})}}
          onSubmitEditing={() => {Keyboard.dismiss()}}
        />
      </View>
    );
  }
}

CLICK TO OPEN TESTS RESULTS

AFTER
2021-03-03.18-06-14.mp4

[LiliShust]

@fabriziobertoglio1987 thanks, we know the problem is not reproducing on the simulators. As stated by author of this ticket, it occurs on some specific devices: Samsung android devices S7, S7 Edge and S8 (the issue #15590 also states this). Author gave really specific steps to reproduce the problem and attached a video reference. But it seems like it's unnoticed. Have you checked @gabcvit's comment on 28 Oct 2020 to have the whole image of the issue?

[fabOnReact]

@LiliShust @gabcvit please update the title of the issue including Samsung S7 in the title. Contributors that don't have that device will skip this issue and not loose time. We have 1100 issues and we are trying to fix them all 😃 🙏 ☮️

[LiliShust]

I can not edit the title. I am not the one who created the issue

[gabcvit]

Hi everyone, thank you very much for all the effort you've put into this task! Specially @LiliShust for pointing out the steps I wrote a few months ago and @fabriziobertoglio1987 for trying to reproduce it!

I really appreciate it! I'm keeping up with the development of this issue by email too, as it would still be interesting for me to know what could be causing this 😄

I've just updated the title of my issue report to state Samsung Galaxy S7, S7 Edge and S8, please let me know if it's clear enough for Contributors, or if I need to write it in a different standard.

[gabcvit]

Sorry for spamming the thread, forgot to insert the missing S for all version numbers 😅 hope you all didn't get an email for every change I did.

[mahadevsempires]

same issue with iPad Pro (12.9-inch) 5th gen - iOS 15.2

It is working for some TextInput and not working for some. It is related to onTextChange. Not sure how to solve.

[fabOnReact]

does the issue persist after updating your OneUI to the latest version? https://www.google.com/search?q=how+to+update+OneUI

The issue could be caused by the Samsung Keyboard, which is part of the One UI Project. It is a private fork of Android AOSP, and issues are reported directly to them

https://www.samsung.com/ae/support/mobile-devices/how-to-send-error-report-in-your-galaxy-device/

[lunaleaps]

Closing issue as we're addressing in #35590 (comment)