Rocketpilot
commented
8 months ago The entire way the label works with this component is very weird. You should be able to pass a prop with the label text to the component and it should be associated with the input control automatically.
Describe the bug It's necessary because of a label for. In Chrome, it gives a duplicate id error and says it can't find an id for the label for.
To Reproduce
<vue-tailwind-datepicker :id="id" v-model="dateValue" />Expected behavior
<div class="w-full mt-1"><!--v-if--><label for="applicationPeriod" class="block text-sm font-medium leading-6 text-gray-900 text-left mb-2">Período de Inscrição <span>*</span></label><div><div><div class="relative"><div class="relative w-full" data-headlessui-state=""><!----><label class="relative block" id="headlessui-popover-button-6" aria-expanded="false" data-headlessui-state=""><input id="applicationPeriod" name="applicationPeriod" required="" type="text" class="relative block w-full opacity-100 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" autocomplete="off" data-lpignore="true" data-form-type="other" placeholder="DD/MM/AAAA"><div class="absolute inset-y-0 right-0 inline-flex items-center rounded-md overflow-hidden"><button type="button" class="opacity-100 px-2 py-1 mr-1 focus:outline-none text-vtd-secondary-400 dark:text-opacity-70 rounded-md"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></button></div></label><!----><!----></div><div style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"></div><!--v-if--><p class="text-red-500 text-sm font-medium mt-2"></p></div></div></div></div>Generated
<div class="w-full mt-1"><!--v-if--><label for="applicationPeriod" class="block text-sm font-medium leading-6 text-gray-900 text-left mb-2">Período de Inscrição <span>*</span></label><div><div><div class="relative"><div id="applicationPeriod" class="relative w-full" name="applicationPeriod" required="true" data-headlessui-state=""><!----><label class="relative block" id="headlessui-popover-button-6" aria-expanded="false" data-headlessui-state=""><input id="applicationPeriod" name="applicationPeriod" required="" type="text" class="relative block w-full opacity-100 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" autocomplete="off" data-lpignore="true" data-form-type="other" placeholder="DD/MM/AAAA"><div class="absolute inset-y-0 right-0 inline-flex items-center rounded-md overflow-hidden"><button type="button" class="opacity-100 px-2 py-1 mr-1 focus:outline-none text-vtd-secondary-400 dark:text-opacity-70 rounded-md"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></button></div></label><!----><!----></div><div style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"></div><!--v-if--><p class="text-red-500 text-sm font-medium mt-2"></p></div></div></div></div>Extra It would be good if the label below could be removed for those who need a different label.
<label class="relative block" id="headlessui-popover-button-6" aria-expanded="false" data-headlessui-state=""></label>Screenshots
Desktop & mobile: