Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gregorvoinov opened this issue Jan 22, 2025 · 4 comments
Labels
enhancement New feature or request triage v3 #1289

Comments

@gregorvoinov
Copy link

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 gregorvoinov added enhancement New feature or request triage v3 #1289 labels Jan 22, 2025
@gregorvoinov gregorvoinov changed the title option to disable on press behavior for increment/decrement for inputNumber component option to disable on press behaviour for increment/decrement for inputNumber component Jan 22, 2025
@gregorvoinov
Copy link
Author

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
Copy link
Member

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.

@gregorvoinov
Copy link
Author

gregorvoinov commented Jan 27, 2025

hi,

how should me help this to stop the auto in/decrement of the inputfield if the button is pressed? I don't have a mousedown event on the UButton component to disable the button and enable it on mouseup. Or what was your idea?

At the moment I'm using a watcher for the modelValue, to debounce the api requests.

watch(
    () => _quantity.value,
    () => {
      id && clearTimeout(id);
      id = setTimeout(() => {
        update();
      }, 400);
    }
  );

first I used a click event but the event doesn't get fired if I reach the min or max value

 <UInputNumber
    :disabled="(loadingDec || loadingInc) && quantity === 0"
    :min="0"
    :max="20"
    v-model="_quantity"
    variant="soft"
    size="xl"
  >
    <template #decrement>
      <UButton
        :click="update" <---- doesn't fire if _quantity ist 0
        variant="link"
        :icon="_quantity <= 1 ? 'i-heroicons-trash' : 'i-lucide-minus'"
      />
    </template>

@gregorvoinov
Copy link
Author

hmm even if I set disabled on the button it still updates the modelValue.

<UInputNumber
    :disabled="(loadingDec || loadingInc) && quantity === 0"
    :min="0"
    :max="20"
    v-model="_quantity"
  >
    <template #decrement>
      <UButton
        disabled
      />
    </template>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request triage v3 #1289
Projects
None yet
Development

No branches or pull requests

2 participants