callstack / callstack/react-native-paper
TextInput controlled/uncontrolled component warnings
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### 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
Contributor guide
Assessment
This issue has not been assessed yet.