[Vuejs]-V-date-picker does not close on tab out

by

0👍

✅

add this @keydown.tab=’menu1 = false’ in v-text-field

0👍

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.

Leave a comment