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

Ouverte
  • Quelque chose ne va pas ?
#4,831 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 3 jours

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
48/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
ios, react-native, typescript
Domaine
mobile

Piste de recherche

Commencez par reproduire le problème sur iOS avec l’exemple fourni de Portal et de TextInput multiline, puis examinez les points d’entrée de Portal et de TextInput. Le travail est terminé lorsque la saisie ne provoque plus de scintillement et que onChangeText est déclenché une fois par saisie utilisateur.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.3k
Merge moyen
8 j 7 h
PR mergées (30 j)
5

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de callstack/react-native-paper

Toutes les issues de callstack/react-native-paper

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.