Commit 030a522daa1a07d11248401747b1ad4afba4c120

Authored by Sergio Crisostomo
1 parent 58cd4675

make picker close on blur

src/components/date-picker/panel/date-range.vue
1 <template> 1 <template>
2 - <div :class="classes"> 2 + <div :class="classes" @mousedown.prevent>
3 <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length"> 3 <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
4 <div 4 <div
5 :class="[prefixCls + '-shortcut']" 5 :class="[prefixCls + '-shortcut']"
src/components/date-picker/panel/date.vue
1 <template> 1 <template>
2 - <div :class="classes"> 2 + <div :class="classes" @mousedown.prevent>
3 <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length"> 3 <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
4 <div 4 <div
5 :class="[prefixCls + '-shortcut']" 5 :class="[prefixCls + '-shortcut']"
src/components/date-picker/panel/time-range.vue
1 <template> 1 <template>
2 - <div :class="classes"> 2 + <div :class="classes" @mousedown.prevent>
3 <div :class="[prefixCls + '-body']"> 3 <div :class="[prefixCls + '-body']">
4 <div :class="[prefixCls + '-content', prefixCls + '-content-left']"> 4 <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
5 <div :class="[timePrefixCls + '-header']"> 5 <div :class="[timePrefixCls + '-header']">
@@ -205,4 +205,4 @@ @@ -205,4 +205,4 @@
205 if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true; 205 if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
206 } 206 }
207 }; 207 };
208 -</script>  
209 \ No newline at end of file 208 \ No newline at end of file
  209 +</script>
src/components/date-picker/panel/time.vue
1 <template> 1 <template>
2 - <div :class="[prefixCls + '-body-wrapper']"> 2 + <div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
3 <div :class="[prefixCls + '-body']"> 3 <div :class="[prefixCls + '-body']">
4 <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div> 4 <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
5 <div :class="[prefixCls + '-content']"> 5 <div :class="[prefixCls + '-content']">
src/components/date-picker/picker.vue
@@ -12,6 +12,7 @@ @@ -12,6 +12,7 @@
12 :name="name" 12 :name="name"
13 @on-input-change="handleInputChange" 13 @on-input-change="handleInputChange"
14 @on-focus="handleFocus" 14 @on-focus="handleFocus"
  15 + @on-blur="handleBlur"
15 @on-click="handleIconClick" 16 @on-click="handleIconClick"
16 @mouseenter.native="handleInputMouseenter" 17 @mouseenter.native="handleInputMouseenter"
17 @mouseleave.native="handleInputMouseleave" 18 @mouseleave.native="handleInputMouseleave"
@@ -290,6 +291,9 @@ @@ -290,6 +291,9 @@
290 if (this.readonly) return; 291 if (this.readonly) return;
291 this.visible = true; 292 this.visible = true;
292 }, 293 },
  294 + handleBlur () {
  295 + this.visible = false;
  296 + },
293 handleInputChange (event) { 297 handleInputChange (event) {
294 const oldValue = this.visualValue; 298 const oldValue = this.visualValue;
295 const value = event.target.value; 299 const value = event.target.value;
@@ -478,6 +482,9 @@ @@ -478,6 +482,9 @@
478 if (this.picker) this.picker.resetView && this.picker.resetView(true); 482 if (this.picker) this.picker.resetView && this.picker.resetView(true);
479 this.$refs.drop.destroy(); 483 this.$refs.drop.destroy();
480 if (this.open === null) this.$emit('on-open-change', false); 484 if (this.open === null) this.$emit('on-open-change', false);
  485 + // blur the input
  486 + const input = this.$el.querySelector('input');
  487 + if (input) input.blur();
481 } 488 }
482 }, 489 },
483 internalValue(val) { 490 internalValue(val) {