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

[0.54] TextInput.setNativeProps({text: ''}) no longer works #18272

Closed
benadamstyles opened this issue Mar 8, 2018 · 23 comments

Comments

@benadamstyles
Copy link

commented Mar 8, 2018

Environment

Environment:
  OS:  macOS Sierra 10.12.6
  Node:  8.7.0
  Yarn:  1.3.2
  npm:  5.6.0
  Watchman:  4.7.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.0 => 0.54.0

Expected Behavior

Calling textInputRef.setNativeProps({text: ''}) or textInputRef.clear() clears the text input – this was working in previous versions (before the <Text> rewrite in 0.54).

Actual Behavior

Calling textInputRef.setNativeProps({text: ''}) or textInputRef.clear() does nothing.

Steps to Reproduce

Repro here: https://github.com/Leeds-eBooks/react-native-0.54-text-input-clear-repro

@magicien

This comment has been minimized.

Copy link
Contributor

commented Mar 8, 2018

It's not completed yet, but TextInput.clear() works again with this change (#18278).

@AMHZR

This comment was marked as off-topic.

Copy link

commented Apr 12, 2018

is there any update here.. as i have a serious dependency on this..

@kushal

This comment has been minimized.

Copy link
Contributor

commented Apr 12, 2018

@benadamstyles

This comment has been minimized.

Copy link
Author

commented Apr 16, 2018

@kushal Have you found a way to patch locally without losing your patch whenever you run npm install or yarn?

EDIT: This works beautifully! ds300/patch-package

@pualxiao

This comment has been minimized.

@react-native-bot

This comment was marked as outdated.

Copy link
Collaborator

commented May 15, 2018

Thanks for posting this! 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?

Thank you for your contributions.

@padvlad

This comment has been minimized.

Copy link

commented May 16, 2018

I am using v0.55.3 and I've encountered the same issue. textInputRef.clear() and textInputRef.setNativeProps({text: ''}) only seem to work on Android. On iOS nothing happens.

@x3388638

This comment has been minimized.

Copy link

commented May 30, 2018

v0.55.3
a dirty solution for iOS

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

setTimeout(() => {
	this.textInputRef.setNativeProps({ text: '' });
});
@b-asaf

This comment has been minimized.

Copy link

commented May 31, 2018

@x3388638, @padvlad
textInputRef.clear() and textInputRef.setNativeProps({text: ''}) does not work in RN version 0.55.4 as well

@minhchienwikipedia

This comment has been minimized.

Copy link

commented Jun 8, 2018

I had create new Text Input for fix this bug right now, everybody can use it before RN fix it.
https://github.com/agiletechvn/react-native-text-input-enhance

@datvtwkm

This comment has been minimized.

Copy link

commented Jun 13, 2018

@minhchienwikipedia you are using
clear() {
this.setState({ text: '' });
}
in IOS
Pratically, we don't want to do that because it affects keyboard behavior!

@minhchienwikipedia

This comment has been minimized.

Copy link

commented Jun 14, 2018

@datvtwakumo Can you explain your issue?

@sasayahiromu

This comment has been minimized.

Copy link

commented Jun 15, 2018

@minhchienwikipedia
if using this.setState and value, inputing word is confirmed(?) and can't convert.
It can be used in Engleish, somehow, but handling language which is needed to convert, such as Japanese, it don't work.

@datvtwkm

This comment has been minimized.

Copy link

commented Jun 15, 2018

@sasayahiromu you are right
@minhchienwikipedia one more problem that you don't want to rerender your input component with every setState, right? If you need a default value, there is defaultValue, and with every change, try to not setState, but to send new value elsewhere or debounce listening function so that you do not need to rerender component!

@jaimehing

This comment has been minimized.

Copy link

commented Jun 17, 2018

hi, is there a plan fixing this in v 0.56?

@hramos

This comment has been minimized.

Copy link
Contributor

commented Jun 22, 2018

@jaimehing not at this time. Anything that is not fixed on master right now is unlikely to be part of 0.56.

@bbeckk

This comment has been minimized.

Copy link

commented Jun 24, 2018

Simply unfocusing the textInput solves the problem

<View style={styles.textInputStyle}>

    <TextInput onChangeText={(text) => this.setState({searchText: text}, () => {
                   this.state.searchText.length > 1 ? this._getSearchedData() : null
               })}
               value={this.state.searchText}
               placeholder='Search restaurant or cuisine'
    />

    <TouchableOpacity  onPress={() => {
                    this.setState({searchText: ''}),
                    Keyboard.dismiss()
                }}>
    <Icon name="md-close-circle" style={{color: 'gray', fontSize: 15,}}/>
