[iOS] `multiline` TextInput in ScrollView scrolls to top of TextInput if when typing overflows to a new line
还没有人认领这个 Issue。
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
描述
Description
When typing in a multiline TextInput (controlled in this case), the screen scrolls so the entire TextInput is within the view when the text overflows to the next line. Only happens if the user is typing at the end of the text. See the demos below.
Similar to but not quite the same as #48412 and #39660
Steps to reproduce
- Have a (controlled, but not sure it matters) multiline TextInput within ScrollView with some lines of text in it
- Scroll down so the top of the TextInput is above the viewport
- Start typing at the end of the text within the TextInput - when the text overflows to a new line the top of the element will automatically scroll back into the viewport
React Native Version
0.76, 0.74.5
Affected Platforms
Runtime - iOS
Output of npx react-native info
System:
OS: macOS 14.6.1
CPU: (12) arm64 Apple M3 Pro
Memory: 113.59 MB / 18.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.16.0
path: ~/.nvm/versions/node/v20.16.0/bin/node
Yarn:
version: 1.22.22
path: /opt/homebrew/bin/yarn
npm:
version: 10.8.1
path: ~/.nvm/versions/node/v20.16.0/bin/npm
Watchman:
version: 2024.08.19.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /Users/uakin/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.1
- iOS 18.1
- macOS 15.1
- tvOS 18.1
- visionOS 2.1
- watchOS 11.1
Android SDK: Not Found
IDEs:
Android Studio: 2024.1 AI-241.18034.62.2411.12169540
Xcode:
version: 16.1/16B40
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.12
path: /usr/bin/javac
Ruby:
version: 3.0.7
path: /Users/uakin/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.74.5
wanted: 0.74.5
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
info React Native v0.77.0 is now available (your project is running on v0.74.5).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.77.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.5
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".
Stacktrace or Logs
N/A
Reproducer
https://snack.expo.dev/hUmMl37uriVOWz7jHP0jW
Screenshots and Videos
Scrolls so the beginning of the element is in view, behaves normally otherwise:
https://github.com/user-attachments/assets/758471dd-a45a-4134-9a8c-940bfb20e5aa
Only happens when typing at the end of the text (also adding a new line won't trigger the same behaviour):
https://github.com/user-attachments/assets/ccdd16f4-c293-4177-97e0-098d111ada26
Even weirder when the TextInput is long enough to cover the entire screen - will scroll to the top and then scroll back to bottom so cursor is within the screen:
https://github.com/user-attachments/assets/375267fc-cd0b-436e-a794-717a92216bfb
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从关联的 Snack reproducer 开始,比较 iOS 上在 ScrollView 内的多行 TextInput 在文本末尾输入时的行为。追踪涉及自动滚动的 TextInput 和 ScrollView 行为,然后验证换到新行时,TextInput 的顶部不再被滚动到可视区域内,同时保持光标可见。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- ios, react-native
- 领域
- mobile
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 50/100