Android autocomplete bug

[Noitidart]

I posted this same question on Stackoverflow, but thought i would share here too as this is a super hot bug for me right now. I can't figure it out. It's been like 6 hours I've been working on this bug.

On SO - https://stackoverflow.com/q/49119413/1828637

Question Description

This is possibly just an Android 6.0 bug. I tested the snack below in Android 5.1.1 and Android 7.0 and it didn't happen there.

I am trying to do an autocomplete whenever the user types "@". I successfully do this, however once I backspace a couple times, the value on the native side becomes some value I never had before. I have simplified the case to this code below:

Please try the snack here - https://snack.expo.io/@noitsnack/what-the-heck---autocomplete-then-backspace-bug OR copy and paste the code into a new react-native init project. I tested in RN 0.51 and RN 0.54.

1. Please then type Hi @
2. You will see it autocompletes to Hi @foobar.
3. Then backspace once and it properly is now Hi @fooba.
4. Backspace again, and now it is Hi @foHi (this is the bug, it should be Hi @foob)

This is a controlled input. I have no idea why it's turning into Hi @foHi on second backspace. If I blur then come after step 3 it doesn't come back.

I tried on two other devices, Android 7.0 and Android 5.1.1, and this bug was not there. It only happened on my Android 6.0. I think this is a OS dependent bug. Does anyone have ideas on what is actually going on? That will help me on how to around this on all devices.

Is this really a bug on RN side?

I recorded a screencast of this super odd behavior here in HD: https://gfycat.com/RectangularAltruisticEuropeanfiresalamander

Here is a gif:

The code (copied from the expo snack):

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native'

class FieldMentionable extends Component<Props, State> {
    state = {
        value: ''
    }

    render() {
        const { value } = this.state;

        return <TextInput onChange={this.handleChange} value={value} multiline />
    }

    handleChange = ({ nativeEvent:{ text }}) => {
        const { value } = this.state;

        if (text.endsWith(' @')) this.setState(() => ({ value:text + 'foobar' }));
        else this.setState(() => ({ value:text }));
    }

    handleRef = el => this.input = el;
}


export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <FieldMentionable />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 100,
        backgroundColor: '#F5FCFF',
    }
});

How can I get started?

I posted a"Snack" demo above. The code can be copy and pasted into a react-native init project too. This bug happens on some Androids, but not all, it seems.

Sincerest gratitude if you can help me solve this. Been at it for 6 hours+ now! And actually my sincerest gratitude for even offering, I got your email asking me if you can help. That is so awesome of you!

[spencercarli]

Hey @Noitidart!

Great question - you made it really easy to get up an running.

This definitely seems like a React Native + Android 6.0 bug but, with that said, I think there's a workaround.

And that's using Direct Manipulation.

What I think is happening is that the bridge is struggling to keep up and is giving you weird results. By using Direct Manipulation you can skip over any delay related to state and directly change the value of the input.

I took your example and modified it. Notice how I set a ref to the input and call this.input.setNativeProps in the handleChange function. With this method we're tracking the result in state, so we can do whatever we want with the value, but directly setting the text value.

I remember in the earlier days of React Native this being a very common problem and having to use direct manipulation a lot. There have been some improvements but it seems this slipped through the cracks.

I don't have a device running Android 6.0 nearby so I wasn't able to test that logic on Android, but let me know if it works or not!

[Noitidart]

Thanks so much @spencercarli for even looking at this! I really appreciate it, and the comments on how I made it easy.

I tried the example but still same thing. :(

[Noitidart]

I think maybe we'll leave this "hanging" or "closed" - until new developments/solutions arise as I use this in "production" haha. Right now after typing I just have to hope people don't backspace for at least 5 seconds. I noticed after 5 seconds this bug doesnt happen, which is odd because we would think the setNative would have fixed this.

[spencercarli]

If you haven't already I would encourage you to open an issue on the main react-native repo. Your reproductions steps clearly demonstrate a bug on Android 6.0.

Let's leave this open for now. I'd like to revisit this once I've got something with Android 6.0

[spencercarli]

Actually, I just realized the nexus 5 I have has android 6.0 on it. I tested out your Snack and everything worked perfectly! Here's a video (couldn't figure out how to do a screen recording on android lol)

