Merge pull request #1931 from SergioCrisostomo/fix-datepicker-blur

make picker close on blur

src/components/date-picker/panel/date-range.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes">
+    <div :class="classes" @mousedown.prevent>
         <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
             <div
                 :class="[prefixCls + '-shortcut']"

src/components/date-picker/panel/date.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes">
+    <div :class="classes" @mousedown.prevent>
         <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
             <div
                 :class="[prefixCls + '-shortcut']"

src/components/date-picker/panel/time-range.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes">
+    <div :class="classes" @mousedown.prevent>
         <div :class="[prefixCls + '-body']">
             <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
                 <div :class="[timePrefixCls + '-header']">

src/components/date-picker/panel/time.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="[prefixCls + '-body-wrapper']">
+    <div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
         <div :class="[prefixCls + '-body']">
             <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
             <div :class="[prefixCls + '-content']">

src/components/date-picker/picker.vue

@@ -12,6 +12,7 @@
                     :name="name"
                     @on-input-change="handleInputChange"
                     @on-focus="handleFocus"
+                    @on-blur="handleBlur"
                     @on-click="handleIconClick"
                     @mouseenter.native="handleInputMouseenter"
                     @mouseleave.native="handleInputMouseleave"
@@ -290,6 +291,9 @@
                 if (this.readonly) return;
                 this.visible = true;
             },
+            handleBlur () {
+                this.visible = false;
+            },
             handleInputChange (event) {
                 const oldValue = this.visualValue;
                 const value = event.target.value;
@@ -478,6 +482,9 @@
                     if (this.picker) this.picker.resetView && this.picker.resetView(true);
                     this.$refs.drop.destroy();
                     if (this.open === null) this.$emit('on-open-change', false);
+                    // blur the input
+                    const input = this.$el.querySelector('input');
+                    if (input) input.blur();
                 }
             },
             internalValue(val) {