option to disable on press behaviour for increment/decrement for inputNumber component

[gregorvoinov]

Description

Hi,

it would be nice to have the option to disable the behaviour that the numbers increase or decrease when the buttons are pressed. Because even if I disable the component it doesn't stops.

<UInputNumber
    :disabled="loadingDec || loadingInc"
    :min="0"
    :max="10"
    v-model="quantity"
    variant="soft"
    size="xl"
    ><template #decrement>
      <UButton
        :loading="loadingDec"
        variant="link"
        :icon="quantity <= 1 ? 'i-heroicons-trash' : 'i-lucide-minus'"
        @click="loadingDec = true"
        @mousedown="onMousedown()"
        :ui="{
          base: `${iconHoverColor} text-gray-500 disabled:text-gray-500 cursor-pointer`,
        }"
      />
    </template>
    <template #increment>
      <UButton
        :loading="loadingInc"
        variant="link"
        icon="i-lucide-plus"
        @click="loadingInc = true"
        :ui="{
          base: 'text-gray-500 hover:text-[var(--ui-color-primary-500)] disabled:text-gray-500 cursor-pointer',
        }"
      />
    </template>
  </UInputNumber>

best,
gregor

Additional context

No response

[gregorvoinov]

I also have another issue. When I use the min and max prop the click event is no longer fired when it reaches the min or max level... Need this for a shopping cart to update the listitem with the min or max quantity.

[benjamincanac]

If you use the #increment and #decrement slots to implement your own buttons, it's up to you to handle the disabled logic, you can use the disabled prop on the buttons.