Picker: fix blur event

examples/docs/en-US/date-picker.md

@@ -417,8 +417,8 @@ This feature is at alpha stage. Feedback welcome.
 | Event Name | Description | Parameters |
 |---------|--------|---------|
 | change | triggers when user confirms the value | component's binding value |
-| blur | triggers when Input blurs | (event: Event) |
-| focus | triggers when Input focuses | (event: Event) |
+| blur | triggers when Input blurs | component instance |
+| focus | triggers when Input focuses | component instance |
 
 ### Methods
 | Method | Description | Parameters |

examples/docs/en-US/datetime-picker.md

@@ -274,8 +274,8 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 | Event Name | Description | Parameters |
 |---------|--------|---------|
 | change | triggers when user confirms the value | component's binding value |
-| blur | triggers when Input blurs | (event: Event) |
-| focus | triggers when Input focuses | (event: Event) |
+| blur | triggers when Input blurs | component instance |
+| focus | triggers when Input focuses | component instance |
 
 ### Methods
 | Method | Description | Parameters |

examples/docs/en-US/time-picker.md

@@ -212,5 +212,5 @@ Can pick an arbitrary time range.
 | Event Name | Description | Parameters |
 |---------|--------|---------|
 | change | triggers when user confirms the value | component's bounded value |
-| blur | triggers when Input blurs | (event: Event) |
-| focus | triggers when Input focuses | (event: Event) |
+| blur | triggers when Input blurs | component instance |
+| focus | triggers when Input focuses | component instance |

examples/docs/es/date-picker.md

@@ -418,8 +418,8 @@ Esta característica está en la etapa alfa. Feedback bienvenido.
 | Nombre | Descripción                              | Parametros                   |
 | ------ | ---------------------------------------- | ---------------------------- |
 | change | se dispara cuando el usuario confirma el valor | valor enlazado al componente |
-| blur   | se dispara cuando el input pierde el foco | (event: Event)               |
-| focus  | se dispara cuando el input obtiene el foco | (event: Event)               |
+| blur   | se dispara cuando el input pierde el foco | instancia del componente               |
+| focus  | se dispara cuando el input obtiene el foco | instancia del componente               |
 
 ### Metodos
 | Metodo | Descripción                | Parameteros |

examples/docs/es/datetime-picker.md

@@ -275,8 +275,8 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
 | Nombre de evento | Descripción                              | Parámetros                    |
 | ---------------- | ---------------------------------------- | ----------------------------- |
 | change           | Se dispara cuando el usuario confirma el valor | valor enlazado del componente |
-| blur             | Se dispara cuando el input pierde el foco | (event: Event)                |
-| focus            | Se dispara cuando el input obtiene el foco | (event: Event)                |
+| blur             | Se dispara cuando el input pierde el foco | instancia del componente                |
+| focus            | Se dispara cuando el input obtiene el foco | instancia del componente                |
 
 ### Métodos
 | Método | Descripción      | Parámetros |

examples/docs/es/time-picker.md

@@ -212,5 +212,5 @@ Es posible escoger un rango de tiempo arbitrario.
 | Nombre de Evento | Descripción                              | Parámetros                    |
 | ---------------- | ---------------------------------------- | ----------------------------- |
 | change           | se lanza cuando el usuario confirma el valor | valor limitado del componente |
-| blur             | se lanza cuando el input se difumina     | (event: Event)                |
-| focus            | se lanza cuando el input se enfoca       | (event: Event)                |
+| blur             | se lanza cuando el input se difumina     | instancia del componente                |
+| focus            | se lanza cuando el input se enfoca       | instancia del componente                |

examples/docs/zh-CN/date-picker.md

@@ -412,8 +412,8 @@
 | 事件名称      | 说明    | 回调参数      |
 |---------|--------|---------|
 | change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |
-| blur | 当 input 失去焦点时触发 | (event: Event) |
-| focus | 当 input 获得焦点时触发 | (event: Event) |
+| blur | 当 input 失去焦点时触发 | 组件实例 |
+| focus | 当 input 获得焦点时触发 | 组件实例 |
 
 ### Methods
 | 方法名 | 说明 | 参数 |

examples/docs/zh-CN/datetime-picker.md

