Closing on click when wrapped in label
See original GitHub issueWhen the datepicker is wrapped in a label tag, there is some strange behaviour possibly related to click events causing the calendar to close and not reopen whenever anything except a date is clicked on.
For example, changing to the previous or next month will close the calendar as will clicking anywhere inside the box but not on an actual date:
<label><p>Date</p>
<datepicker name="max_date" v-model="form_data.max_date" format="dd/MM/yyyy"></datepicker>
</label>
Issue Analytics
- State:
- Created 6 years ago
- Reactions:2
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Clicking on the label should close a tab which doesn't work
I am trying to close tabs by clicking on the tab label. I added a click event listener to the label but this...
Read more ><label><select></label> doesn't open when clicked #57 - GitHub
It immediately closes because the focus is no longer on the actual input, it is on the label (as far as I know)....
Read more >Close Button | Foundation for Sites 6 Docs
A close button is a <button> element with the class .close-button . We use the multiplication symbol ( × ) as the X...
Read more >When a Click is Not Just a Click | CSS-Tricks
Clicks events are fired as a single event for clicking on the label and two events if you click on the checkbox. The...
Read more >Using label elements to associate text labels with form controls
An additional benefit of this technique is a larger clickable area for the control, since clicking on the label or the control will...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This appears to still be happening in the latest 1.5.3 release. I have found that a better solution than adding the prevent to the label is to add another element under the label which can perform the @click.prevent behavior. This allows the label to continue to behave as a label and focus/open the datepicker when clicked. Working example: https://codesandbox.io/s/5271my6x4k
This appears to still be happening in the latest 1.6.2 release I spent a lot of time looking for this error. I would appreciate it if you could write on ReadMe.
Thanks