Commit 6c1994c66255e069cd3908124110d9d7deb4c743
Committed by
GitHub
Merge pull request #1931 from SergioCrisostomo/fix-datepicker-blur
make picker close on blur
Showing
5 changed files
with
12 additions
and
5 deletions
Show diff stats
src/components/date-picker/panel/date-range.vue
src/components/date-picker/panel/date.vue
src/components/date-picker/panel/time-range.vue
1 | 1 | <template> |
2 | - <div :class="classes"> | |
2 | + <div :class="classes" @mousedown.prevent> | |
3 | 3 | <div :class="[prefixCls + '-body']"> |
4 | 4 | <div :class="[prefixCls + '-content', prefixCls + '-content-left']"> |
5 | 5 | <div :class="[timePrefixCls + '-header']"> |
... | ... | @@ -205,4 +205,4 @@ |
205 | 205 | if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true; |
206 | 206 | } |
207 | 207 | }; |
208 | -</script> | |
209 | 208 | \ No newline at end of file |
209 | +</script> | ... | ... |
src/components/date-picker/panel/time.vue
1 | 1 | <template> |
2 | - <div :class="[prefixCls + '-body-wrapper']"> | |
2 | + <div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent> | |
3 | 3 | <div :class="[prefixCls + '-body']"> |
4 | 4 | <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div> |
5 | 5 | <div :class="[prefixCls + '-content']"> | ... | ... |
src/components/date-picker/picker.vue
... | ... | @@ -12,6 +12,7 @@ |
12 | 12 | :name="name" |
13 | 13 | @on-input-change="handleInputChange" |
14 | 14 | @on-focus="handleFocus" |
15 | + @on-blur="handleBlur" | |
15 | 16 | @on-click="handleIconClick" |
16 | 17 | @mouseenter.native="handleInputMouseenter" |
17 | 18 | @mouseleave.native="handleInputMouseleave" |
... | ... | @@ -290,6 +291,9 @@ |
290 | 291 | if (this.readonly) return; |
291 | 292 | this.visible = true; |
292 | 293 | }, |
294 | + handleBlur () { | |
295 | + this.visible = false; | |
296 | + }, | |
293 | 297 | handleInputChange (event) { |
294 | 298 | const oldValue = this.visualValue; |
295 | 299 | const value = event.target.value; |
... | ... | @@ -478,6 +482,9 @@ |
478 | 482 | if (this.picker) this.picker.resetView && this.picker.resetView(true); |
479 | 483 | this.$refs.drop.destroy(); |
480 | 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 | 490 | internalValue(val) { | ... | ... |