I wonder what could be causing the delay on your device? It seems to be a device specific issue.

[Noitidart]

Oh my gosh you're too kind. Thank you so much for this.

How to record

To record on Android we do adb shell screenrecord /sdcard/test.mp4, it will hang in terminal but its recording. It records max for like 4min, and silently puts a recording into the main folder. We can stop recording early by doing a Ctrl + C.

Is there something equally easy to record in iOS?

Re bug

Wow that is sooo weird. Thanks sooo much for such detailed video. I just tested in my device again and my mind is absolutely boggled. I have no idea why it's happening to me. How is this possible haha. I'm so confused. Is this not a bug? What should I do? :(

[Noitidart]

Reproduction is the key. If no one else can reproduce it, its not a bug. My mind is absolutely blown. I restarted device, chanaged battries, all kinds of weird physical stuff. Mediated. I still have this issue!! hahaha I'm going nuts.

[spencercarli]

Thanks for the recording tips!

What kind of android device are you running on? It could just be some weirdness on that model.

I wonder if you could check out Reactiflux to see if someone could try it? There's a lot of people there.

[Noitidart]

Oops excuse the delay please. I have a deadline at work on March 30th/31st and have been so out of this world busy.

My Android specs:
Name: LG Escape 3
Model #: LG-K373
Android version: 6.0
Android security patch level: 2018-02-01
Kernel Version: 3.10.49
Build number: MRA58k
Software version: K37320r

I'll make sure to check with Reactiflux very soon after my work please (hopefully in a week).

Oh also I figured out a cool CLI way to record iOS device:

xcrun simctl io booted recordVideo --type=mp4 screen.mp4

[Noitidart]

Wow same thing happening with just regular plain component. I set blurOnSubmit to false. And when hit "Done" it clears the component. However on next typing it brings back the old characters.

my device specs:

My Android specs:
Name: LG Escape 3
Model #: LG-K373
Android version: 6.0
Android security patch level: 2018-02-01
Kernel Version: 3.10.49
Build number: MRA58k

• Snack - https://snack.expo.io/@noitsnack/android-bug:-left-over-characters-on-clear-controlled-component
• Video HD - https://gfycat.com/FavorableAgileCrocodileskink
• Video gif -

I'm posting on Reactiflux now with this even more simpler test case.

[spencercarli]

Weird! So definitely seems to be a bug in RN.

[Noitidart]

Thanks for allowing me to keep this open. It gives me hope. Any time I ever post anything on RN issues its always instantly closed or closed within a week or so, it sucks.

I did find this issue on RN in iOS which I think is similar - facebook/react-native#18278 - I posted a comment there saying I have similar on Android, and linked here. No one showed interest. I have no idea how new bugs on RN get discovered and fixed. It seems so many real bugs are just closed.

[Noitidart]

I think I simplified it down to finding the problem. It's the "controlled" part is buggy. I got a super simple example, I'm going to try to post it on react-native bugs. Maybe if possible if you could help me learn how to do that right, as in past they always close my topics. That would be such a huge help if you could help me see this bug through on react-native issues and a perfect learning! I think posting on that repo is also a skill to learn as a RN developer. :)

Super simplified example expo - https://snack.expo.io/@noitsnack/controlled-textinput-issue-on-some-androids

It's code is super duper simple:

import React, { Component } from 'react';
import { TextInput, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput value="Hello" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: '30%',
    backgroundColor: '#ecf0f1'
  }
});

That's it. Really all we need is <TextInput value="Something here" />.

Here is gif:

I'll start the github issue on react-native and update you please.

[Noitidart]

I created the issue in the react-native issues repo - facebook/react-native#19085

It would be awesome for any guidance/support/teaching you can give to help me see that issue through. :)

[Noitidart]

We got reproduction! - facebook/react-native#19085 (comment)