[5.14.5] TextInput with multiline inside Portal causes rapid flicker and infinite onChangeText calls [iOS]

Offen
  • Stimmt etwas nicht?
#4,831 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 3 Tagen

Dieses Issue hat noch niemand übernommen.

Bewertung

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

Rechercherichtung

Beginne damit, das Problem unter iOS mit dem bereitgestellten Portal- und multiline-TextInput-Beispiel zu reproduzieren, und untersuche anschließend die Einstiegspunkte von Portal und TextInput. Als erledigt gilt die Aufgabe, wenn das Tippen kein Flackern mehr verursacht und onChangeText einmal pro Benutzereingabe ausgelöst wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug
Current behaviour

Typing in a react-native-paper TextInput with multiline inside a Portal causes rapid flicker and floods onChangeText (dozens of calls per second). Removing either Portal or multiline stops the issue.

Expected behaviour

No flicker; onChangeText fires once per user input.

How to reproduce?
  1. Render a multiline TextInput inside a Portal.
  2. Run iOS
  3. Focus the field and type characters.
import * as React from 'react';
import { Portal, TextInput } from 'react-native-paper';

export default function Repro() {
  const [text, setText] = React.useState('');
  return (
    <Portal>
      <TextInput
        label="Notes"
        mode="outlined"
        multiline
        value={text}
        onChangeText={(t) => {
          console.count('onChangeText'); // spams rapidly
          setText(t);
        }}
        style={{ minHeight: 120 }}
      />
    </Portal>
  );
}
What have you tried so far?
  • Removing multiline → issue gone
  • Removing Portal → issue gone
Your Environment
software version
ios x
android x
react-native 0.81.5
react-native-paper 5.14.5
node x.x.x
npm or yarn x.x.x
expo sdk N/A
Vorherrschende Sprache
TypeScript
Sterne
14.5k
Forks
2.3k
Ø Merge
8 T. 7 Std.
Gemergte PRs (30 T.)
5

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus callstack/react-native-paper

Alle Issues in callstack/react-native-paper

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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