Refactor vertical scrollbar to only be visible when text content overflows

Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -130,6 +130,7 @@ const RCTTextInputViewConfig = {
     blurOnSubmit: true,
     mostRecentEventCount: true,
     scrollEnabled: true,
+    hideVerticalScrollIndicator: true,
     selectionColor: {process: require('../../StyleSheet/processColor')},
     contextMenuHidden: true,
     secureTextEntry: true,

Libraries/Components/TextInput/TextInput.js

@@ -331,6 +331,13 @@ type IOSProps = $ReadOnly<{|
   scrollEnabled?: ?boolean,
 
   // [TODO(macOS GH#774)
+  /**
+   * If `true`, hide vertical scrollbar on the underlying multiline scrollview
+   * The default value is `false`.
+   * @platform macos
+   */
+  hideVerticalScrollIndicator?: ?boolean,
+
   /**
    * If `false`, disables grammar-check.
    * @platform macos

Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.h

@@ -13,6 +13,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 #if TARGET_OS_OSX // [TODO(macOS GH#774)
 - (void)setReadablePasteBoardTypes:(NSArray<NSPasteboardType> *)readablePasteboardTypes;
+@property (nonatomic, assign) BOOL hideVerticalScrollIndicator;
 #endif // ]TODO(macOS GH#774)
 @end
 

Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.m

@@ -28,13 +28,15 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
     _backedTextInputView = [[RCTUITextView alloc] initWithFrame:self.bounds];
     _backedTextInputView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
 #if TARGET_OS_OSX // TODO(macOS GH#774)
+    self.hideVerticalScrollIndicator = NO;
     _scrollView = [[RCTUIScrollView alloc] initWithFrame:self.bounds]; // TODO(macOS ISS#3536887)
     _scrollView.backgroundColor = [RCTUIColor clearColor];
     _scrollView.drawsBackground = NO;
     _scrollView.borderType = NSNoBorder;
     _scrollView.hasHorizontalRuler = NO;
     _scrollView.hasVerticalRuler = NO;
     _scrollView.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable;
+    [_scrollView setHasVerticalScroller:YES];
 
     _backedTextInputView.verticallyResizable = YES;
     _backedTextInputView.horizontallyResizable = YES;
@@ -102,16 +104,42 @@ - (void)setEnableFocusRing:(BOOL)enableFocusRing {
 - (void)setReadablePasteBoardTypes:(NSArray<NSPasteboardType> *)readablePasteboardTypes {
   [_backedTextInputView setReadablePasteBoardTypes:readablePasteboardTypes];
 }
+
+- (BOOL)shouldShowVerticalScrollbar
+{
+  // Hide vertical scrollbar if explicity set to NO
+  if (self.hideVerticalScrollIndicator) {
+    return NO;
+  }
+
+  // Hide vertical scrollbar if attributed text overflows view
+  CGSize textViewSize = [_backedTextInputView intrinsicContentSize];
+  NSClipView *clipView = (NSClipView *)_scrollView.contentView;
+  if (textViewSize.height > clipView.bounds.size.height) {
+    return YES;
+  };
+
+  return NO;
+}
+
+- (void)textInputDidChange
+{
+  [_scrollView setHasVerticalScroller:[self shouldShowVerticalScrollbar]];
+}
+
+- (void)setAttributedText:(NSAttributedString *)attributedText
+{
+  [_backedTextInputView setAttributedText:attributedText];
+  [_scrollView setHasVerticalScroller:[self shouldShowVerticalScrollbar]];
+}
+
 #endif // ]TODO(macOS GH#774)
 
 #pragma mark - UIScrollViewDelegate
 
 - (void)scrollViewDidScroll:(RCTUIScrollView *)scrollView // TODO(macOS ISS#3536887)
 {
   RCTDirectEventBlock onScroll = self.onScroll;
-#if TARGET_OS_OSX // [TODO(macOS GH#774)
-  [_scrollView setHasVerticalScroller:YES];
-#endif // ]TODO(macOS GH#774)
   if (onScroll) {
     CGPoint contentOffset = scrollView.contentOffset;
     CGSize contentSize = scrollView.contentSize;

Libraries/Text/TextInput/Multiline/RCTMultilineTextInputViewManager.m

@@ -24,6 +24,7 @@ - (RCTUIView *)view // TODO(macOS ISS#3536887)
 RCT_REMAP_OSX_VIEW_PROPERTY(dataDetectorTypes, backedTextInputView.enabledTextCheckingTypes, NSTextCheckingTypes) // TODO(macOS GH#774)
 
 #if TARGET_OS_OSX // [TODO(macOS GH#774)
+RCT_EXPORT_VIEW_PROPERTY(hideVerticalScrollIndicator, BOOL)
 RCT_CUSTOM_VIEW_PROPERTY(pastedTypes, NSArray<NSPasteboardType>*, RCTUITextView)
 {
   NSArray<NSPasteboardType> *types = json ? [RCTConvert NSPasteboardTypeArray:json] : nil;

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js

@@ -742,6 +742,12 @@ exports.examples = ([
             multiline={true}
             style={styles.multiline}
           />
+          <TextInput
+            placeholder="multiline text input with vertical scrollbar hidden"
+            multiline={true}
+            style={styles.multiline}
+            hideVerticalScrollIndicator={true}
+          />
           <TextInput
             defaultValue="uneditable multiline text input with phone number detection: 88888888."
             editable={false}