@@ -273,8 +273,8 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 | Event Name | Description | Parameters |
 |---------|--------|---------|
 | change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |
-| blur | 当 input 失去焦点时触发 | (event: Event) |
-| focus | 当 input 获得焦点时触发 | (event: Event) |
+| blur | 当 input 失去焦点时触发 | 组件实例 |
+| focus | 当 input 获得焦点时触发 | 组件实例 |
 
 ### Methods
 | 方法名 | 说明 | 参数 |

examples/docs/zh-CN/time-picker.md

@@ -212,8 +212,8 @@
 | 事件名 | 说明 | 参数 |
 |---------|--------|---------|
 | change | 用户确认选定的值时触发 | 组件绑定值 |
-| blur | 当 input 失去焦点时触发 | (event: Event) |
-| focus | 当 input 获得焦点时触发 | (event: Event) |
+| blur | 当 input 失去焦点时触发 | 组件实例 |
+| focus | 当 input 获得焦点时触发 | 组件实例 |
 
 ### Methods
 | 方法名 | 说明 | 参数 |

packages/date-picker/src/picker.vue

@@ -11,7 +11,6 @@
     v-clickoutside="handleClose"
     :placeholder="placeholder"
     @focus="handleFocus"
-    @blur="handleBlur"
     @keydown.native="handleKeydown"
     :value="displayValue"
     @input="value => userInput = value"
@@ -371,6 +370,7 @@ export default {
           this.userInput = null;
         }
         this.dispatch('ElFormItem', 'el.form.blur');
+        this.$emit('blur', this);
         this.blur();
       }
     },
@@ -599,9 +599,6 @@ export default {
 
     handleClose() {
       this.pickerVisible = false;
-      if (this.ranged) {
-        this.$emit('blur', this);
-      }
     },
 
     handleFocus() {
@@ -613,10 +610,6 @@ export default {
       this.$emit('focus', this);
     },
 
-    handleBlur() {
-      this.$emit('blur', this);
-    },
-
     handleKeydown(event) {
       const keyCode = event.keyCode;
 

test/unit/specs/date-picker.spec.js

@@ -359,12 +359,14 @@ describe('DatePicker', () => {
       vm.$refs.picker.$on('focus', spyFocus);
       vm.$refs.picker.$on('blur', spyBlur);
       vm.$el.querySelector('input').focus();
-      vm.$el.querySelector('input').blur();
 
       vm.$nextTick(_ => {
         expect(spyFocus.calledOnce).to.be.true;
-        expect(spyBlur.calledOnce).to.be.true;
-        done();
+        vm.$refs.picker.pickerVisible = false;
+        vm.$nextTick(_ => {
+          expect(spyBlur.calledOnce).to.be.true;
+          done();
+        });
       });
     });
   });

test/unit/specs/time-picker.spec.js

@@ -240,12 +240,14 @@ describe('TimePicker', () => {
     vm.$refs.picker.$on('focus', spyFocus);
     vm.$refs.picker.$on('blur', spyBlur);
     vm.$el.querySelector('input').focus();
-    vm.$el.querySelector('input').blur();
 
     vm.$nextTick(_ => {
       expect(spyFocus.calledOnce).to.be.true;
-      expect(spyBlur.calledOnce).to.be.true;
-      done();
+      vm.$refs.picker.pickerVisible = false;
+      vm.$nextTick(_ => {
+        expect(spyBlur.calledOnce).to.be.true;
+        done();
+      });
     });
   });
 

test/unit/specs/time-select.spec.js

@@ -212,12 +212,14 @@ describe('TimeSelect', () => {
     vm.$refs.picker.$on('focus', spyFocus);
     vm.$refs.picker.$on('blur', spyBlur);
     vm.$el.querySelector('input').focus();
-    vm.$el.querySelector('input').blur();
 
     vm.$nextTick(_ => {
       expect(spyFocus.calledOnce).to.be.true;
-      expect(spyBlur.calledOnce).to.be.true;
-      done();
+      vm.$refs.picker.pickerVisible = false;
+      vm.$nextTick(_ => {
+        expect(spyBlur.calledOnce).to.be.true;
+        done();
+      });
     });
   });