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

Aberta
  • Algo errado?
#4,831 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 11 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
48/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
ios, react-native, typescript
Domínio
mobile

Direção de pesquisa

Comece reproduzindo o problema no iOS com o exemplo fornecido de Portal e TextInput multiline e, em seguida, inspecione os pontos de entrada de Portal e TextInput. O trabalho estará concluído quando a digitação não causar mais flicker e onChangeText for disparado uma vez por entrada do usuário.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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
Linguagem predominante
TypeScript
Estrelas
14.5k
Forks
2.3k
Merge médio
13d 16h
PRs com merge (30d)
5

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de callstack/react-native-paper

Todas as issues de callstack/react-native-paper

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.