InputNumber: On mobile, the focus on input makes using increment / decrement buttons difficult

[sleepybjr]

Describe the bug

1. Open InputNumber on mobile.
   https://www.primefaces.org/primereact/inputnumber/

2. Click on the increment / decrement buttons.

Button press causes the input box to focus causing the mobile keyboard to be shown and hidden repeatedly on multiple clicks. Also, mobile will zoom in and make using the button difficult.

Also, buttons don’t use the spinner on mobile.

Reproducer

https://www.primefaces.org/primereact/inputnumber/

PrimeReact version

8.0.1

React version

18.x

Language

ES6

Build / Runtime

Next.js

Browser(s)

iOS 15.4

Steps to reproduce the behavior

1. Open InputNumber on mobile.
   https://www.primefaces.org/primereact/inputnumber/

2. Click on the increment / decrement buttons.

Expected behavior

Using buttons on mobile shouldn't make the keyboard appear but should change the value.

[melloware]

I submitted a PR that turns this off by default and if someone wants the behavior they can use the autoFocus property to enable it.

For example:

<InputNumber inputId="minmax-buttons" 
value={value20} 
onValueChange={(e) => setValue20(e.value)} 
showButtons min={0} max={100} 
autoFocus />

[sleepybjr]

The current fix only seems to change desktop browser. I did some digging and it seems setSelectionRange causes the input box to focus on iOS, thus bringing up the keyboard.

Also, the click and hold spin doesn't seem to work on iOS. I tried adding similar functions as onMouseDown and onMouseUp to onTouchStart and onTouchEnd but it causes a double-click issue with onMouseDown / onTouchStart. Not sure if you would like another ticket created for that one.

I can also look into it later.

Thanks for the quick response!

[melloware]

Yeah let me know what you find out setSelectionRange looks like its used everywhere in this component.

[melloware]

And yes the click and hold should be a separate issue I think from this focus issue?

[sleepybjr]

Awesome, sounds good.

In addition to your current changes, adding the if statement to this line to wrap updateInput seems to fix the issue for me:

primereact/components/lib/inputnumber/InputNumber.js

Line 185 in f9fab4b

updateInput(newValue, null, 'spin');

if (props.autoFocus) { updateInput(newValue, null, 'spin'); }

[melloware]

ok let me update my PR

[melloware]

OK PR updated!

[sleepybjr]

Awesome, looks good to me!

[melloware]

The only thing I am not sure about is props.autoFocus && updateInput(newValue, null, 'spin');

So that won't update the input field at all while spinning right? So how does the Input field gets its new value?

[melloware]

I changed my mind and went with this instead:

 // touch devices trigger the keyboard to display because of setSelectionRange
!DomHandler.isTouchDevice() && updateInput(newValue, null, 'spin');

[sleepybjr]

Even better. From my understanding, the value is updated using handleOnChange. The updateInput function just moves the cursor selection on the input.

[silviagreen]

I tried today using primereact 10.7.0 on an Iphone 12, latest OS and the keyboard still appears everytime I click the increment/decrement button.

[melloware]

@silviagreen please open a new ticket.