TextInput onChangeText is called with empty text if maxLength is exceeded on iOS

[andreaspalsson]

Description

If the max length of a controlled TextInput is exceeded on iOS onChangeText will get called with an empty string. We noticed this issue when our users added an emoji as the last character in a TextInput. We only see the issue on iOS, on Android the the emoji can not be added. Since emojis are counted as two chars I'm guessing the emoji is causing the text to have length maxLength+1 and that is causing issues on iOS.

Using an uncontrolled TextInput the emoji is replace with the last character in the screenshot below but keeps it's value.

React Native version:

0.61.4

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create a controlled TextInput with a maxLength
2. Input text until you reach maxLength - 1
3. Add a emoji

Expected Results

Same behaviour as on Android that the emoji is not accepted as input.

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

https://snack.expo.io/8x3dBwzJe

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[andreaspalsson]

Reran the snack it with latest version of Expo v38.0.0 and React Native 0.62.2 and the issue is still there.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

Same issue here...

Screen.Recording.2021-03-19.at.10.09.59.mov

As you can see on video, when I exceed the maximum length of the input it is automatically cleared.
An emoji is equivalent to 2 characters, when my input has 119 (maxLength 120) and I type an emoji it goes to 121 of length and the input is cleared. But if I reach exactly 120 characters it will not happen.

As a workaround I've removed maxLength prop and added the following code to the onChangeText callback:

onChangeText={value => {
    if (value.length <= maxLength) {
        setNewValue(value)
    }
}}

It minimizes the chances of the bug happening but doesn't fix it.

[RishavKumar-3796]

Please resolve this !