Cascader: add blur and focus events (#9184)

* add cascader blur & focus event

* fix 'Input Events' => 'Cascader Events'

examples/docs/en-US/cascader.md

@@ -1695,3 +1695,5 @@ Search and select options with a keyword.
 |---------- |-------- |---------- |
 | change  | triggers when the binding value changes | value |
 | active-item-change | triggers when active option changes, only works when `change-on-select` is `false` | an array of active options |
+| blur | triggers when Cascader blurs | (event: Event) |
+| focus | triggers when Cascader focuses | (event: Event) |

examples/docs/zh-CN/cascader.md

@@ -1695,3 +1695,5 @@
 |---------- |-------- |---------- |
 | change | 当绑定值变化时触发的事件 | 当前值 |
 | active-item-change | 当父级选项变化时触发的事件，仅在 `change-on-select` 为 `false` 时可用 | 各父级选项组成的数组 |
+| blur | 在 Cascader 失去焦点时触发 | (event: Event) |
+| focus | 在 Cascader 获得焦点时触发 | (event: Event) |

packages/cascader/src/main.vue

@@ -23,6 +23,8 @@
       :placeholder="currentLabels.length ? undefined : placeholder"
       v-model="inputValue"
       @input="debouncedInputChange"
+      @focus="handleFocus"
+      @blur="handleBlur"
       :validate-event="false"
       :size="size"
       :disabled="disabled"
@@ -384,6 +386,12 @@ export default {
         return;
       }
       this.menuVisible = !this.menuVisible;
+    },
+    handleFocus(event) {
+      this.$emit('focus', event);
+    },
+    handleBlur(event) {
+      this.$emit('blur', event);
     }
   },
 

test/unit/specs/cascader.spec.js

@@ -714,4 +714,68 @@ describe('Cascader', () => {
       done();
     }, 100);
   });
+  describe('Cascader Events', () => {
+    it('event:focus & blur', done => {
+      vm = createVue({
+        template: `
+          <el-cascader
+            ref="cascader"
+            placeholder="请选择"
+            :options="options"
+            clearable
+            v-model="selectedOptions"
+          ></el-cascader>
+        `,
+        data() {
+          return {
+            options: [{
+              value: 'zhejiang',
+              label: 'Zhejiang',
+              children: [{
+                value: 'hangzhou',
+                label: 'Hangzhou',
+                children: [{
+                  value: 'xihu',
+                  label: 'West Lake'
+                }]
+              }, {
+                value: 'ningbo',
+                label: 'NingBo',
+                children: [{
+                  value: 'jiangbei',
+                  label: 'Jiang Bei'
+                }]
+              }]
+            }, {
+              value: 'jiangsu',
+              label: 'Jiangsu',
+              children: [{
+                value: 'nanjing',
+                label: 'Nanjing',
+                children: [{
+                  value: 'zhonghuamen',
+                  label: 'Zhong Hua Men'
+                }]
+              }]
+            }],
+            selectedOptions: []
+          };
+        }
+      }, true);
+
+      const spyFocus = sinon.spy();
+      const spyBlur = sinon.spy();
+
+      vm.$refs.cascader.$on('focus', spyFocus);
+      vm.$refs.cascader.$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();
+      });
+    });
+  });
 });