callstack / callstack/react-native-paper

TextInput multiline on web should expand when entering long text

Aperta
#3,124 2 commenti 3 reazioni 0 assegnatari Vedi su GitHub
repro provided TextInput
Lingua principale
TypeScript
Stelle
14.5k
Fork
2.2k
Merge medio
5g 23h
PR unite (30g)
12

Descrizione

### Current behaviour
A multiline `TextInput` element expands to adapt to text content on mobile, but it doesn't on web. Instead a scrollbar appears inside the `textarea`

### Expected behaviour

`TextInput` expands on web to adapt to text length, like it does on mobile. This is expected under the material guidelines: https://material.io/archive/guidelines/components/text-fields.html#text-fields-field-types

### Code sample

https://snack.expo.dev/@raphaelmerx/textinput

### Screenshots (if applicable)

Screenshot 2022-03-19 at 12 18 15

### What have you tried

Adapting the height through `onContentSizeChange`, however the textarea never shrinks in size when deleting text:
```javascript
const [height, setHeight] = useState(undefined)
{
setHeight(event.nativeEvent.contentSize.height)
}}
style={{ height }}
/>
```

### Your Environment

| software | version
| --------------------- | -------
| ios or android | web
| react-native | 0.64.3
| react-native-paper | 4.11.2
| node | v14.18.1
| npm or yarn | yarn
| expo sdk | 43

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.