[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;
   }
 }