react-native-web
react-native-web copied to clipboard
TextInput not forwarding type
Is there an existing issue for this?
- [X] I have searched the existing issues
Describe the issue
I'm using react-native-web in a project targeting a web environment only.
I need to implement various inputs, including a date one and an input one. I'd like to rely on the standard type attribute to leverage the native browser implementation:
<TextInput type="date" />
<TextInput type="number" />
The 2 inputs above are instead rendering an <input type="text" />
This is due to <TextInput /> not forwarding the type prop to the underlying <input /> (it only tried to deduce a type from inputMode if its passed, but it doesn't give an exhaustive list of options)
Expected behavior
I'm expecting TextInput to forward the type prop to the resulting DOM node.
Steps to reproduce
See codesandbox
Test case
https://codesandbox.io/s/react-native-web-input-type-dqglly?file=/src/App.js
Additional comments
Once it's validated that type should be forwarded. I can take care of opening a PR
If you're only targeting web, you can use input directly.
See docs on wrapping elements so they can still be styled https://necolas.github.io/react-native-web/docs/unstable-apis/
Thanks for the reply @necolas !
Unfortunately, we can’t rely on raw inputs. The idea is to build our inputs components on top of react-native-web (and Tamagui) as part of our design system.
This design system aims to be usable in different kind of applications and features: mobile-only ones, web-only ones, and universal ones.
As such we really need to support web standards directly in these components to avoid getting mobile related limitations when working in a standard web environment.
It’s quite similar to this other issue I reported in #2596
None of those features exist in React Native, so it wouldn't be cross-platform compatible. Are you sure you can't use existing features like platform-forking files to build your own version of whatever component you need, implemented for each platform?