Restrict the input to numerical characters

I can’t seem to find a workaround for the issue I’m facing.

I’m trying to restrict the input field to only allow numbers, and I’ve tried several solutions like setting the input data type to “Number”, functions without luck.
I either end up with an error or allowing any characters to be input in the field making the label collapse onto the characters in the field:
image

A bit frustrated, I ended up writing it as a custom component, but I would really like to know if there is another way to solve this in Appfarm.

Hi, and welcome to the Appfarm Community!

Can we ask if it is Firefox you are using? We have been able to replicate this issue using Firefox, but not with Chrome or Edge. On Firefox, the input type “Number” works on mobile devices, as only the number keyboard shows.

If this issue is also found on other browsers, could you send a screenshot of the setup of the Text Edit in Create so that we can try and assist further, or produce a bug for our Dev team to explore?

Thanks
Rhys
Appfarm

1 Like

You’re correct, I am using firefox and it does seem to be working in chromium based browsers.
I guess I skimmed to fast through the docs, although it looked like there was full support for firefox :thinking:.
Is this something that can/will be patched?
Anyways, thank you for looking into it!

Hi,

This occurs because Firefox treats input-elements with the tag “input=number” differently than Chrome. The reason for this is mostly accessibility.

The web and Android versions of Chrome implement this by silently discarding all letter input except the letter ‘e’, while Firefox does nothing.

One solution that is outlined by the gov.uk report, is to instead use “inputmode” and “pattern”. While “inputmode” is supported today, “pattern” is not. I have made a challenge for the latter.

// Erik

1 Like