[new feature] Search: support input native events (#451)

docs/demos/views/search.vue

@@ -11,8 +11,8 @@
           :placeholder="$t('placeholder')"
           :showAction="true"
           @search="onSearch"
-          @cancel="onCancel">
+          @cancel="onCancel"
-        </van-search>
+        />
       </form>
     </demo-block>
 

docs/markdown/en-US/field.md

@@ -90,12 +90,10 @@ Filed support all native properties of input tag，such as `maxlength`、`placeh
 | icon | Right side Icon name | `String` | - | - |
 
 ### Event
-Filed support all native events of input tag，such as `keypress`、`keyup`
+Filed support all native events of input tag，such as `focus`、`blur`、`keypress`
 
 | Event | Description | Parameters |
 |-----------|-----------|-----------|
-| focus | Triggered when filed get focused | - |
-| blur | Triggered when blur filed | - |
 | click-icon | Triggered when click the icon of filed | - |
 
 ### Slot

docs/markdown/en-US/search.md

@@ -64,6 +64,7 @@ Search support all native properties of input tag，such as `maxlength`、`place
 | showAction | Whether to show right button | `Boolean` | false | - |
 
 ### Event
+Search support all native events of input tag，such as `focus`、`blur`、`keypress`
 
 | Event | Description | Attribute |
 |-----------|-----------|-----------|

docs/markdown/zh-CN/field.md

@@ -92,12 +92,10 @@ Filed 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 | icon | 输入框尾部图标 | `String` | - |  Icon 组件支持的类型 |
 
 ### Event
-Filed 默认支持 Input 标签所有的原生事件，比如 `keypress`、`keyup` 等
+Filed 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等
 
 | 事件名称 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
-| focus | 输入框聚焦时触发 | - |
-| blur | 输入框失焦时触发 | - |
 | click-icon | 点击尾部图标时触发 | - |
 
 ### Slot

docs/markdown/zh-CN/search.md

@@ -54,6 +54,7 @@ Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pl
 | showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | - |
 
 ### Event
+Search 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等
 
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|

packages/search/index.vue

@@ -6,14 +6,12 @@
     <div class="van-search__input-wrap" v-clickoutside="onClickoutside">
       <icon name="search" />
       <input
+        v-bind="$attrs"
+        v-on="listeners"
+        v-refocus="focusStatus"
         type="search"
         class="van-search__input"
-        v-bind="$attrs"
-        v-refocus="focusStatus"
         :value="value"
-        @input="onInput"
-        @focus="onFocus"
-        @keypress.enter.prevent="onSearch"
       >
       <icon name="clear" v-show="isFocus && value" @click="onClean" />
     </div>
@@ -59,15 +57,36 @@ export default create({
     }
   },
 
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+        focus: this.onFocus,
+        input: this.onInput,
+        keypress: this.onKeypress
+      };
+    }
+  },
+
   methods: {
     onFocus() {
       this.isFocus = true;
+      this.$emit('focus');
     },
 
     onInput(event) {
       this.$emit('input', event.target.value);
     },
 
+    onKeypress(event) {
+      // press enter
+      if (event.keyCode === 13) {
+        event.preventDefault();
+        this.$emit('search', this.value);
+      }
+      this.$emit('keypress', event);
+    },
+
     // refocus after click close icon
     onClean() {
       this.$emit('input', '');
@@ -84,12 +103,6 @@ export default create({
       this.$emit('cancel');
     },
 
-    onSearch(e) {
-      e.preventDefault();
-      this.$emit('search', this.value);
-      return false;
-    },
-
     onClickoutside() {
       this.isFocus = false;
       this.focusStatus = false;

test/unit/specs/search.spec.js

@@ -52,8 +52,18 @@ describe('Search', () => {
 
   it('handle clean click and refocus', (done) => {
     wrapper = mount(Search);
-    wrapper.setProps({ value: 'test' });
+
-    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    let value = 'test';
+    wrapper.setProps({ value });
+
+    const focusSpy = sinon.spy();
+    wrapper.vm.$on('focus', focusSpy);
+
+    const inputSpy = sinon.spy();
+    wrapper.vm.$on('input', val => {
+      value = val;
+      inputSpy();
+    });
 
     const input = wrapper.find('.van-search__input')[0];
     input.trigger('focus');
@@ -62,8 +72,9 @@ describe('Search', () => {
     cleanBtn.trigger('click');
 
     wrapper.vm.$nextTick(() => {
-      expect(eventStub.calledOnce).to.be.true;
+      expect(focusSpy.calledOnce).to.be.true;
-      expect(eventStub.calledWith('input')).to.be.true;
+      expect(inputSpy.calledOnce).to.be.true;
+      expect(value).to.equal('');
       done();
     });
   });
@@ -89,19 +100,20 @@ describe('Search', () => {
     });
   });
 
-  it('emit a search event', (done) => {
+  it('emit a search event', () => {
     wrapper = mount(Search);
 
-    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    const searchSpy = sinon.spy();
+    wrapper.vm.$on('search', searchSpy);
 
     const input = wrapper.find('.van-search__input')[0];
     input.trigger('keypress.enter');
+    expect(searchSpy.calledOnce).to.be.true;
 
-    wrapper.vm.$nextTick(() => {
+    const keypressSpy = sinon.spy();
-      expect(eventStub.calledOnce).to.be.true;
+    wrapper.vm.$on('keypress', keypressSpy);
-      expect(eventStub.calledWith('search'));
+    input.trigger('keypress.a');
-      done();
+    expect(keypressSpy.calledOnce).to.be.true;
-    });
   });
 
   it('blur after click outside', () => {