callstack / callstack/react-native-paper

TextInput controlled/uncontrolled component warnings

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

Descrizione

### Current behaviour
Internally `TextInput` seems to always be passing a `value` to the native view
Passing a `defaultValue` prop would raise the following warnings (only on react-native-web) though

> Warning: TextInput contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components

> Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

### Expected behaviour
Support uncontrolled inputs

I want to use a `TextInput` without passing the `value` prop. I might pass a `defaultValue`: https://reactnative.dev/docs/textinput#defaultvalue
> Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

### Code sample

https://snack.expo.dev/@kidroca/paper-uncontrolled-text-input
https://snack.expo.io/@kidroca/paper-uncontrolled-text-input
- it seems the warning does not appear in the snack's console
- for me the warning appears in the browser (I use react-native-web)

### What have you tried

It seems it happens due to the `...rest` spread here, when `rest` contains `defaultValue` it would be spread to the underlying element

https://github.com/callstack/react-native-paper/blob/58851e3376430b8c4278faa38f5b43339743784d/src/components/TextInput/TextInput.tsx#L437-L439
- when both `value` and `defaultValue` are defined react seems to be raising a warning

A workaround that I currently use is to use the `render` prop and render the `react-native` TextInput without passing the value

Could we maybe not pass the `value` down to the native field if we don't have to?
The `value` is updated per each text change

https://github.com/callstack/react-native-paper/blob/58851e3376430b8c4278faa38f5b43339743784d/src/components/TextInput/TextInput.tsx#L376-L381

When we don't pass the value down to the native field? This way we carry less updates back and forth and have better performance. We can still keep it in local state to react to it's changes

### Your Environment

| software | version
| --------------------- | -------
| ios or android | iOS 15.0.2
| react-native | 0.65.1
| react-native-web | ^0.17.1
| react-native-paper | ^4.9.2
| node | v14.18.1
| npm or yarn | npm v6.14.15
| expo sdk | n/a

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia in src/components/TextInput/TextInput.tsx, in corrispondenza della gestione del valore referenziato e dello spread delle rest props. Riproduci il caso defaultValue su react-native-web, quindi verifica che l’uso di TextInput non controllato non produca più avvisi controlled/uncontrolled, mentre l’uso controllato continui a essere supportato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react-native, typescript
Ambito
frontend, mobile
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.