react / react/react-native

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

Offen
#52,414 8 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

API: Keyboard Component: ScrollView Component: TextInput Issue: Author Provided Repro Platform: iOS
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, den verknüpften Snack-Reproducer auf iOS auszuführen, und verfolge die Interaktion zwischen ScrollViews automatischAdjustKeyboardInsets und dem mehrzeiligen TextInput. Vergleiche die Sichtbarkeit des Cursors vor und nach dem Eingeben einer neuen Zeile; abgeschlossen ist es, wenn der Cursor oberhalb der Tastatur bleibt und der sichtbare Text dem Cursor folgt, während sich das Eingabefeld füllt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
ios, react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.