Nuxt•4mo ago

[Nuxt UI] nuxt 3, UCheckbox misclicking to the first item

Hi everyone 👋 , I have rather unusual problem and not sure where to look! I'm using Nuxt UI UCheckbox component inside a UFormGroup which is rendered as an array. Clicking on any of the checkboxes (outside of the checkbox boundary) always select the first checkbox for some reason. There are no errors in the console or such, I reckon it must be something to do with CSS messing something up. I've attached a gif with the described issue, and here's my code below. Any pointers would be appreciated! 🙂

          <UFormGroup label="Select 3 tags" required>
            <div class="flex gap-3 flex-wrap">
              <UCheckbox
                v-for="tagItem in tagOptions"
                :disabled="isCheckboxDisabled(tagItem)"
                :key="tagItem.id"
                :checked="selectedTags.some((tag) => tag.id === tagItem.id)"
                @change="toggleCheckbox(tagItem)"
                :ui="{
                  wrapper:
                    'bg-violet-50 px-2 py-1 flex items-center rounded-full w-fit',
                  inner: 'ms-2 checked:bg-zinc-500',
                }"
              >
                <template #label>
                  <span
                    :class="[
                      'font-normal transition-all',
                      isCheckboxDisabled(tagItem)
                        ? 'text-zinc-400'
                        : 'text-zinc-800',
                    ]"
                    >{{ tagItem.name }}</span
                  >
                </template>
              </UCheckbox>

          <UFormGroup label="Select 3 tags" required>
            <div class="flex gap-3 flex-wrap">
              <UCheckbox
                v-for="tagItem in tagOptions"
                :disabled="isCheckboxDisabled(tagItem)"
                :key="tagItem.id"
                :checked="selectedTags.some((tag) => tag.id === tagItem.id)"
                @change="toggleCheckbox(tagItem)"
                :ui="{
                  wrapper:
                    'bg-violet-50 px-2 py-1 flex items-center rounded-full w-fit',
                  inner: 'ms-2 checked:bg-zinc-500',
                }"
              >
                <template #label>
                  <span
                    :class="[
                      'font-normal transition-all',
                      isCheckboxDisabled(tagItem)
                        ? 'text-zinc-400'
                        : 'text-zinc-800',
                    ]"
                    >{{ tagItem.name }}</span
                  >
                </template>
              </UCheckbox>

7 Replies

peterstnsz•4mo ago

Answer: Looks like when I remove the <UFormGroup /> around the checkboxes, this solves the issue...

IsraelOrtuno•4mo ago

This has happened to me in the past and seems to be related to the <label> and maybe the for attribute

IsraelOrtuno•4mo ago

https://github.com/nuxt/ui/tree/dev/src/runtime/components#L5

GitHub

ui/src/runtime/components at dev · nuxt/ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS. - nuxt/ui

IsraelOrtuno•4mo ago

could you paste the rendered html of that entire block?

IsraelOrtuno•4mo ago

https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Checkbox.vue#L19

GitHub

ui/src/runtime/components/forms/Checkbox.vue at dev · nuxt/ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS. - nuxt/ui

peterstnsz•4mo ago

Hey @IsraelOrtuno thank you for your reply! I've extracted the rendered html block and created a codepen: https://codepen.io/peterstnsz/pen/PovZrJx It looks like the <label for="nTBEFXjdznC_16"> is identical which (like you mentioned) most likely causes the issue

Peter

CodePen

Misclicking checkbox

...

IsraelOrtuno•4mo ago

yes! very likely

Gaming

Programming

[Nuxt UI] nuxt 3, UCheckbox misclicking to the first item