callstack / callstack/react-native-paper

TextInput controlled/uncontrolled component warnings

Offen
#2,955 9 Kommentare 6 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
repro provided
Vorherrschende Sprache
TypeScript
Sterne
14.5k
Forks
2.2k
Ø Merge
5 T. 23 Std.
Gemergte PRs (30 T.)
12

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne in src/components/TextInput/TextInput.tsx bei der Behandlung des referenzierten Werts und der Ausbreitung der restlichen Props. Reproduziere den defaultValue-Fall auf react-native-web und überprüfe anschließend, dass die Verwendung von unkontrolliertem TextInput keine Controlled/Uncontrolled-Warnungen mehr erzeugt, während die kontrollierte Verwendung weiterhin unterstützt wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native, typescript
Bereich
frontend, mobile
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.