</TouchableOpacity>

</View>
@Lidanha

This comment has been minimized.

Copy link

commented Jun 25, 2018

@x3388638's solution works well for me.

gnprice added a commit to borisyankov/zulip-mobile that referenced this issue Jun 30, 2018

compose: Split into Android and iOS specific versions.
We want to make the compose box uncontrolled.  Instead of using the
`value` property to change the message input's and topic input's
text, we will call `setNativeProps` on a reference to the underlying
control.

Currently on iOS there is a React Native bug that affects uncontrolled
inputs: facebook/react-native#18272
On the other hand, in order to fix zulip#2589 we're eager to switch to
an uncontrolled input at least on Android, in order to avoid the
(different) underlying React Native bug that causes that.

So for now, as a suboptimal solution, we will support two versions of
the component.  For iOS it will remain unchanged, and we'll modify the
Android version of the file in subsequent commits.

gnprice added a commit to zulip/zulip-mobile that referenced this issue Jun 30, 2018

compose: Split into Android and iOS specific versions.
We want to make the compose box uncontrolled.  Instead of using the
`value` property to change the message input's and topic input's
text, we will call `setNativeProps` on a reference to the underlying
control.

Currently on iOS there is a React Native bug that affects uncontrolled
inputs: facebook/react-native#18272
On the other hand, in order to fix #2589 we're eager to switch to
an uncontrolled input at least on Android, in order to avoid the
(different) underlying React Native bug that causes that.

So for now, as a suboptimal solution, we will support two versions of
the component.  For iOS it will remain unchanged, and we'll modify the
Android version of the file in subsequent commits.
@doublex

This comment was marked as off-topic.

Copy link

commented Jul 4, 2018

+1

@sunr1ze

This comment has been minimized.

Copy link

commented Jul 11, 2018

This works for me

RN v0.55.3

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

With styled-components v3.2.6

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

jackrzhang added a commit to jackrzhang/zulip-mobile that referenced this issue Jul 17, 2018

compose: Split into Android and iOS specific versions.
We want to make the compose box uncontrolled.  Instead of using the
`value` property to change the message input's and topic input's
text, we will call `setNativeProps` on a reference to the underlying
control.

Currently on iOS there is a React Native bug that affects uncontrolled
inputs: facebook/react-native#18272
On the other hand, in order to fix zulip#2589 we're eager to switch to
an uncontrolled input at least on Android, in order to avoid the
(different) underlying React Native bug that causes that.

So for now, as a suboptimal solution, we will support two versions of
the component.  For iOS it will remain unchanged, and we'll modify the
Android version of the file in subsequent commits.
@g00dnatur3

This comment has been minimized.

Copy link

commented Jul 24, 2018

This fix worked for me on all versions of RN with 0.54 - 0.56

textDidChange(text) {
    this.textInput.setNativeProps({text})
}

then you can use textInputRef.clear() no problems...

@tabfed

This comment has been minimized.

Copy link

commented Jul 26, 2018

this.state = {
  current:0,
  value:''
}

//don't set value , change key ,  foreceUpdate
<TextInput key={this.state.current} onChangeText={(e)=>{this.setState({value:e})}}/>

<Button onClick={this.setState({
   current:this.state.current+1
})}/>
@datvtwkm

This comment has been minimized.

Copy link

commented Jul 29, 2018

this hack works for me, please tried this :D
#18767 (comment)

hramos added a commit that referenced this issue Sep 11, 2018

Fix #18272 TextInput.setNativeProps({text: ''}) to work (#18278)
Summary:
Fix #18272. Calling textInputRef.setNativeProps({text: ''}) or textInputRef.clear() should clear the text input.

