InputNumber: doesn't open numeric keyboard on mobile devices

[anenoglyadov]

Describe the bug

When using InputNumber on mobile devices, it shows regular alphabetical keyboard. Since number input allows input only numbers, it should show numeric keyboard only.

! Important: It was suggested in my previous bug report: https://github.com/primefaces/primevue/issues/3803 to use :inputProps="{type: 'number'}", but in this case browser shows up/down arrows, which is not appropriate in my case and in general, if input number has fractional numbers, when you click those arrows, it removes fractional part (which from my perspective another bug). .

Reproducer

https://primevue.org/inputnumber/

PrimeVue version

3.26.1

Vue version

3.x

Language

ALL

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

I would expect to see a regular numeric input without additional controls which opens numeric keyboard on mobile browsers.

[bunomonteiro]

For those experiencing issues with mobile keyboard display, use the "inputmode" property. This property can be configured in two ways:

1- If the component API has the "inputProps" property (such as the InputNumber component):

<InputNumber :inputProps="{ inputmode: 'numeric' }" />

2- If the component is the input itself (as in InputMask):

<InputMask inputmode="numeric" />

The "inputmode" supports the following values:

• none
• text
• decimal
• numeric
• tel
• search
• email
• url

[matiasnl23]

@bunomonteiro Hi, does that work for you? I tried the same, and indeed, it shows the number keypad on Android. However, when I type the number, it does nothing. The input only reflects the change when I press semicolon. Additionally, the backspace does not seem to work.

[Mecowhy37]

Same here, exactly as @bunomonteiro described.

[bunomonteiro]

Yeah, the InputNumber component is being somehow obstructed from receiving the input event. The keyboard is displayed, but the inputs are not being forwarded to the component.

I've created a reproduction example of the issue: snippet

[MeenaMisae]

I'm facing the same issue on mobile. When I remove the input mode numeric, I can write some things in the input and delete, but not everything, which makes the InputNumber work somewhat correctly (somewhat because I can't delete everything) when it has letters, but not numbers.

[MattAlign]

iPhone seems to work fine with InputNumber component. But when i try to use it on an android i can't delete the numbers and have similar behaviours as described above . I also have a passcode on my app which when used on android doesn't allow me to add in any numbers at all but seems to work fine on iPhone.

all the input fields seem to work fine on Desktop