Strange behavior when nesting inside of label

[steven87vt]

trafficstars

Versions

• vue: 2
• vue-datetime: 0 and 1
• luxon: 1

Description:

I started to use the 0.x version because of the time option. I have a dropdown with some labels and I need to limit the viewable area of another component based on the users time input.

In 0.x, the time picker cannot be canceled or closed. When you click a new time it doesnt update the view until you hit ok, then the selected time will be reflected however the view doesnt close and cancel doesnt work.

In 1.x the time picker mostly wont display at all unless its broken outside of the label. At which point you have to start messing around with bootstrap css to get everything to line up nicely, as well as the 1.x feature not having a hour picker.

Steps To Reproduce:

Please see this codesandbox: https://codesandbox.io/s/ly1989p1q9 All you have to do is replace vue-datetime version to the 0.7.1 and comment out the css import in components/dropdown.vue and rerun to see the 0.x behavior.

[mariomka]

This strange behavior is produced by label and click andfocusevents. When the component is nested in a label all inside elements fire the click and focus events when the user clicks on them.

At the moment the solution is to add for attribute in thelabel.

[JJBocanegra]

I don't always can add a for attribute to a label, there is no other solution to this?