v-date-picker does not close on tab out

Question

I'm fairly new to vuetify and vue in general. The problem I'm facing is that when I click on a datepicker, the calendar pops up and when I tab out, the cursor moves to the next input field but the calendar does not close. I want it to close automatically on tab out.

I tried setting close-on-content-click="true" instead of false but to no avail. I'm not sure what else to try.

Here is a codepen I found vuetify documentation that has similar implementation and behavior as my application. codepen

Thank you for any inputs.

Answer 1

close-on-content-click is for mouse clicks and does not apply to keyboard actions. You need to explicitly toggle the v-menu model when the input loses focus.

To close the menu when whenever the input field loses focus I would attach the toggle to the blur event. You can do this by replacing the @blur listener to a method, in which you will set the menu model to false.

<v-text-field
  v-model="dateFormatted"
  label="Date"
  hint="MM/DD/YYYY format"
  persistent-hint
  prepend-icon="mdi-calendar"
  v-bind="attrs"
  @blur="updateDate"
  v-on="on"
/>

updateDate(event) {
  // This is the same value as dateFormatted,
  // you don't need to say this.dateFormatted like in your codepen.
  const value = event.target.value;
  this.date = this.parseDate(value);
  this.menu1 = false;
}

"Destructuring" is JS good practice instead of randomly named variables or verbosity so I would write the first line as: const { value } = event.target;

If you were passing additional variables into updateDate method you would need to write it as updateDate($event, variable) but if not, $event as first parameter is a given.