Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextInput renders extra characters after `value` was resetted to null

See original GitHub issue

React-native 0.23
Tested on iOS 9.3 simulator.
I’m on Mac OS X.

Sorry, I can’t reproduce it on rnplay.

I’m using redux to manage my store.

The initial state of the TextInput is set to null, that Reset button would reset the value to null by sending actions to redux store.

Then things got wired. As the gif below shows:

react-native-textinput

Some extra characters are left there.

If I set the initial state of TextInput to '', and reset it to '' too, then everything works as expected.

Issue Analytics

State:
Created 7 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

grabboucommented, Apr 17, 2016

I think that’s the commit that introduces this behaviour -> https://github.com/facebook/react-native/commit/62177dbb3b4d4bdedf0c7a6fe9140ce049743fbf, more specifically, https://github.com/facebook/react-native/commit/62177dbb3b4d4bdedf0c7a6fe9140ce049743fbf#diff-b9fc78351b7b976a36356ef6f08c1f79R259

This explains why, after entering ABCD and resetting value to null - the final argument passed to setText: is not null, but rather the first non-null value (which in this case is letter “A”). Then, that value is stored as long as the component itself is mounted, which also explains why the OP is getting The no matter what is the value right before clicking Reset.

Maybe it’s a good moment to deprecate falsy values and just make value be React.PropTypes.string.isRequired? (more or less a follow up to https://github.com/facebook/react/issues/5013 - bonus points for keeping it consistent). I generally agree with the reasoning described there about null being more a developer error (e.g. mistake when connecting components all together). That would require AFAIK all typeof checks to be replaced with length > 0

Otherwise, we can just make sure that _getText() is never null, but an empty string in worst case.

Hint - if you can’t / don’t have time to upgrade and are experiencing this - just add defaultValue={''} to your <TextInput /> if you haven’t specified it yet.

CC: @nicklockwood

0reactions

hramoscommented, May 25, 2017

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.

Top Results From Across the Web

React ref null after re-rendering element - Stack Overflow

On the first render, the ref is null and not undefined because of component mounting or unmounting and setting the state. Your ref...

<input>: The Input (Form Input) element - HTML

A button that resets the contents of the form to default values. Not recommended. A single-line text field for entering search strings.

FAQs | React Hook Form - Simple React forms validation

How to reset the form? · HTMLFormElement.reset(). This method does the same thing as clicking a form's reset button, and only clears input/select/checkbox...

dcc.Input - Dash for Python Documentation - Dash Plotly

If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position...

Select | Quasar Framework

In case you are looking for a dropdown “button” instead of “input” use Button ... Appends clearable icon when a value (not undefined...