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

Syiana commented 5 months ago

Describe the bug

Button press causes the input box to focus when it hits the min value, causing the mobile keyboard to be shown.

"Same" as https://github.com/primefaces/primereact/issues/2843

Reproducer

-

PrimeVue version

3.5

Vue version

3.x

Language

ES6

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

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

Click on the increment / decrement buttons with min/max value

Expected behavior

No response

danielmalmros commented 4 months ago

+1 Would be nice with an option to avoid incrementbutton and decrementbutton triggering keyboard on mobile/phones.

likaon7 commented 3 months ago

I've just made this quick fix:

<InputNumber 
       @input="$event.originalEvent.target.blur();$event.originalEvent.target.focus()"
      showButtons buttonLayout="horizontal" 
      >
       <template #incrementbuttonicon>
           <span class="pi pi-plus" style="pointer-events: none;" />
       </template>
       <template #decrementbuttonicon>
           <span class="pi pi-minus" style="pointer-events: none;" />
       </template>
</InputNumber>

it does work when using inc/dec templates only

versions: "primevue": "^4.0.1", "vue": "^3.3.0",

PrimeVue version

3.5

4.0.1 is affected too

davidjmstewart commented 2 weeks ago

+1 for requesting this as part of the API. I came across this thread looking for a solution to this problem.

@likaon7's suggestion seems to work for me, however I am getting typescript compilation errors telling me that:

Property 'blur' does not exist on type 'EventTarget'
Property 'focus' does not exist on type 'EventTarget'.

I fixed this with:

        <InputNumber
          @input="
            e => {
              const target = e.originalEvent.target as HTMLElement
              if (target) {
                target.blur()
                target.focus()
              }
            }
          "
          input-id="red-input"
          v-model="red"
          class="w-1/5"
          :min="0"
          :max="255"
          showButtons
          buttonLayout="vertical"
          :allow-empty="false"
        />

Here is a video showing the keyboard popping up on mobile, obscuring other elements a user would want to be able to interact with (such as other increment buttons, or sliders):

https://github.com/user-attachments/assets/fd75d672-db3c-49d5-9079-5f7fe6c0af3a

primefaces / primevue