Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
chzhbob opened this issue Apr 13, 2018 · 24 comments

Comments

@chzhbob
Copy link

commented Apr 13, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Apr 13, 2018

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

This comment has been minimized.

Copy link

commented Apr 16, 2018

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

2018-04-17 2 29 10

what's wrong ?Are you guys all OK ?

@charpeni

This comment has been minimized.

Copy link
Collaborator

commented Apr 16, 2018

Thank you for reporting this regression.

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

@xiaomlove

This comment has been minimized.

Copy link

commented Apr 17, 2018

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

@charpeni

This comment has been minimized.

Copy link
Collaborator

commented Apr 17, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Apr 23, 2018

Duplicate of #18272.

@charpeni charpeni closed this Apr 23, 2018

@b-asaf

This comment has been minimized.

Copy link

commented May 31, 2018

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

@Lidanha

This comment has been minimized.

Copy link

commented Jun 20, 2018

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

This comment has been minimized.

Copy link

commented Jun 20, 2018

check this #18272

@Lidanha

This comment has been minimized.

Copy link

commented Jun 21, 2018

Hey,

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

Thanks

@obiwankenoobi

This comment has been minimized.

Copy link

commented Jun 22, 2018

same issue here . Someone found any workaround??

@0paIescent

This comment has been minimized.

Copy link

commented Jul 3, 2018

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

This comment has been minimized.

Copy link

commented Jul 19, 2018

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

@agrawalpulkit

This comment has been minimized.

Copy link

commented Aug 17, 2018

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

@ouabing

This comment has been minimized.

Copy link

commented Aug 28, 2018

Same here

@1pocketaces1

This comment has been minimized.

Copy link

commented Sep 5, 2018

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

@ducpt2

This comment has been minimized.

Copy link

commented Sep 13, 2018

Same issue.

@deden

This comment has been minimized.

Copy link

commented Sep 13, 2018

I'm using this:

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

This comment has been minimized.

Copy link

commented Sep 13, 2018

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

This comment has been minimized.

Copy link

commented Sep 29, 2018

I'm using this:

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

it works

@keithj0nes

This comment has been minimized.

Copy link

commented Oct 15, 2018

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

This comment has been minimized.

Copy link

commented Jan 4, 2019

@keithj0nes Thanks! It work for me.

@uzunF

This comment has been minimized.

Copy link

commented Jan 8, 2019

@keithj0nes it worked for me. Thanks!

@wenkangzhou

This comment has been minimized.

Copy link

commented Mar 5, 2019

0.56 same issue

@facebook facebook locked as resolved and limited conversation to collaborators Apr 23, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.