Number pad keyboard for Number Inputs

💬 Queries and Resources
5

So, I've done some fiddling with this and I'm seeing some interesting behavior. I've tried three different configurations in JSFiddle to see what would happen – https://jsfiddle.net/5gj3erob/4/

  1. Number input with pattern="[0-9]*"

  2. Number input with inputmode="numeric" – this is the default for the Retool App that I've already tested.

  3. Number input with type="number"

In #1 and #2, I have type="text" which is the default attribute. When the pattern and inputmode are not specified, they are omitted.

#1 and #2 behave as expected and as desired. #3 does not display the number pad keyboard, but instead the standard keyboard with the number section visible. I find this interesting, because with the code directly copied from Retool App that I've been testing, the desired number pad keyboard is activated on the JSFiddle, but when running the Retool page, it doesn't.

Are you aware of anything that might be keeping this from activating? Is there anything within the Retool backbone that was intentionally added to prevent the different keyboards from activating?

Thanks,
Chris