idea Have calcite-input type be reflected on the resulting HTML code in Calcite Design System Ideas

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

TomSellsted — Wed, 16 Nov 2022 17:13:06 GMT

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

Re: Have calcite-input type be reflected on the resulting HTML code - Status changed to: In Product Plan

KittyHurley — Tue, 13 Dec 2022 17:24:51 GMT

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.

Re: Have calcite-input type be reflected on the resulting HTML code - Status changed to: Implemented

KittyHurley — Tue, 20 Dec 2022 17:00:00 GMT

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:

<calcite-input input-mode="numeric"></calcite-input>  <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.