Commit e210c7c
Fix Multiline TextInput with a fixed height scrolls to the bottom when prepending new lines to the text (#38679)
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](Expensify/App#19507 (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
<details><summary>Reproducing the issue on an iOS App without react-native</summary>
<p>
<video src="https://user-images.githubusercontent.com/24992535/246601549-99f480f3-ce80-4678-9378-f71c8aa67e17.mp4" width="900" />
</p>
</details>
Issue 1) is already fixed in react-native, which restores the previous cursor position (on Fabric with [_setAttributedString](https://github.com/fabriziobertoglio1987/react-native/blob/71e7bbbc2cf21abacf7009e300f5bba737e20d17/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm#L600-L610)) 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?
Setting the correct TextInput scroll position after re-setting the cursor.
## Changelog:
[IOS] [FIXED] - Fix Multiline TextInput with a fixed height scrolls to the bottom when changing AttributedText
Pull Request resolved: #38679
Test Plan:
Fabric (reproduces on controlled/not controlled TextInput example):
| Before | After |
| ----------- | ----------- |
| <video src="https://github.com/facebook/react-native/assets/24992535/e06b31fe-407d-4897-b608-73e0cc0f224a" width="350" /> | <video src="https://github.com/facebook/react-native/assets/24992535/fa2eaa31-c616-43c5-9596-f84e7b70d80a" width="350" /> |
Paper (reproduces only on controlled TextInput example):
```javascript
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 |
| ----------- | ----------- |
| <video src="https://github.com/facebook/react-native/assets/24992535/6cb1f2de-717e-4dce-be0a-644f6a051c08" width="350" /> | <video src="https://github.com/facebook/react-native/assets/24992535/dee6edb6-76c6-48b0-b78f-99626235d30e" width="350" /> |
Reviewed By: sammy-SC, cipolleschi
Differential Revision: D48674090
Pulled By: NickGerleman
fbshipit-source-id: 349e7b0910e314ec94b45b68c38571fed41ef1171 parent d9e4278 commit e210c7c
File tree
4 files changed
+16
-0
lines changed- packages/react-native
- Libraries/Text/TextInput
- Multiline
- Singleline
- React/Fabric/Mounting/ComponentViews/TextInput
4 files changed
+16
-0
lines changedLines changed: 6 additions & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
163 | 163 | | |
164 | 164 | | |
165 | 165 | | |
| 166 | + | |
| 167 | + | |
| 168 | + | |
| 169 | + | |
| 170 | + | |
| 171 | + | |
166 | 172 | | |
167 | 173 | | |
168 | 174 | | |
| |||
Lines changed: 1 addition & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
43 | 43 | | |
44 | 44 | | |
45 | 45 | | |
| 46 | + | |
46 | 47 | | |
47 | 48 | | |
48 | 49 | | |
| |||
Lines changed: 5 additions & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
201 | 201 | | |
202 | 202 | | |
203 | 203 | | |
| 204 | + | |
| 205 | + | |
| 206 | + | |
| 207 | + | |
| 208 | + | |
204 | 209 | | |
205 | 210 | | |
206 | 211 | | |
| |||
Lines changed: 4 additions & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
594 | 594 | | |
595 | 595 | | |
596 | 596 | | |
| 597 | + | |
| 598 | + | |
| 599 | + | |
597 | 600 | | |
598 | 601 | | |
599 | 602 | | |
| |||
604 | 607 | | |
605 | 608 | | |
606 | 609 | | |
| 610 | + | |
607 | 611 | | |
608 | 612 | | |
609 | 613 | | |
| |||
0 commit comments