react-native-web icon indicating copy to clipboard operation
react-native-web copied to clipboard

TextInput not forwarding type

Open TimPetricola opened this issue 2 years ago • 3 comments

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

TimPetricola avatar Nov 07 '23 10:11 TimPetricola

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/

necolas avatar Nov 07 '23 18:11 necolas

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

TimPetricola avatar Nov 08 '23 07:11 TimPetricola

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?

necolas avatar Nov 08 '23 18:11 necolas