[iOS] The caret goes under the keyboard in multiline TextInput after the ScrollView auto-scrolls to the caret
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
On iOS, when using a multiline TextInput inside a ScrollView with automaticallyAdjustKeyboardInsets, the caret goes under the keyboard after adding a new line in the input.
Steps to reproduce
<ScrollView automaticallyAdjustKeyboardInsets>
// Any content above the TextInput to position it at the bottom of the screen
<TextInput multiline style={{ height: 100 }} /> // multiline TextInput with some fixed height
</ScrollView>
ScrollViewwithautomaticallyAdjustKeyboardInsets(with enough content to fill the whole screen).- Multiline
TextInputwith fixed height (let's say 100). - Focus on the input when it’s positioned at the bottom of the screen.
- Let the keyboard slide up and the
ScrollViewscroll to the caret. - Type more than 1 line in the
TextInput. - The
TextInputcaret goes under the keyboard - Once the TextInput fills the available height, it starts scrolling, but the user only sees the first line of the input
React Native Version
0.79.5
Affected Platforms
Runtime - iOS
Output of npx @react-native-community/cli info
This is not relevant
Stacktrace or Logs
This is not relevant
MANDATORY Reproducer
https://snack.expo.dev/@serge0n/textinput-multiline-autoscroll-on-new-line?platform=ios
Screenshots and Videos
https://github.com/user-attachments/assets/954d5545-3d89-4ef2-91d8-15214b4fffbe
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the linked Snack reproducer on iOS and trace the interaction between ScrollView's automaticallyAdjustKeyboardInsets and the multiline TextInput. Compare caret visibility before and after entering a new line; done means the caret remains above the keyboard and the visible text follows the caret as the input fills.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100