Skip to content

Commit

Permalink
Fix #18272 TextInput.setNativeProps({text: ''}) to work (#18278)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
magicien authored and facebook-github-bot committed Sep 11, 2018
1 parent 9570d7d commit 2307ea6
Showing 1 changed file with 15 additions and 0 deletions.
15 changes: 15 additions & 0 deletions Libraries/Text/TextInput/RCTBaseTextInputShadowView.m
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ @implementation RCTBaseTextInputShadowView
NSAttributedString *_Nullable _localAttributedText;
CGSize _previousContentSize;

NSString *_text;
NSTextStorage *_textStorage;
NSTextContainer *_textContainer;
NSLayoutManager *_layoutManager;
Expand Down Expand Up @@ -101,6 +102,20 @@ - (void)invalidateContentSize
});
}

- (NSString *)text
{
return _text;
}

- (void)setText:(NSString *)text
{
_text = text;
// Clear `_previousAttributedText` to notify the view about the change
// when `text` native prop is set.
_previousAttributedText = nil;
[self dirtyLayout];
}

#pragma mark - RCTUIManagerObserver

- (void)uiManagerWillPerformMounting
Expand Down

1 comment on commit 2307ea6

@jsfu
Copy link

@jsfu jsfu commented on 2307ea6 Dec 7, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It can't input when value={''}

Please sign in to comment.