Fix disable scrolling for multiline text input

[shwanton]

Please select one of the following

• I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
• I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
• I am making a fix / change for the macOS implementation of react-native
• I am making a change required for Microsoft usage of react-native

Summary

RN iOS supports disabling Multiline text input scrolling with scrollEnabled prop. https://reactnative.dev/docs/0.68/textinput#scrollenabled-ios

Since macOS does not use UITextView which inherits from UIScrollView, the RCTBaseTextInputViewManager scrollEnabled remap was not used.

On macOS, RCTMultilineTextInputView creates a RCTUIScrollView which is where we need to disable scrolling.

react-native-macos/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.m

Line 31 in d9bcca9

_scrollView = [[RCTUIScrollView alloc] initWithFrame:self.bounds]; // TODO(macOS ISS#3536887)

RCTUIScrollView inherits from NSScrollView which does not have a scrollEnabled property, but there is a scrollWheel callback api we can use to disable scrolling when scrollEnabled is false.

UPDATE:

This approach was problematic since overriding scrollWheel for all scrollViews caused issues when pasting large amounts of text.
This also did not disable keyboard scrolling with up/down keys.

Another solution is to disable scrolling for TextInput is to create a custom clipview & constrain scrolling.

#1366 added vertical scrollbars to all multiline text inputs. This introduced a layout regression where the scrollbar padding was not taken into account. The scrollbar should also be optional since scrolling can still happen w/o the vertical scrollbar.

Will add follow on diff to move this to configurable prop.

Changelog

[macOS] [Fixed] - Scrolling on Multiline Text Input can be disabled
Fixes #558 & #925

Usage

NOTE: Only works with multiline={true}

<TextInput multiline={true} scrollEnabled={false} ... />

Test Plan

Added Example to RNTester TextInput -> Multiline

CleanShot.2022-09-26.at.10.15.22-converted.mp4

[ghost]

All CLA requirements met.

[Saadnajmi]

@mischreiber Could I get a second pair of eyes on this PR?

[Saadnajmi]

And maybe also @chiuam who was looking at TextInput recently

[Saadnajmi]

We're waiting on the "disable keyboard scrolling" bit to move this PR forward.

[shwanton]

Quick update. There is a better solution that disables scroll wheel & text that uses a custom clip view.

Here is a native repro of how it should work: https://github.com/shwanton/DisabledScrollingTextViewExample

There is some weird behavior with how we create textview, so overriding the clip view has unexpected behavior.
Once I figure this out, I'll update the PR.

[ghost]

This pull request has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

[Saadnajmi]

This pull request has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

Uh... Don't close?

[shwanton]

Still working on this fix!

[christophpurrer]

Will this change now conflict with
#1366
?

[shwanton]

I've updated the description with the latest implementation details for disabling scrolling in multiline textview.
This solution solves the outstanding issues w/ overriding scrollWheel

The vertical scrollbar should be optional, I will follow up #1368 with a change we made.

CleanShot.2022-09-26.at.10.15.22-converted.mp4

[shwanton]

@Saadnajmi The updated fix here is ready to be merged!