react / react/react-native

[iOS] The caret goes under the keyboard in multiline TextInput after the ScrollView auto-scrolls to the caret

Open
#52,414 8 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

API: Keyboard Component: ScrollView Component: TextInput Issue: Author Provided Repro Platform: iOS
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>
  1. ScrollView with automaticallyAdjustKeyboardInsets (with enough content to fill the whole screen).
  2. Multiline TextInput with fixed height (let's say 100).
  3. Focus on the input when it’s positioned at the bottom of the screen.
  4. Let the keyboard slide up and the ScrollView scroll to the caret.
  5. Type more than 1 line in the TextInput.
  6. The TextInput caret goes under the keyboard
  7. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.