CODEWITHSUNDEEP
react-native
Zuzana Chlupackova
Zuzana Chlupackova

Reputation: 91

React Native Text Input Clear Doesn't Clear Text

Edit: Upon further inspection it seems that this only happens in Android 6.0.1. Having tried on several devices with 6.0, this was not an issue.

I have a very simple React Native code snippet where I want to clear text in a TextInput. It looks a little bit like this: 

state = {
  v: ""
};

_changeText = v => {
  this.setState({ v });
};

clear = () => {
  this.textInputRef.clear();
}

render() {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={this.clear}>
        <Text> Clear </Text>
      </TouchableOpacity>
      <TextInput
        ref={ref => this.textInputRef = ref}
        value={this.state.v}
        onChangeText={this._changeText}
      />

    </View>
  );
}

Now the behavior I would expect is for this to leave the text input in focus, and clear the text. This is what happens - however, the moment I start typing something on the keyboard, the text I have previously cleared reappears back in the Text Input. Obviously this sort of persistence of the text isn't really desired.

Have any of you ever encountered this issue? Is it a RN bug or is there any way to avoid this behavior without needing to blur the keyboard?

Here's a little snippet to clarify what I mean: https://snack.expo.io/H1S9b5Mpe.

If you start typing, press clear, then carry on typing, the previously shown text will appear before your newly typed text.

Upvotes: 9

Views: 23767

Answers (5)

Anant0810
Anant0810

Reputation: 1

Easy way clear the after you submit is :

<TextInput
    autoCorrect={false}
    style={styles.form}
    value = {this.state.text}
    placeholder={this.props.p_text}
    onChangeText={this.handleChangeText}
    onSubmitEditing={this.handleSubmitEdit}
</TextInput>

and in this.handleSubmitEdit do your logic you want to do and add this line

handleSubmitEdit = () => {
    // do your  code
    this.setState({ text: ''});
}

This will delete the text in component

Upvotes: -1

9patchcoder
9patchcoder

Reputation: 639

Ok this is the code only for clearing the text. You can add your own logic to save it (mabe in another state variable)

   state = {
    typedText:'',
}

render(){
    return(
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <TextInput 
                style={{
                    borderColor:'black',
                    borderWidth:1,
                    width:200,
                    height:50
                }}
                onChangeText={(typedText)=>this.setState({
                    typedText
                })}
                value={this.state.typedText ===" ? null : this.state.typedText}
                onSubmitEditing={()=>{
                    this.setState({
                        typedText:"",
                    })
                }}
            />
        </View>
    )
}

Upvotes: 0

Andr&#233; Abboud
Andr&#233; Abboud

Reputation: 2040

I make this code for clearing TextInput in React Native OnSubmitEditing you can check my snack: https://snack.expo.io/@andreh111/clear-textinput-onsubmitediting

Here is the code:

state = {
    searchInput:'',
    clearInput:false
}

render(){
    return(
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <TextInput 
                style={{
                    borderColor:'black',
                    borderWidth:1,
                    width:200,
                    height:50
                }}
                onChangeText={(searchInput)=>this.setState({
                    searchInput
                })}
                value={!this.state.clearInput ? this.state.searchInput : null}
                onSubmitEditing={()=>{
                    this.setState({
                        clearInput:!this.state.clearInput,
                    })
                }}
            />
        </View>
    )
}

Upvotes: 1

Ally Jr
Ally Jr

Reputation: 1075

I have just finished struggling with this! Its a severe pain!

What i did to solve this (for now), was set the autocorrect prop of the TextInput to false, it seems like this prevents the keyboard from "maintaining a state"

<TextInput 
    autoCorrect={false} 
    ref={component => this.messageInput = component} 
    value={this.state.message} 
    onChangeText={(text) => this.setState({ message: text })}
    placeholder="Type your message here..." />

I tried everything else and it seems like this is what worked. Looking forward to a better solution!

BTW: you should also do this.setState({ message: "" }) so that the value on the input is reset to an empty string.

Upvotes: 7

Artal
Artal

Reputation: 9143

It is possible that it's related to a specific RN version, or as you found out - to a specific OS version. The snippet you have indeed works just fine, can't reproduce this issue on 6.0.0.

Maybe instead of using the clear method of TextInput you can try a different way to clear the text like so: this.setState({v: ""});. It will ensure that the state is in sync and won't hold the previous value.

Upvotes: 0

Related Questions