- All tests of `yarn run test` are passed
- Test with [the sample app](https://github.com/magicien/react-native-textinput-clear).
    - TextInput.clear() and TextInput.setNativeProps({ text: '***' }) worked
    - When clear() or setNativeProps() called, onChange/onChangeText wasn't called
        - Same behavior as react 0.53.0
    - When non-string values are given to `setNativeProps({text: ___})`, its behavior is the same as react 0.53.0.
        - Value Type | Result
          ---------- | ------------
          null       | same as empty string ''
          undefined  | nothing changes
          number     | throw error
          function   | throw error
          object     | throw error
    - When clear() or setNativeProps() called, attributed text keeps the attributes
    - When `value` prop is set, the text can't be changed

- `clear()` doesn't work from the second time
- `setNativeProps({text '***'})` doesn't work from the second time
- Even when `value` prop is set, you can change the text

![ScreenShot_0.54.0](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/0.54.0_test.gif)

- `clear()` works every time
- `setNativeProps({text '****'})` works every time

![ScreenShot_Clear_1](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_1.gif)

![ScreenShot_Clear_2](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_2.gif)

- The text keeps the attributes (font family, size, color, text align)

![ScreenShot_Slider](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/attributed_text_test.gif)

- If `value` prop is set, the text should not be changed

![ScreenShot_Value](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/value_test.gif)

[IOS] [BUGFIX] [TextInput] - Fix TextInput.clear() and TextInput.setNativeProps({text: ''}) to work
Pull Request resolved: #18278

Reviewed By: shergin

Differential Revision: D9692561

Pulled By: hramos

fbshipit-source-id: b7ce8f6740fdf666e71d6a85743331ca4805edcb

gengjiawen added a commit to gengjiawen/react-native that referenced this issue Sep 14, 2018

Fix facebook#18272 TextInput.setNativeProps({text: ''}) to work (face…
…book#18278)

Summary:
Fix facebook#18272. Calling textInputRef.setNativeProps({text: ''}) or textInputRef.clear() should clear the text input.

- All tests of `yarn run test` are passed
- Test with [the sample app](https://github.com/magicien/react-native-textinput-clear).
    - TextInput.clear() and TextInput.setNativeProps({ text: '***' }) worked
    - When clear() or setNativeProps() called, onChange/onChangeText wasn't called
        - Same behavior as react 0.53.0
    - When non-string values are given to `setNativeProps({text: ___})`, its behavior is the same as react 0.53.0.
        - Value Type | Result
          ---------- | ------------
          null       | same as empty string ''
          undefined  | nothing changes
          number     | throw error
          function   | throw error
          object     | throw error
    - When clear() or setNativeProps() called, attributed text keeps the attributes
    - When `value` prop is set, the text can't be changed

- `clear()` doesn't work from the second time
- `setNativeProps({text '***'})` doesn't work from the second time
- Even when `value` prop is set, you can change the text

![ScreenShot_0.54.0](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/0.54.0_test.gif)

- `clear()` works every time
- `setNativeProps({text '****'})` works every time

![ScreenShot_Clear_1](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_1.gif)

![ScreenShot_Clear_2](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_2.gif)

- The text keeps the attributes (font family, size, color, text align)

![ScreenShot_Slider](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/attributed_text_test.gif)

- If `value` prop is set, the text should not be changed

![ScreenShot_Value](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/value_test.gif)

[IOS] [BUGFIX] [TextInput] - Fix TextInput.clear() and TextInput.setNativeProps({text: ''}) to work
Pull Request resolved: facebook#18278

Reviewed By: shergin

Differential Revision: D9692561

Pulled By: hramos

fbshipit-source-id: b7ce8f6740fdf666e71d6a85743331ca4805edcb

aleclarson added a commit to aleclarson/react-native that referenced this issue Sep 16, 2018

Fix facebook#18272 TextInput.setNativeProps({text: ''}) to work (face…
…book#18278)

Summary:
Fix facebook#18272. Calling textInputRef.setNativeProps({text: ''}) or textInputRef.clear() should clear the text input.

- All tests of `yarn run test` are passed
- Test with [the sample app](https://github.com/magicien/react-native-textinput-clear).
    - TextInput.clear() and TextInput.setNativeProps({ text: '***' }) worked
    - When clear() or setNativeProps() called, onChange/onChangeText wasn't called
        - Same behavior as react 0.53.0
    - When non-string values are given to `setNativeProps({text: ___})`, its behavior is the same as react 0.53.0.
        - Value Type | Result
          ---------- | ------------
          null       | same as empty string ''
          undefined  | nothing changes
          number     | throw error
          function   | throw error
          object     | throw error
    - When clear() or setNativeProps() called, attributed text keeps the attributes
    - When `value` prop is set, the text can't be changed

- `clear()` doesn't work from the second time
- `setNativeProps({text '***'})` doesn't work from the second time
- Even when `value` prop is set, you can change the text

![ScreenShot_0.54.0](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/0.54.0_test.gif)

- `clear()` works every time
- `setNativeProps({text '****'})` works every time

![ScreenShot_Clear_1](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_1.gif)

![ScreenShot_Clear_2](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_2.gif)

- The text keeps the attributes (font family, size, color, text align)

![ScreenShot_Slider](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/attributed_text_test.gif)

- If `value` prop is set, the text should not be changed

![ScreenShot_Value](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/value_test.gif)

[IOS] [BUGFIX] [TextInput] - Fix TextInput.clear() and TextInput.setNativeProps({text: ''}) to work
Pull Request resolved: facebook#18278

Reviewed By: shergin

Differential Revision: D9692561

Pulled By: hramos

fbshipit-source-id: b7ce8f6740fdf666e71d6a85743331ca4805edcb

t-nanava pushed a commit to microsoft/react-native that referenced this issue Jun 17, 2019

Fix facebook#18272 TextInput.setNativeProps({text: ''}) to work (face…
…book#18278)

Summary:
Fix facebook#18272. Calling textInputRef.setNativeProps({text: ''}) or textInputRef.clear() should clear the text input.

- All tests of `yarn run test` are passed
- Test with [the sample app](https://github.com/magicien/react-native-textinput-clear).
    - TextInput.clear() and TextInput.setNativeProps({ text: '***' }) worked
    - When clear() or setNativeProps() called, onChange/onChangeText wasn't called
        - Same behavior as react 0.53.0
    - When non-string values are given to `setNativeProps({text: ___})`, its behavior is the same as react 0.53.0.
        - Value Type | Result
          ---------- | ------------
          null       | same as empty string ''
          undefined  | nothing changes
          number     | throw error
          function   | throw error
          object     | throw error
    - When clear() or setNativeProps() called, attributed text keeps the attributes
    - When `value` prop is set, the text can't be changed

- `clear()` doesn't work from the second time
- `setNativeProps({text '***'})` doesn't work from the second time
- Even when `value` prop is set, you can change the text

![ScreenShot_0.54.0](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/0.54.0_test.gif)

- `clear()` works every time
- `setNativeProps({text '****'})` works every time

![ScreenShot_Clear_1](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_1.gif)

![ScreenShot_Clear_2](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_2.gif)

- The text keeps the attributes (font family, size, color, text align)

![ScreenShot_Slider](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/attributed_text_test.gif)

- If `value` prop is set, the text should not be changed

![ScreenShot_Value](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/value_test.gif)

[IOS] [BUGFIX] [TextInput] - Fix TextInput.clear() and TextInput.setNativeProps({text: ''}) to work
Pull Request resolved: facebook#18278

Reviewed By: shergin

Differential Revision: D9692561

Pulled By: hramos

fbshipit-source-id: b7ce8f6740fdf666e71d6a85743331ca4805edcb

t-nanava pushed a commit to microsoft/react-native that referenced this issue Jun 17, 2019

Fix facebook#18272 TextInput.setNativeProps({text: ''}) to work (face…
…book#18278)

Summary:
Fix facebook#18272. Calling textInputRef.setNativeProps({text: ''}) or textInputRef.clear() should clear the text input.

- All tests of `yarn run test` are passed
- Test with [the sample app](https://github.com/magicien/react-native-textinput-clear).
    - TextInput.clear() and TextInput.setNativeProps({ text: '***' }) worked
    - When clear() or setNativeProps() called, onChange/onChangeText wasn't called
        - Same behavior as react 0.53.0
    - When non-string values are given to `setNativeProps({text: ___})`, its behavior is the same as react 0.53.0.
        - Value Type | Result
          ---------- | ------------
          null       | same as empty string ''
          undefined  | nothing changes
          number     | throw error
          function   | throw error
          object     | throw error
    - When clear() or setNativeProps() called, attributed text keeps the attributes
    - When `value` prop is set, the text can't be changed

- `clear()` doesn't work from the second time
- `setNativeProps({text '***'})` doesn't work from the second time
- Even when `value` prop is set, you can change the text

![ScreenShot_0.54.0](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/0.54.0_test.gif)

- `clear()` works every time
- `setNativeProps({text '****'})` works every time

![ScreenShot_Clear_1](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_1.gif)

![ScreenShot_Clear_2](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_2.gif)

- The text keeps the attributes (font family, size, color, text align)

![ScreenShot_Slider](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/attributed_text_test.gif)

- If `value` prop is set, the text should not be changed

![ScreenShot_Value](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/value_test.gif)

[IOS] [BUGFIX] [TextInput] - Fix TextInput.clear() and TextInput.setNativeProps({text: ''}) to work
Pull Request resolved: facebook#18278

Reviewed By: shergin

Differential Revision: D9692561

Pulled By: hramos

fbshipit-source-id: b7ce8f6740fdf666e71d6a85743331ca4805edcb
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.