Community

Have calcite-input type be reflected on the resulting HTML code

839
2
11-16-2022 09:13 AM
Status: Implemented
Labels (1)
Labels
TomSellsted
by MVP Regular Contributor
MVP Regular Contributor

When using calcite-input, the type is reflected on the input component, but on in the HTML.  So when I use the input type of number and inspect the element in the developer tools, the input type is "text".  The reason I am asking for this is that when I use this component on an iPad, I would like a numeric keyboard presented.  With the HTML element being "text", an alpha keyboard is always displayed and I have had to an HTML input tag instead of calcite-input component.  I would much rather be able to use the calcite-input component in my app for field use, but the input tag gets me the right keyboard.

I have an example app for you to view and see the difference:  Calcite Input Type (yakimawa.gov)

Best Regards,

Tom

Tags (1)
0 Kudos
2 Comments
KittyHurley
by Esri Contributor
‎12-06-2022 02:19 PM
Status changed to: In Product Plan

Thanks for the feedback @TomSellsted! We're planning to incorporate this in through the native "inputmode" property in early 2023. You can subscribe to the issue on GitHub to follow along with progress, otherwise we will repost to this issue once released.

KittyHurley
by Esri Contributor
‎12-20-2022 09:00 AM
Status changed to: Implemented

Calcite's final beta release, beta.99, added an "input-mode" attribute ("inputMode" property) so devices can interpret the differing modes, such as "numeric" and "tel".

For instance:

<!-- Numeric -->
<calcite-input input-mode="numeric"></calcite-input>

<!-- Telephone number -->
<calcite-input input-mode="tel"></calcite-input>

 

Of note that there are many breaking changes as we prepare for the January 2023 (1.0) release. If updating from any previous beta version to beta.99, we recommend taking an in-depth look at the CHANGELOG, in particular the breaking changes between beta.98 and beta.99.