question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Closing on click when wrapped in label

See original GitHub issue

When 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:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
wpatter6commented, Oct 25, 2018

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

1reaction
DinnerKangcommented, Jul 22, 2019

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found