v-date-picker nested in label - year/month picker closes immediately

[arknu]

If I have a v-date-picker nested in a label, the navigation popup you get by clicking the month name in the calendar popup will close immediately after opening it. If I move the v-date-picker out of the label tag, it works properly. It seems that being nested in a label will somehow cause focusing issues when opening the main popup.

[innovaweb-dev]

Try this or show us your code ?

     <div class="input-group mb-3">
                  <label for="date" class="input-group-text">Label</label>
                  <v-date-picker
                    v-model="begin_date"
                    :popover="{ visibility: 'click' }"
                  >
                    <template v-slot="{ inputValue, inputEvents }">
                      <input               
                        :value="inputValue"
                        v-on="inputEvents"
                      />
                    </template>
                  </v-date-picker>
                </div>

[arknu]

@rifton007 Yes, I have of course moved it outside the label tag and wrapped the whole thing in a reusable component, which will generate a unique ID to associate the label tag with the input. So it works fine, even if it is slightly more inconvenient. My point is, <v-date-picker> should work even if nested in a label tag, as every normal input tag can support this.

[kgilden]

Here's a video demonstrating how the year/month picker gets closed immediately.

https://user-images.githubusercontent.com/918599/163142897-72d97136-c8ed-443a-adf2-475a73964e83.mp4

Here's a video demonstrating how the datepicker itself is not closed when a date is chosen. On top of it is a datepicker which is not wrapped inside <label /> and you can see it working fine.

https://user-images.githubusercontent.com/918599/163146558-637cc8a4-8860-4d1a-a619-e2967e724eb4.mp4

[saint-james-fr]

Hey there, same issue here, I must add this is also when using template #default={inputValue, inputEvents}, any news on this?