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: facebook/react-native#18278

Reviewed By: shergin

Differential Revision: D9692561

Pulled By: hramos

fbshipit-source-id: b7ce8f6740fdf666e71d6a85743331ca4805edcb
  • Loading branch information
magicien authored and aleclarson committed Feb 15, 2019
1 parent ee30fc2 commit bab3b0e
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 @@ -25,6 +25,7 @@ @implementation RCTBaseTextInputShadowView
NSAttributedString *_Nullable _localAttributedText;
CGSize _previousContentSize;

NSString *_text;
NSTextStorage *_textStorage;
NSTextContainer *_textContainer;
NSLayoutManager *_layoutManager;
Expand Down Expand Up @@ -102,6 +103,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

0 comments on commit bab3b0e

Please sign in to comment.