Possible Android autocomplete error with double backspace (changing the value to include the previous word)

Question

This may just be an Android 6.0 bug. I tested the snacks below in Android 5.1.1 and Android 7.0, and that wasn't there.

I try to autocomplete whenever the user types "@". I do this successfully, however, as soon as I step over a couple of times, the value on the inside will become some value that I have never had. I simplified this case below:

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

• Then enter Hi @
• You will see that it is autofill Hi @foobar.
• Then do the reverse move, and now it is correct Hi @fooba.
• Again back, and now this Hi @foHi(this is a mistake, it should be Hi @foob)

This is a controlled entry. I have no idea why it turns into Hi @foHia second backspace. If I blur, then come after step 3, it will not return.

I tried on two other devices Android 7.0 and Android 5.1.1, and this error was not. This only happened on my Android 6.0. I think this is an OS-specific error. Does anyone have any idea what is really going on? This will help me on how to get around this on all devices.

Is this really a mistake on the RN side?

I recorded a screencast of this behavior here in HD:

https://gfycat.com/RectangularAltruisticEuropeanfiresalamander

Here is the GIF:

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',
    }
});