Clearing TextInput native value on Android

[gitsad]

• I have reviewed the TextInput documentation and Direct Manipulation documentation
• I have searched 399 11948
• I am using the latest version of react-native(https://facebook.github.io/react-native/)

I have tried every way to clear input buffer on Android but every attemp failed. After clearing the input, on new typed letter the last word of cleared sentence is appearing. For instance: I wrote foo foo and clear that one. After that when I will try type again without hiding the native keyboard for example react I would receive fooreact.

Environment

OS: macOS High Sierra 10.13.4
Node: 8.9.0
Yarn: 1.5.1
npm: 5.5.1
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.52.0 => 0.55.0

Steps to Reproduce

Because of different approaches I have finished with something like that:

const SMessageInput = styled.TextInput`
    width: 100%;
    background-color: ${COLOR.WHITE};
    height: 40px;
    padding: 10px;
`;

class MessageInput extends React.Component {
    state = {
        value: '',
    };

    componentWillReceiveProps(newProps) {
        console.log(this.messageInput.root.isFocused());
        this.messageInput.root.setNativeProps({ text: '' });
        this.messageInput.root.clear();
        if(this.messageInput && this.props.input.value && newProps.input.value === '') {
            this.setState({
                value: '',
            }, () => console.log(this.state));
        } else {
            this.setState({
                value: newProps.input.value,
            }, () => console.log(this.state));
        }
    }

    render() {
        return(
            <SMessageInput
                clearButtonMode="always"
                autoCapitalize="none"
                clearTextOnFocus
                spellCheck={false}
                onEndEditing={(data) => console.log(data, 'on end editing')}
                blurOnSubmit
                value={this.state.value}
                autoCorrect={false}
                ref={component => this.messageInput = component}
                underlineColorAndroid="transparent"
                {...this.props}
                onChangeText={(text) => this.props.input.onChange(text)}
            />
        );
    }
};

I also use redux-form to manage input data that's why componentWillReceiveProps is used.

Expected Behavior

Should type without cleared last word of sentence prefix.

Actual Behavior

Receiving last word of cleared sentence as prefix before every new value. Everything works fine when after clearing blur function is executed or manually hide the native keyboard. Then typed new value is without last word of cleared sentence as prefix.

[react-native-bot]

Thanks for posting this! It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

Thank you for your contributions.

[gitsad]

I have updated react-native version to the latest and update everything in this post. Could anyone help with that and maybe provide some workaround to clear input completely on Android? Every help would be appreciated.

[gitsad]

Ok, after some digging again on the Internet, I've found other related pull request #12462 but it seems this bug still exists 😞 and also I have found workaround based on another module https://github.com/nikolaiwarner/react-native-text-input-reset 👍

[react-native-bot]

It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

[gitsad]

yes

[vrgimael]

Hey, we're having this issue too here but only on the Galaxy S8 and not on any other other of our test devices. What phone are you using?

Thanks

[gitsad]

Samsung Galaxy A5 2016

[tranvannhat]

samsung keyboard all device, same error!

[FLGMwt]

Seeing this on Galaxy J7, Samsung S6, Samsung S8, & Samsung S9 at least.

[kennethlynne]

Still an issue on slow devices even using react-native 0.55.

[ginccc]

Reproducable on my HTC 10

[zvs001]

I also see this bug on android 6.0.
ReactNative version: "^0.57.4" react: "16.6.0-alpha.8af6728"
Steps to reproduce:

enter 'a' // => 'a'
enter 'b' // => 'ab'
clear state/ref // => ''
enter 'c' // => 'abc'

I know that we receive wrong values from Android sources: (last step)

console.log('_onTextInput before',event.nativeEvent.previousText) // => ''
console.log('_onTextInput current', event.nativeEvent.text) // => 'abc'

It works correctly only when I do Keybord.dissmiss() (unfocus)

Any new state manipulation append new value to the end

[AlexanderPinkerton]

Still an issue on a samsung s7 and s8 @ "react-native": "0.55.3"

[brianmak3]

There is a react-native module to solve that https://www.npmjs.com/package/react-native-text-input-reset and make sure to import findNodeHandle from react-native

[Salakar]

👋 hey all, there was a PR for this to address the issue in React Native specifically #12462 - but the PR went stale due to lack of feedback from the author and others, see this comment.

I'm going to close this issue given that there is a third-party workaround for now (as mentioned above) and that the PR above can be re-looked at (if someone can volunteer to do so ❤️).

Thank you