[bugfix] Search: incomplete text display in iOS (#974)

packages/search/index.vue

@@ -1,20 +1,14 @@
 <template>
-  <div
-    :class="b({ 'show-action': showAction })"
-    :style="{ 'background-color': background }"
-  >
-    <div :class="b('wrap')" v-clickoutside="onClickoutside">
-      <icon name="search" />
-      <input
-        v-bind="$attrs"
-        v-on="listeners"
-        v-refocus="focusStatus"
-        type="search"
-        :class="b('input')"
-        :value="value"
-      >
-      <icon name="clear" v-show="isFocus && value" @click="onClean" />
-    </div>
+  <div :class="b({ 'show-action': showAction })" :style="{ background }">
+    <icon name="search" />
+    <field
+      v-bind="$attrs"
+      v-on="listeners"
+      :value="value"
+      type="search"
+      icon="clear"
+      @click-icon="$emit('input', '')"
+    />
     <div v-if="showAction" :class="b('action')" >
       <slot name="action">
         <div :class="b('cancel')" @click="onBack">{{ $t('cancel') }}</div>
@@ -24,14 +18,18 @@
 </template>
 
 <script>
+import Field from '../field';
 import create from '../utils/create';
-import Clickoutside from '../utils/clickoutside';
 
 export default create({
   name: 'search',
 
   inheritAttrs: false,
 
+  components: {
+    Field
+  },
+
   props: {
     value: String,
     showAction: Boolean,
@@ -41,29 +39,10 @@ export default create({
     }
   },
 
-  data() {
-    return {
-      isFocus: false,
-      focusStatus: false
-    };
-  },
-
-  directives: {
-    Clickoutside,
-    refocus: {
-      update: function(el, state) {
-        if (state.value) {
-          el.focus();
-        }
-      }
-    }
-  },
-
   computed: {
     listeners() {
       return {
         ...this.$listeners,
-        focus: this.onFocus,
         input: this.onInput,
         keypress: this.onKeypress
       };
@@ -71,13 +50,8 @@ export default create({
   },
 
   methods: {
-    onFocus() {
-      this.isFocus = true;
-      this.$emit('focus');
-    },
-
-    onInput(event) {
-      this.$emit('input', event.target.value);
+    onInput(value) {
+      this.$emit('input', value);
     },
 
     onKeypress(event) {
@@ -89,25 +63,9 @@ export default create({
       this.$emit('keypress', event);
     },
 
-    // refocus after click close icon
-    onClean() {
-      this.$emit('input', '');
-      this.focusStatus = true;
-
-      // ensure refocus can work after click clean icon
-      this.$nextTick(() => {
-        this.focusStatus = false;
-      });
-    },
-
     onBack() {
       this.$emit('input', '');
       this.$emit('cancel');
-    },
-
-    onClickoutside() {
-      this.isFocus = false;
-      this.focusStatus = false;
     }
   }
 });

packages/vant-css/src/search.css

@@ -5,36 +5,19 @@
   align-items: center;
   box-sizing: border-box;
   padding: 4px 15px;
+  position: relative;
 
   &--show-action {
     padding-right: 0;
   }
 
-  &__wrap {
-    position: relative;
+  .van-cell {
     flex: 1;
-    height: 34px;
-    box-sizing: border-box;
-    padding: 8px 24px 8px 35px;
-    border: 1px solid $gray-light;
     border-radius: 4px;
-    background-color: $white;
+    padding: 5px 10px 5px 35px;
   }
 
-  &__input {
-    display: block;
-    width: 100%;
-    height: 16px;
-    line-height: 16px;
-    padding: 0;
-    font-size: 14px;
-    color: $gray-darker;
-    border: none;
-
-    &::placeholder {
-      color: $gray-dark;
-    }
-
+  input {
     &::-webkit-search-decoration,
     &::-webkit-search-cancel-button,
     &::-webkit-search-results-button,
@@ -59,21 +42,16 @@
   }
 
   .van-icon-search {
+    top: 50%;
+    left: 25px;
+    z-index: 1;
     color: $gray-darker;
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 10px;
     font-size: 16px;
+    transform: translateY(-50%);
   }
 
   .van-icon-clear {
-    font-size: 14px;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    padding: 5px; /* increase click area */
     color: $gray-dark;
   }
 }

test/specs/search.spec.js

@@ -12,17 +12,6 @@ describe('Search', () => {
     wrapper = mount(Search);
 
     expect(wrapper.hasClass('van-search')).to.be.true;
-    expect(wrapper.data().focusStatus).to.be.false;
-    expect(wrapper.data().isFocus).to.be.false;
-  });
-
-  it('focus on input', () => {
-    wrapper = mount(Search);
-
-    const input = wrapper.find('.van-search__input')[0];
-    input.trigger('focus');
-
-    expect(wrapper.data().isFocus).to.be.true;
   });
 
   it('create a search with searchText', (done) => {
@@ -33,7 +22,7 @@ describe('Search', () => {
     });
 
     wrapper.vm.$nextTick(() => {
-      const input = wrapper.find('.van-search__input')[0];
+      const input = wrapper.find('input')[0];
       expect(input.element.value === 'search text').to.be.true;
       done();
     });
@@ -42,7 +31,7 @@ describe('Search', () => {
   it('emit input event', () => {
     wrapper = mount(Search);
 
-    const input = wrapper.find('.van-search__input')[0];
+    const input = wrapper.find('input')[0];
     const eventStub = sinon.stub(wrapper.vm, '$emit');
     input.trigger('input', { target: { value: 'search' }});
 
@@ -65,14 +54,13 @@ describe('Search', () => {
       inputSpy();
     });
 
-    const input = wrapper.find('.van-search__input')[0];
+    const input = wrapper.find('input')[0];
     input.trigger('focus');
 
-    const cleanBtn = wrapper.find('.van-icon-clear')[0];
-    cleanBtn.trigger('click');
+    const cleanBtn = wrapper.find('.van-field__icon')[0];
+    cleanBtn.trigger('touchstart');
 
     wrapper.vm.$nextTick(() => {
-      expect(focusSpy.calledOnce).to.be.true;
       expect(inputSpy.calledOnce).to.be.true;
       expect(value).to.equal('');
       done();
@@ -91,8 +79,6 @@ describe('Search', () => {
     cancelBtn.trigger('click');
 
     wrapper.vm.$nextTick(() => {
-      expect(wrapper.vm.focusStatus).to.be.false;
-      expect(wrapper.vm.isFocus).to.be.false;
       expect(eventStub.calledTwice).to.be.true;
       expect(eventStub.calledWith('input'));
       expect(eventStub.calledWith('change'));
@@ -106,7 +92,7 @@ describe('Search', () => {
     const searchSpy = sinon.spy();
     wrapper.vm.$on('search', searchSpy);
 
-    const input = wrapper.find('.van-search__input')[0];
+    const input = wrapper.find('input')[0];
     input.trigger('keypress.enter');
     expect(searchSpy.calledOnce).to.be.true;
 
@@ -115,18 +101,4 @@ describe('Search', () => {
     input.trigger('keypress.a');
     expect(keypressSpy.calledOnce).to.be.true;
   });
-
-  it('blur after click outside', () => {
-    wrapper = mount(Search);
-
-    const input = wrapper.find('.van-search__input')[0];
-    input.trigger('focus');
-
-    expect(wrapper.vm.isFocus).to.be.true;
-
-    const body = document.body;
-    body.click();
-    expect(wrapper.vm.isFocus).to.be.false;
-    expect(wrapper.vm.focusStatus).to.be.false;
-  });
 });