Calling Paper TextInput setTextAndSelection view command now dirties …

…layout

Summary:
Changelog: [Internal]

Previously `setTextAndSelection` was not dirtying layout. This would cause an issue where `setTextAndSelection` causes layout change. For example calling setTextAndSelection with empty string on a multiline auto expanding text input.

I changed one example in TextInputSharedExamples.js, "Live Re-Write (no spaces allowed) and clear" example is now multiline. This allows to test whether `setTextAndSelection` dirties layout. Enter multiline string to to the example text input and press clear. Observe that the text input shrinks to single line height.

Reviewed By: shergin

Differential Revision: D21182990

fbshipit-source-id: de8501ea0b97012cf4cdf8d5f658649139f92da6

Libraries/Text/TextInput/RCTBaseTextInputView.h

@@ -40,6 +40,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, copy, nullable) RCTDirectEventBlock onScroll;
 
 @property (nonatomic, assign) NSInteger mostRecentEventCount;
+@property (nonatomic, assign, readonly) NSInteger nativeEventCount;
 @property (nonatomic, assign) BOOL autoFocus;
 @property (nonatomic, assign) BOOL blurOnSubmit;
 @property (nonatomic, assign) BOOL selectTextOnFocus;
@@ -51,9 +52,11 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, copy) NSString *inputAccessoryViewID;
 @property (nonatomic, assign) UIKeyboardType keyboardType;
 
-- (void)setText:(NSString *__nullable)text
- selectionStart:(NSInteger)start
-   selectionEnd:(NSInteger)end;
+/**
+ Sets selection intext input if both start and end are within range of the text input.
+ **/
+- (void)setSelectionStart:(NSInteger)start
+             selectionEnd:(NSInteger)end;
 
 @end
 

Libraries/Text/TextInput/RCTBaseTextInputView.m

@@ -24,7 +24,6 @@ @implementation RCTBaseTextInputView {
   __weak RCTEventDispatcher *_eventDispatcher;
   BOOL _hasInputAccesoryView;
   NSString *_Nullable _predictedText;
-  NSInteger _nativeEventCount;
   BOOL _didMoveToWindow;
 }
 
@@ -199,17 +198,9 @@ - (void)setSelection:(RCTTextSelection *)selection
   }
 }
 
-- (void)setText:(NSString *__nullable)text
- selectionStart:(NSInteger)start
-   selectionEnd:(NSInteger)end
+- (void)setSelectionStart:(NSInteger)start
+             selectionEnd:(NSInteger)end
 {
-  if (text) {
-    NSMutableAttributedString *mutableString =
-    [[NSMutableAttributedString alloc] initWithAttributedString:self.backedTextInputView.attributedText];
-    [mutableString replaceCharactersInRange:NSMakeRange(0, mutableString.string.length) withString:text];
-    self.backedTextInputView.attributedText = mutableString;
-  }
-
   UITextPosition *startPosition = [self.backedTextInputView positionFromPosition:self.backedTextInputView.beginningOfDocument
                                                                           offset:start];
   UITextPosition *endPosition = [self.backedTextInputView positionFromPosition:self.backedTextInputView.beginningOfDocument

Libraries/Text/TextInput/RCTBaseTextInputViewManager.m

@@ -125,8 +125,18 @@ - (void)setBridge:(RCTBridge *)bridge
 {
   [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
     RCTBaseTextInputView *view = (RCTBaseTextInputView *)viewRegistry[viewTag];
-    view.mostRecentEventCount = mostRecentEventCount;
-    [view setText:value selectionStart:start selectionEnd:end];
+    NSInteger eventLag = view.nativeEventCount - mostRecentEventCount;
+    if (eventLag != 0) {
+      return;
+    }
+    RCTExecuteOnUIManagerQueue(^{
+      RCTBaseTextInputShadowView *shadowView = (RCTBaseTextInputShadowView *)[self.bridge.uiManager shadowViewForReactTag:viewTag];
+      [shadowView setText:value];
+      [self.bridge.uiManager setNeedsLayout];
+      RCTExecuteOnMainQueue(^{
+        [view setSelectionStart:start selectionEnd:end];
+      });
+    });
   }];
 }
 

RNTester/js/examples/TextInput/TextInputSharedExamples.js

@@ -161,9 +161,9 @@ class RewriteInvalidCharactersAndClearExample extends React.Component<
           ref={ref => {
             this.inputRef = ref;
           }}
-          multiline={false}
+          multiline={true}
           onChangeText={text => {
-            this.setState({text: text.replace(/\s/g, '')});
+            this.setState({text: text.replace(/ /g, '')});
           }}
           style={styles.default}
           value={this.state.text}