[improvement] Field: add clear event (#1944)

packages/field/en-US.md

@@ -139,6 +139,7 @@ Field support all native events of input tag，such as `focus`、`blur`、`keypr
 | Event | Description | Parameters |
 |-----------|-----------|-----------|
 | click-icon | Triggered when click the icon of Field | - |
+| clear | Triggered when click clear icon | - |
 
 ### Methods
 

packages/field/index.vue

@@ -38,7 +38,7 @@
         v-if="showClear"
         name="clear"
         :class="b('clear')"
-        @touchstart.prevent="$emit('input', '')"
+        @touchstart.prevent="onClear"
       />
       <div v-if="$slots.icon || icon" :class="b('icon')" @click="onClickIcon">
         <slot name="icon">
@@ -152,6 +152,7 @@ export default create({
       this.$emit('focus', event);
 
       // hack for safari
+      /* istanbul ignore if */
       if (this.readonly) {
         this.blur();
       }
@@ -167,6 +168,11 @@ export default create({
       this.onIconClick && this.onIconClick();
     },
 
+    onClear() {
+      this.$emit('input', '');
+      this.$emit('clear');
+    },
+
     onKeypress(event) {
       if (this.type === 'number') {
         const { keyCode } = event;
@@ -177,6 +183,8 @@ export default create({
         }
       }
 
+      // trigger blur after click keyboard search button
+      /* istanbul ignore next */
       if (this.type === 'search' && event.keyCode === 13) {
         this.blur();
       }

packages/field/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`clearable 1`] = `
+<div class="van-cell van-field">
+  <!---->
+  <!---->
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-field__body">
+      <input type="text" class="van-field__control">
+      <!---->
+      <!---->
+      <!---->
+    </div>
+    <!---->
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`clearable 2`] = `
+<div class="van-cell van-field">
+  <!---->
+  <!---->
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-field__body">
+      <input type="text" class="van-field__control">
+      <i class="van-icon van-icon-clear van-field__clear">
+        <!---->
+      </i>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+  </div>
+  <!---->
+</div>
+`;
+
 exports[`render textarea 1`] = `
 <div class="van-cell van-field">
   <!---->

packages/field/test/index.spec.js

@@ -131,3 +131,21 @@ test('maxlength', async() => {
   expect(input.element.value).toEqual('123');
   expect(wrapper.emitted('input')[0][0]).toEqual('123');
 });
+
+test('clearable', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      value: 'test',
+      clearable: true
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+  const input = wrapper.find('input');
+  input.trigger('focus');
+  expect(wrapper).toMatchSnapshot();
+
+  wrapper.find('.van-field__clear').trigger('touchstart');
+  expect(wrapper.emitted('input')[0][0]).toEqual('');
+  expect(wrapper.emitted('clear')).toBeTruthy();
+});

packages/field/zh-CN.md

@@ -141,6 +141,7 @@ Field 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`k
 | 事件 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
 | click-icon | 点击尾部图标时触发 | - |
+| clear | 点击清除按钮后触发 | - |
 
 ### 方法