[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! π
![No description](https://cdn.answeroverflow.com/1240587135740805162/checkboxMisclick.gif)
7 Replies
Answer: Looks like when I remove the <UFormGroup /> around the checkboxes, this solves the issue...
This has happened to me in the past and seems to be related to the <label> and maybe the
for
attributeGitHub
ui/src/runtime/components at dev Β· nuxt/ui
A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS. - nuxt/ui
could you paste the rendered html of that entire block?
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
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 issueyes! very likely