react / react/react-native

TextInput controlled selection broken on both ios and android.

Offen
#29,063 27 Kommentare 12 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

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

Beschreibung

This issue is a continuation of the discussion:
https://github.com/facebook/react-native/commit/dff490d140010913d3209a2f3e987914b9c4eee4#commitcomment-39332764
The link to the sample project that demonstrates the issues:
https://github.com/Ginger-Labs/Input-bug

Description

Controlled selection seems to be broken on both ios and android, to demonstrate the issues I created a sample project (find the link above).

React Native version:

System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Memory: 1.55 GB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.14.2 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.14.5 - ~/.npm-global/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28, 29
Build Tools: 26.0.3, 28.0.3, 29.0.0, 30.0.0
System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
Android NDK: 21.1.6352462
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6392135
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
npmPackages:
react: ~16.9.0 => 16.9.0
react-native: ~0.62.2 => 0.62.2
npmGlobalPackages:
create-react-native-app: 3.4.0
react-native-app-id: 0.0.5
react-native-cli: 2.0.1

Steps To Reproduce

The reproduction steps are in the sample project's ReadMe file.
For simplicity purposes, I will post them here as well:

SIM - iPhone 11 (13.4.1):

  1. Click on the "Click Me" Button, set the cursor in the middle, add some text, click on the button again: Notice the text is set to needed one but the selection is not 10
  2. Input text: "Hello world", move cursor in between words, click on "@":
    Expected: "Hello @Mihailworld" with the cursor at 13
    Actual: "Hello @Mihailworld" with the cursor at the end of the whole string.

SIM - nexus 6P API28

  1. Add text, click on enter (new line).
    Expected: The text stays and a new line is created with "-" in front.
    Actual: The first line becomes empty and the second line "-".
  2. Press enter twice and you will get a:
    Exception in native call java.lang.IndexOutOfBoundsException: setSpan (6 ... 6) ends beyond length 3
  3. Press "@" twice and observe the same bug above.

Expected Results

I expect the TextInput to work as intended (unless I am missing something conceptual).

Snack, code example, screenshot, or link to a repository:

https://github.com/Ginger-Labs/Input-bug

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 mit den Reproduktionsschritten in der README des verknüpften Input-bug-Beispielprojekts und reproduziere das Verhalten der kontrollierten TextInput-Auswahl in den aufgeführten iOS- und Android-Umgebungen. Vergleiche die beobachteten Ergebnisse für Cursor, Zeilenumbruch und IndexOutOfBoundsException mit den erwarteten Ergebnissen; die Arbeit ist abgeschlossen, wenn sich die kontrollierte Auswahl auf beiden Plattformen korrekt verhält.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
android, 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.