TextInput clear() doesn't work at v0.54.2

[chzhbob]

When I use TextInput as a uncontrolled component, clear() method doesn't work at all. Then I try the version at V0.52.2, everything goes fine

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.9.4
Yarn: 0.24.6
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: ^0.54.2 => 0.54.2

Steps to Reproduce

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

export default class TextInputDemo extends Component {
    render() {
        return (
            <View style={styles.wrapper}>
                <TextInput
                    ref="demo"
                    style={styles.formInput}
                    placeholder="I am placeholder..."
                    onChange={e => {}}
                    returnKeyType="send"
                    onSubmitEditing={() => {
                        this.refs.demo.clear()
                    }}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: '#f7f7f7',
        justifyContent: 'center',
        padding: 30
    },
    formInput: {
        height: 50,
        backgroundColor: '#ffffff'
    }
})

Expected Behavior

Something wrong with TextInput re-implement?

[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.

[xiaomlove]

same issue to me. I just init an entire new React Native app, no require any other third package.

Environment

Environment:
  OS: macOS High Sierra 10.13.4
  Node: 9.10.1
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.3 Build version 9E145
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.2 => 0.55.2

the code in App.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  doClear() {
    console.log("doClear...");
    let textInput = this.refs["textInput"];
    console.log(textInput);
    textInput.clear();
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        <TextInput ref="textInput" style={{height: 40, width: "100%", margin: 20, padding: 10, backgroundColor: "#eee"}} />
        <Button title="clear" onPress={() => this.doClear()} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

what's wrong ?Are you guys all OK ?

[charpeni]

Thank you for reporting this regression.

Here's a snack: https://snack.expo.io/@charpeni/textinput-regression

[xiaomlove]

Have you ever run your code ? Whether in Expo App or IOS Simulator, it doesn't work. @charpeni

[charpeni]

That's the point, I've provided a reproducible example on Snack instead of plain text.

You can run this Snack on an older expo SDK version, everything will be fine.

[charpeni]

Duplicate of #18272.

[b-asaf]

@charpeni,
on RN version 0.55.4
The defect is still reproduce. clear does not work in iOS

[Lidanha]

Hey guys, any workaround for this issue? I need to clear a text input in iOS (in Android it seems to be working.

I tried textInput.clear() and textInput.setNativeProps({ text: '' }); and both does not work on iOS

[b-asaf]

check this #18272

[Lidanha]

Hey,

Couldn't find anything that works there. Can you recommend anything specifically?

Thanks

[0paIescent]

Try this.refs[textInput]._root.clear(). I'm using Native Base's Input component and I realized the clear() function got put into the _root object. Hopefully that fixes it for some people.

[pcoltau]

I have the same issue, and _root is undefined on the TextInput.

[agrawalpulkit]

Add Ref. to your textInput Like:
<TextInput ref={input => { this.textInput = input }} />
And Call this.textInput.clear() to clear your input field.

[ouabing]

Same here

[1pocketaces1]

I am having the same issue as .clear() and setState({input: ''}) do not work.

[ducpt2]

Same issue.

[deden]

I'm using this:

if (Platform.OS === 'ios') this. textInputRef.setNativeProps({ text: ' ' });
setTimeout(() => { this. textInputRef.setNativeProps({ text: '' }) }, 5)

[1pocketaces1]

The above mentioned solutions with setTimeout() have not worked for me, but what I used to fix this issue is to create the TextInput inside render() but before return() and assign it to a variable. Then I conditionally show it in my JSX if the form is showing or not.
This has the effect that when the form is closed, the textInput components actually unmount on the next render and then remount when the form shows again, which gives new clean input fields.

For those who need the form to clear after Submit but stay on the screen, I would recommend a function that changes the form condition from shown to not shown and back to shown again across 10ms or something so that it is virtually indistinguishable to the user.

I guess the above solutions work for some people, but this will guarantee to give cleared input fields for everybody still having the issue

[oblank]

I'm using this:

if (Platform.OS === 'ios') this. textInputRef.setNativeProps({ text: ' ' });
setTimeout(() => { this. textInputRef.setNativeProps({ text: '' }) }, 5)

it works

[keithj0nes]

I had this problem too. But found out that using value={this.state.myValue} will clear it.

<TextInput 
    onChangeText={myValue => this.setState({myValue})}
    onSubmitEditing={this.handleSubmit}
    value={this.state.myValue}
/>

handleSubmit = () => {
    this.setState({myValue ''})
}

[XibHe]

@keithj0nes Thanks! It work for me.

[furkanuzundev]

@keithj0nes it worked for me. Thanks!

[wenkangzhou]

0.56 same issue