Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextInput not forwarding type #2604

Closed
1 task done
TimPetricola opened this issue Nov 7, 2023 · 3 comments
Closed
1 task done

TextInput not forwarding type #2604

TimPetricola opened this issue Nov 7, 2023 · 3 comments
Labels

Comments

@TimPetricola
Copy link

TimPetricola commented Nov 7, 2023

Is there an existing issue for this?

  • 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 TimPetricola changed the title TextInput not forwarding type a TextInput not forwarding type Nov 7, 2023
@necolas
Copy link
Owner

necolas commented Nov 7, 2023

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/

@TimPetricola
Copy link
Author

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

@necolas
Copy link
Owner

necolas commented Nov 8, 2023

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants