Fix Multiline TextInput with a fixed height scrolls to the bottom when prepending new lines to the text

[fabOnReact]

Upstream PR Link

Upstream PR facebook#38679
fixes Expensify/App#19507

Summary:

Please re-state the problem that we are trying to solve in this issue.

Multiline TextInput with a fixed height will scroll to the bottom of the screen when prepending new lines to the text.

What is the root cause of that problem?

The issue is caused by iOS UITextView:

• The cursor moves to the end of the text when prepending new lines.
• Moving the cursor to the end of the text triggers the scroll to the bottom.

The behavior was reproduced on an iOS App (without react-native).
The example included below implements a Component RCTUITextView based on UITextView, which modifies the UITextView attributedText with the textViewDidChange callback (source code available in this comment).

Adding a new line on top of the UITextView on iOS results in:
Issue 1) The cursor moves to the end of TextInput text
Issue 2) The TextInput scrolls to the bottom

Reproducing the issue on an iOS App without react-native

2023-06-17.18-16-16.mp4

Issue 1) is already fixed in react-native, which restores the previous cursor position (on Fabric with _setAttributedString) after changing the text.
Issue 2) needs to be fixed in react-native.

What changes do you think we should make in order to solve the problem?

Disable scrollingEnabled when changing the attributedText.

Changelog:

[IOS] [FIXED] - Fix Multiline TextInput with a fixed height scrolls to the bottom when prepending new lines to the text

Test Plan:

Fabric (reproduces on controlled/not controlled TextInput example):

Before	After
Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-29.at.11.57.04.mp4	Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-29.at.11.55.11.mp4

Paper (reproduces only on controlled TextInput example):

function TextInputExample() {
  const [text, setText] = React.useState('');

  return (
    <View style={{marginTop: 200}}>
      <TextInput
        style={{height: 50, backgroundColor: 'white'}}
        multiline={true}
        value={text}
        onChangeText={text => {
          setText(text);
        }}
      />
    </View>
  );
}

Before	After
Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-29.at.13.05.48.mp4	Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-29.at.13.09.48.mp4

Expensify

Before	After
Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-29.at.13.36.02.mp4	Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-29.at.13.39.42.mp4

[fabOnReact]

The fix #54 is required for base branch ExpensifyRC1-0.72.0-alpha.0.

It's a fix for #49. There Missing of defining of selectionOrigin in textInputDidChangeSelection
It was discovered in updating RN process Expensify/App#18507 (comment)

[eVoloshchak]

Tests well!

[dangrous]

Easy enough!

[AndrewGable]

FYI we are removing our fork, so we don't need to merge anything in this fork. We need to get this merged into React Native upstream and deployed.

[dangrous]

Ah okay cool. Then, we'll just hold on the upstream one! But it's good to have this fully tested here.