TextInput: Refined contentSize calculation

Summary: This fixes pretty bad issue when contentSize is calculated based on an intrinsic horizontal (width) limitation, not on a real/current horizontal (width) one.

Reviewed By: mmmulani

Differential Revision: D5422114

fbshipit-source-id: 0eb582aeb59d29530990d4faabf2f41baa79c058

Author: shergin

Libraries/Text/RCTBackedTextInputViewProtocol.h

@@ -19,5 +19,6 @@
 @property (nonatomic, strong, nullable) UIFont *font;
 @property (nonatomic, assign) UIEdgeInsets textContainerInset;
 @property (nonatomic, strong, nullable) UIView *inputAccessoryView;
+@property (nonatomic, readonly) CGSize contentSize;
 
 @end

Libraries/Text/RCTTextInput.m

@@ -64,10 +64,10 @@ - (void)setReactBorderInsets:(UIEdgeInsets)reactBorderInsets
 
 - (CGSize)contentSize
 {
-  CGSize contentSize = self.intrinsicContentSize;
-  UIEdgeInsets compoundInsets = self.reactCompoundInsets;
-  contentSize.width -= compoundInsets.left + compoundInsets.right;
-  contentSize.height -= compoundInsets.top + compoundInsets.bottom;
+  CGSize contentSize = self.backedTextInputView.contentSize;
+  UIEdgeInsets reactPaddingInsets = self.reactPaddingInsets;
+  contentSize.width -= reactPaddingInsets.left + reactPaddingInsets.right;
+  contentSize.height -= reactPaddingInsets.top + reactPaddingInsets.bottom;
   // Returning value does NOT include border and padding insets.
   return contentSize;
 }

Libraries/Text/RCTUITextField.m

@@ -114,6 +114,12 @@ - (void)paste:(id)sender
 
 #pragma mark - Layout
 
+- (CGSize)contentSize
+{
+  // Returning size DOES contain `textContainerInset` (aka `padding`).
+  return self.intrinsicContentSize;
+}
+
 - (CGSize)intrinsicContentSize
 {
   // Note: `placeholder` defines intrinsic size for `<TextInput>`.
@@ -122,11 +128,13 @@ - (CGSize)intrinsicContentSize
   size = CGSizeMake(RCTCeilPixelValue(size.width), RCTCeilPixelValue(size.height));
   size.width += _textContainerInset.left + _textContainerInset.right;
   size.height += _textContainerInset.top + _textContainerInset.bottom;
+  // Returning size DOES contain `textContainerInset` (aka `padding`).
   return size;
 }
 
 - (CGSize)sizeThatFits:(CGSize)size
 {
+  // All size values here contain `textContainerInset` (aka `padding`).
   CGSize intrinsicSize = self.intrinsicContentSize;
   return CGSizeMake(MIN(size.width, intrinsicSize.width), MIN(size.height, intrinsicSize.height));
 }

Libraries/Text/RCTUITextView.m

@@ -134,6 +134,7 @@ - (void)setContentOffset:(CGPoint)contentOffset animated:(__unused BOOL)animated
 
 - (CGFloat)preferredMaxLayoutWidth
 {
+  // Returning size DOES contain `textContainerInset` (aka `padding`).
   return _preferredMaxLayoutWidth ?: self.placeholderSize.width;
 }
 
@@ -149,6 +150,18 @@ - (CGSize)placeholderSize
   return placeholderSize;
 }
 
+- (CGSize)contentSize
+{
+  CGSize contentSize = super.contentSize;
+  CGSize placeholderSize = self.placeholderSize;
+  // When a text input is empty, it actually displays a placehoder.
+  // So, we have to consider `placeholderSize` as a minimum `contentSize`.
+  // Returning size DOES contain `textContainerInset` (aka `padding`).
+  return CGSizeMake(
+    MAX(contentSize.width, placeholderSize.width),
+    MAX(contentSize.height, placeholderSize.height));
+}
+
 - (void)layoutSubviews
 {
   [super layoutSubviews];
@@ -161,6 +174,7 @@ - (void)layoutSubviews
 
 - (CGSize)intrinsicContentSize
 {
+  // Returning size DOES contain `textContainerInset` (aka `padding`).
   return [self sizeThatFits:CGSizeMake(self.preferredMaxLayoutWidth, INFINITY)];
 }
 
@@ -169,7 +183,7 @@ - (CGSize)sizeThatFits:(CGSize)size
   // Returned fitting size depends on text size and placeholder size.
   CGSize textSize = [self fixedSizeThatFits:size];
   CGSize placeholderSize = self.placeholderSize;
-  // Returning size DOES contain `textContainerInset`.
+  // Returning size DOES contain `textContainerInset` (aka `padding`).
   return CGSizeMake(MAX(textSize.width, placeholderSize.width), MAX(textSize.height, placeholderSize.height));
 }
 

RNTester/js/TextInputExample.ios.js

@@ -805,6 +805,24 @@ exports.examples = [
               placeholder="Placeholder defines intrinsic size"
             />
           </View>
+          <View>
+            <TextInput
+              style={{
+                fontSize: 16,
+                backgroundColor: '#eeeeee',
+                borderColor: '#666666',
+                borderWidth: 5,
+                borderTopWidth: 20,
+                borderRadius: 10,
+                borderBottomRightRadius: 20,
+                padding: 10,
+                paddingTop: 20,
+              }}
+              testID="multiline_textinput_with_flex"
+              multiline={true}
+              placeholder="Placeholder defines intrinsic size"
+            />
+          </View>
         </View>
       );
     }