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