callstack / callstack/react-native-paper

TextInput controlled/uncontrolled component warnings

オープン
#2,955 コメント 9 件 リアクション 6 件 担当者 0 名 GitHub で見る
repro provided
主要言語
TypeScript
スター
14.5k
フォーク
2.2k
平均マージ
5日 23時間
マージ済み PR(30日)
12

説明

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

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。