fix(MdDatePicker): close datepicker on blur (#2372)

- fixes issue #2371 - fixes issue #2375 - fixes issue #2343 - fixes issue #2372
vuematerial · Dec 16, 2022 · b074be6 · b074be6
1 parent 6ddf96b
commit b074be6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
@@ -1,22 +1,23 @@
 <template>
   <md-field :class="['md-datepicker', { 'md-native': !mdOverrideNative }]" :md-clearable="mdClearable" @md-clear="onClear">
-    <md-date-icon class="md-date-icon" @click.native="toggleDialog" />
-    <md-input :type="type" ref="input" v-model="inputDate" @focus.native="onFocus" :pattern="pattern" />
+    <md-date-icon class="md-date-icon" @click.native="toggleDialog(true)" />
+    <md-input :type="type" ref="input" v-model="inputDate" @focus.native="onFocus" @focusout.native="onFocusOut" :pattern="pattern" />
 
     <slot />
 
     <keep-alive>
       <md-datepicker-dialog
         v-if="showDialog"
+        ref="mdRef"
         :md-date.sync="localDate"
         :md-disabled-dates="mdDisabledDates"
         :mdImmediately="mdImmediately"
-        @md-closed="toggleDialog"
+        @md-closed="toggleDialog(false)"
         :md-placement="mdPlacement"
       />
     </keep-alive>
 
-    <md-overlay class="md-datepicker-overlay" md-fixed :md-active="showDialog" @click="toggleDialog" />
+    <md-overlay class="md-datepicker-overlay" md-fixed :md-active="showDialog" @click="toggleDialog(false)" />
   </md-field>
 </template>
 
@@ -50,6 +51,10 @@
         type: Boolean,
         default: true
       },
+      mdCloseOnBlur: {
+        type: Boolean,
+        default: true
+      },
       mdOverrideNative: {
         type: Boolean,
         default: true
@@ -141,7 +146,7 @@
       }
     },
     watch: {
-      inputDate (value) {
+      inputDate () {
         this.inputDateToLocalDate()
       },
       localDate () {
@@ -186,9 +191,10 @@
       }
     },
     methods: {
-      toggleDialog () {
+      toggleDialog (newState = null) {
         if (!isFirefox || this.mdOverrideNative) {
-          this.showDialog = !this.showDialog
+          // If new state (boolean) is provide, assign that to showDialog, else just toggle
+          this.showDialog = newState === null ? !this.showDialog : newState
           if (this.showDialog) {
             this.$emit('md-opened')
           } else {
@@ -200,7 +206,12 @@
       },
       onFocus () {
         if (this.mdOpenOnFocus) {
-          this.toggleDialog()
+          this.toggleDialog(true)
+        }
+      },
+      onFocusOut (e) {
+        if (this.mdCloseOnBlur && this.$refs.mdRef.$el !== e.relatedTarget) {
+          this.toggleDialog(false)
         }
       },
       inputDateToLocalDate () {

diff --git a/src/components/MdDatepicker/MdDatepickerDialog.vue b/src/components/MdDatepicker/MdDatepickerDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <md-popover :md-settings="popperSettings" md-active>
     <transition name="md-datepicker-dialog" appear @enter="setContentStyles" @after-leave="resetDate">
-      <div class="md-datepicker-dialog" :class="[$mdActiveTheme]">
+      <div tabindex="-1" class="md-datepicker-dialog" :class="[$mdActiveTheme]">
         <div class="md-datepicker-header">
           <span class="md-datepicker-year-select" :class="{ 'md-selected': currentView === 'year' }" @click="currentView = 'year'">{{ selectedYear }}</span>
           <div class="md-datepicker-date-select" :class="{ 'md-selected': currentView !== 'year' }" @click="currentView = 'day'">