callstack / callstack/react-native-paper

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

Open
#4,831 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### 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.

```tsx
import * as React from 'react';
import { Portal, TextInput } from 'react-native-paper';

export default function Repro() {
const [text, setText] = React.useState('');
return (

{
console.count('onChangeText'); // spams rapidly
setText(t);
}}
style={{ minHeight: 120 }}
/>

);
}
```

### 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 |

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.