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

Abierto
  • ¿Algo no está bien?
#4,831 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

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

Línea de trabajo

Comienza reproduciendo el problema en iOS con el ejemplo proporcionado de Portal y TextInput multiline, y luego inspecciona los puntos de entrada de Portal y TextInput. Se considera terminado cuando escribir ya no provoca parpadeos y onChangeText se dispara una vez por cada entrada del usuario.

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

Descripción

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
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.3k
Merge medio
3 d 14 h
PR fusionados (30 d)
12

Preparar el entorno

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.

Más de callstack/react-native-paper

Todos los issues de callstack/react-native-paper

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.