react / react/react-native

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

Abierto
#52,414 8 comentarios 2 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

API: Keyboard Component: ScrollView Component: TextInput Issue: Author Provided Repro Platform: iOS
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza ejecutando el reproductor Snack vinculado en iOS y rastrea la interacción entre automaticallyAdjustKeyboardInsets de ScrollView y el TextInput multilinea. Compara la visibilidad del cursor antes y después de introducir una nueva línea; se considera terminado cuando el cursor permanece por encima del teclado y el texto visible sigue al cursor a medida que se llena la entrada.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
ios, react-native
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.