diff --git a/build/webpack.dist.locale.config.js b/build/webpack.dist.locale.config.js
index 8314e431..f3ed8214 100644
--- a/build/webpack.dist.locale.config.js
+++ b/build/webpack.dist.locale.config.js
@@ -1,6 +1,8 @@
 const path = require('path');
 const webpack = require('webpack');
 const entry = require('./locale');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
 process.env.NODE_ENV = 'production';
 
 module.exports = {
@@ -40,7 +42,7 @@ module.exports = {
                 NODE_ENV: '"production"'
             }
         }),
-        new webpack.optimize.UglifyJsPlugin({
+        new UglifyJsPlugin({
             parallel: true,
             sourceMap: true,
         })
diff --git a/build/webpack.dist.prod.config.js b/build/webpack.dist.prod.config.js
index a46315aa..a821976a 100644
--- a/build/webpack.dist.prod.config.js
+++ b/build/webpack.dist.prod.config.js
@@ -3,6 +3,7 @@ const webpack = require('webpack');
 const merge = require('webpack-merge');
 const webpackBaseConfig = require('./webpack.base.config.js');
 const CompressionPlugin = require('compression-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 process.env.NODE_ENV = 'production';
 
@@ -32,7 +33,7 @@ module.exports = merge(webpackBaseConfig, {
         new webpack.DefinePlugin({
             'process.env.NODE_ENV': '"production"'
         }),
-        new webpack.optimize.UglifyJsPlugin({
+        new UglifyJsPlugin({
             parallel: true,
             sourceMap: true,
         }),
diff --git a/package-lock.json b/package-lock.json
index c2b31e93..491ab449 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13387,6 +13387,30 @@
       "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==",
       "dev": true
     },
+    "uglify-es": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",
+      "integrity": "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==",
+      "dev": true,
+      "requires": {
+        "commander": "2.13.0",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.13.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
+          "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "uglify-js": {
       "version": "2.8.29",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
@@ -13405,14 +13429,54 @@
       "dev": true
     },
     "uglifyjs-webpack-plugin": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz",
-      "integrity": "sha1-uVH0q7a9YX5m9j64kUmOORdj4wk=",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.3.tgz",
+      "integrity": "sha512-as/50351uuJGiQbhVvE510SCqM/YOWghCzIFJeEOu5oVE0QOZ3/vu2QcnVvu0Lz+vNd0rKsiCFAlbcw0i/YH2w==",
       "dev": true,
       "requires": {
-        "source-map": "0.5.7",
-        "uglify-js": "2.8.29",
-        "webpack-sources": "1.1.0"
+        "cacache": "10.0.4",
+        "find-cache-dir": "1.0.0",
+        "schema-utils": "0.4.5",
+        "serialize-javascript": "1.4.0",
+        "source-map": "0.6.1",
+        "uglify-es": "3.3.9",
+        "webpack-sources": "1.1.0",
+        "worker-farm": "1.6.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.2.1.tgz",
+          "integrity": "sha1-KKarxJOiq+D7TIUHrK7bQ/pVBnE=",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "1.1.0",
+            "fast-json-stable-stringify": "2.0.0",
+            "json-schema-traverse": "0.3.1"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.1.0.tgz",
+          "integrity": "sha1-rCsnk5xUPpXSwG5/f1wnvkqlQ74=",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "0.4.5",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
+          "integrity": "sha512-yYrjb9TX2k/J1Y5UNy3KYdZq10xhYcF8nMpAW6o3hy6Q8WSIEf9lJHG/ePnOBfziPM3fvQwfOwa13U/Fh8qTfA==",
+          "dev": true,
+          "requires": {
+            "ajv": "6.2.1",
+            "ajv-keywords": "3.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
       }
     },
     "ultron": {
@@ -13850,6 +13914,11 @@
       "dev": true,
       "optional": true
     },
+    "v-click-outside-x": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-2.4.0.tgz",
+      "integrity": "sha512-xAouyFRaMDD074px+J3PoxhU5nGQsIj8yxXRYyFd0/PRhY1ob3F55L9mGsd35KzXkQteajEhap6SClaMB0MENg=="
+    },
     "v8flags": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.1.1.tgz",
@@ -14807,6 +14876,17 @@
           "integrity": "sha1-mTcqXJmb8t8WCvwNdL7U9HlIzSI=",
           "dev": true
         },
+        "uglifyjs-webpack-plugin": {
+          "version": "0.4.6",
+          "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz",
+          "integrity": "sha1-uVH0q7a9YX5m9j64kUmOORdj4wk=",
+          "dev": true,
+          "requires": {
+            "source-map": "0.5.7",
+            "uglify-js": "2.8.29",
+            "webpack-sources": "1.1.0"
+          }
+        },
         "y18n": {
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
@@ -15446,6 +15526,15 @@
       "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
       "dev": true
     },
+    "worker-farm": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.6.0.tgz",
+      "integrity": "sha512-6w+3tHbM87WnSWnENBUvA2pxJPLhQUg5LKwUQHq3r+XPhIM+Gh2R5ycbwPCyuGbNg+lPgdcnQUhuC02kJCvffQ==",
+      "dev": true,
+      "requires": {
+        "errno": "0.1.7"
+      }
+    },
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
diff --git a/package.json b/package.json
index d0e0065d..eae3011c 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,8 @@
     "js-calendar": "^1.2.3",
     "lodash.throttle": "^4.1.1",
     "popper.js": "^1.14.1",
-    "tinycolor2": "^1.4.1"
+    "tinycolor2": "^1.4.1",
+    "v-click-outside-x": "^2.4.0"
   },
   "peerDependencies": {
     "vue": "^2.5.2"
@@ -99,6 +100,7 @@
     "sinon": "^4.4.2",
     "sinon-chai": "^3.0.0",
     "style-loader": "^0.20.2",
+    "uglifyjs-webpack-plugin": "^1.2.3",
     "url-loader": "^1.0.1",
     "vue": "^2.5.16",
     "vue-hot-reload-api": "^2.3.0",
diff --git a/src/components/select/functional-options.vue b/src/components/select/functional-options.vue
new file mode 100644
index 00000000..a3197096
--- /dev/null
+++ b/src/components/select/functional-options.vue
@@ -0,0 +1,29 @@
+
+<script>
+    const returnArrayFn = () => [];
+
+    export default {
+        props: {
+            options: {
+                type: Array,
+                default: returnArrayFn
+            },
+            slotOptions: {
+                type: Array,
+                default: returnArrayFn
+            },
+            slotUpdateHook: {
+                type: Function,
+                default: () => {}
+            },
+        },
+        functional: true,
+        render(h, {props, parent}){
+            // to detect changes in the $slot children/options we do this hack
+            // so we can trigger the parents computed properties and have everything reactive
+            // although $slot.default is not
+            if (props.slotOptions !== parent.$slots.default) props.slotUpdateHook();
+            return props.options;
+        }
+    };
+</script>
diff --git a/src/components/select/option.vue b/src/components/select/option.vue
index 0733bb80..a8b60886 100644
--- a/src/components/select/option.vue
+++ b/src/components/select/option.vue
@@ -1,5 +1,10 @@
 <template>
-    <li :class="classes" @click.stop="select" @mouseout.stop="blur" v-show="!hidden"><slot>{{ showLabel }}</slot></li>
+    <li
+        :class="classes"
+        @click.stop="select"
+        @mousedown.prevent
+        @touchstart.prevent
+    ><slot>{{ showLabel }}</slot></li>
 </template>
 <script>
     import Emitter from '../../mixins/emitter';
@@ -22,15 +27,19 @@
             disabled: {
                 type: Boolean,
                 default: false
+            },
+            selected: {
+                type: Boolean,
+                default: false
+            },
+            isFocused: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
             return {
-                selected: false,
-                index: 0,    // for up and down to focus
-                isFocus: false,
-                hidden: false,    // for search
-                searchLabel: '',    // the value is slot,only for search
+                searchLabel: '',  // the slot value (textContent)
                 autoComplete: false
             };
         },
@@ -41,53 +50,34 @@
                     {
                         [`${prefixCls}-disabled`]: this.disabled,
                         [`${prefixCls}-selected`]: this.selected && !this.autoComplete,
-                        [`${prefixCls}-focus`]: this.isFocus
+                        [`${prefixCls}-focus`]: this.isFocused
                     }
                 ];
             },
             showLabel () {
                 return (this.label) ? this.label : this.value;
+            },
+            optionLabel(){
+                return (this.$el && this.$el.textContent) || this.label;
             }
         },
         methods: {
             select () {
-                if (this.disabled) {
-                    return false;
-                }
+                if (this.disabled) return false;
 
-                this.dispatch('iSelect', 'on-select-selected', this.value);
+                this.dispatch('iSelect', 'on-select-selected', {
+                    value: this.value,
+                    label: this.optionLabel,
+                });
+                this.$emit('on-select-selected', {
+                    value: this.value,
+                    label: this.optionLabel,
+                });
             },
-            blur () {
-                this.isFocus = false;
-            },
-            queryChange (val) {
-                const parsedQuery = val.replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
-                this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel);
-            },
-            // 在使用函数防抖后，设置 key 后，不更新组件了，导致SearchLabel 不更新 #1865
-            updateSearchLabel () {
-                this.searchLabel = this.$el.textContent;
-            },
-            onSelectClose(){
-                this.isFocus = false;
-            },
-            onQueryChange(val){
-                this.queryChange(val);
-            }
         },
         mounted () {
-            this.updateSearchLabel();
-            this.dispatch('iSelect', 'append');
-            this.$on('on-select-close', this.onSelectClose);
-            this.$on('on-query-change',this.onQueryChange);
-
             const Select = findComponentUpward(this, 'iSelect');
             if (Select) this.autoComplete = Select.autoComplete;
         },
-        beforeDestroy () {
-            this.dispatch('iSelect', 'remove');
-            this.$off('on-select-close', this.onSelectClose);
-            this.$off('on-query-change',this.onQueryChange);
-        }
     };
 </script>
diff --git a/src/components/select/select-head.vue b/src/components/select/select-head.vue
new file mode 100644
index 00000000..f617ca5b
--- /dev/null
+++ b/src/components/select/select-head.vue
@@ -0,0 +1,196 @@
+<template>
+    <div @click="onHeaderClick">
+        <div class="ivu-tag ivu-tag-checked" v-for="item in selectedMultiple">
+            <span class="ivu-tag-text">{{ item.label }}</span>
+            <Icon type="ios-close-empty" @click.native.stop="removeTag(item)"></Icon>
+        </div>
+        <span
+            :class="singleDisplayClasses"
+            v-show="singleDisplayValue"
+        >{{ singleDisplayValue }}</span>
+        <input
+            :id="inputElementId"
+            type="text"
+            v-if="filterable"
+            v-model="query"
+            :disabled="disabled"
+            :class="[prefixCls + '-input']"
+            :placeholder="showPlaceholder ? localePlaceholder : ''"
+            :style="inputStyle"
+            autocomplete="off"
+            spellcheck="false"
+            @keydown="resetInputState"
+            @keydown.delete="handleInputDelete"
+            @focus="onInputFocus"
+            @blur="onInputFocus"
+
+            ref="input">
+        <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-if="resetSelect" @click.native.stop="resetSelect"></Icon>
+        <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!resetSelect && !remote && !disabled"></Icon>
+    </div>
+</template>
+<script>
+    import Icon from '../icon';
+    import Emitter from '../../mixins/emitter';
+    import Locale from '../../mixins/locale';
+
+    const prefixCls = 'ivu-select';
+
+    export default {
+        name: 'iSelectHead',
+        mixins: [ Emitter, Locale ],
+        components: { Icon },
+        props: {
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            filterable: {
+                type: Boolean,
+                default: false
+            },
+            multiple: {
+                type: Boolean,
+                default: false
+            },
+            remote: {
+                type: Boolean,
+                default: false
+            },
+            initialLabel: {
+                type: String,
+            },
+            values: {
+                type: Array,
+                default: () => []
+            },
+            clearable: {
+                type: [Function, Boolean],
+                default: false,
+            },
+            inputElementId: {
+                type: String
+            },
+            placeholder: {
+                type: String
+            },
+            queryProp: {
+                type: String,
+                default: ''
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                query: '',
+                inputLength: 20,
+                remoteInitialLabel: this.initialLabel,
+                preventRemoteCall: false,
+            };
+        },
+        computed: {
+            singleDisplayClasses(){
+                const {filterable, multiple, showPlaceholder} = this;
+                return [{
+                    [prefixCls + '-placeholder']: showPlaceholder && !filterable,
+                    [prefixCls + '-selected-value']: !showPlaceholder && !multiple && !filterable,
+                }];
+            },
+            singleDisplayValue(){
+                if ((this.multiple && this.values.length > 0) || this.filterable) return '';
+                return `${this.selectedSingle}` || this.localePlaceholder;
+            },
+            showPlaceholder () {
+                let status = false;
+                if (!this.multiple) {
+                    const value = this.values[0];
+                    if (typeof value === 'undefined' || String(value).trim() === ''){
+                        status = !this.remoteInitialLabel;
+                    }
+                } else {
+                    if (!this.values.length > 0) {
+                        status = true;
+                    }
+                }
+                return status;
+            },
+            resetSelect(){
+                return !this.showPlaceholder && this.clearable;
+            },
+            inputStyle () {
+                let style = {};
+
+                if (this.multiple) {
+                    if (this.showPlaceholder) {
+                        style.width = '100%';
+                    } else {
+                        style.width = `${this.inputLength}px`;
+                    }
+                }
+
+                return style;
+            },
+            localePlaceholder () {
+                if (this.placeholder === undefined) {
+                    return this.t('i.select.placeholder');
+                } else {
+                    return this.placeholder;
+                }
+            },
+            selectedSingle(){
+                const selected = this.values[0];
+                return selected ? selected.label : (this.remoteInitialLabel || '');
+            },
+            selectedMultiple(){
+                return this.multiple ? this.values : [];
+            }
+        },
+        methods: {
+            onInputFocus(e){
+                this.$emit(e.type === 'focus' ? 'on-input-focus' : 'on-input-blur');
+            },
+            removeTag (value) {
+                if (this.disabled) return false;
+                this.dispatch('iSelect', 'on-select-selected', value);
+            },
+            resetInputState () {
+                this.inputLength = this.$refs.input.value.length * 12 + 20;
+            },
+            handleInputDelete () {
+                if (this.multiple && this.selectedMultiple.length && this.query === '') {
+                    this.removeTag(this.selectedMultiple[this.selectedMultiple.length - 1]);
+                }
+            },
+            onHeaderClick(e){
+                if (this.filterable && e.target === this.$el){
+                    this.$refs.input.focus();
+                }
+            }
+        },
+        watch: {
+            values ([value]) {
+                if (!this.filterable) return;
+                this.preventRemoteCall = true;
+                if (this.multiple){
+                    this.query = '';
+                    this.preventRemoteCall = false; // this should be after the query change setter above
+                    return;
+                }
+                // #982
+                if (typeof value === 'undefined' || value === '' || value === null) this.query = '';
+                else this.query = value.label;
+            },
+            query (val) {
+                if (this.preventRemoteCall) {
+                    this.preventRemoteCall = false;
+                    return;
+                }
+
+                this.$emit('on-query-change', val);
+            },
+            queryProp(query){
+                if (query !== this.query) this.query = query;
+            },
+        }
+    };
+</script>
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 7a8ea3fd..dbe2fa8f 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -1,38 +1,48 @@
 <template>
     <div
-        tabindex="0"
-        @keydown.down="handleFocus"
         :class="classes"
-        v-clickoutside="handleClose">
+        v-click-outside.capture="onClickOutside"
+    >
         <div
-            :class="selectionCls"
             ref="reference"
-            @click="toggleMenu">
+
+            :class="selectionCls"
+            :tabindex="selectTabindex"
+
+            @blur="toggleHeaderFocus"
+            @focus="toggleHeaderFocus"
+
+            @click="toggleMenu"
+            @keydown.esc="handleKeydown"
+            @keydown.enter="handleKeydown"
+            @keydown.up="handleKeydown"
+            @keydown.down="handleKeydown"
+            @keydown.tab="handleKeydown"
+            @keydown.delete="handleKeydown"
+
+
+            @mouseenter="hasMouseHoverHead = true"
+            @mouseleave="hasMouseHoverHead = false"
+
+        >
             <slot name="input">
-                <input type="hidden" :name="name" :value="model">
-                <div class="ivu-tag ivu-tag-checked" v-for="(item, index) in selectedMultiple">
-                    <span class="ivu-tag-text">{{ item.label }}</span>
-                    <Icon type="ios-close-empty" @click.native.stop="removeTag(index)"></Icon>
-                </div>
-                <span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ localePlaceholder }}</span>
-                <span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
-                <input
-                    :id="elementId"
-                    type="text"
-                    v-if="filterable"
-                    v-model="query"
+                <input type="hidden" :name="name" :value="publicValue">
+                <select-head
+                    :filterable="filterable"
+                    :multiple="multiple"
+                    :values="values"
+                    :clearable="canBeCleared"
                     :disabled="disabled"
-                    :class="[prefixCls + '-input']"
-                    :placeholder="showPlaceholder ? localePlaceholder : ''"
-                    :style="inputStyle"
-                    autocomplete="off"
-                    spellcheck="false"
-                    @blur="handleBlur"
-                    @keydown="resetInputState"
-                    @keydown.delete="handleInputDelete"
-                    ref="input">
-                <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSingleSelect"></Icon>
-                <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!remote"></Icon>
+                    :remote="remote"
+                    :input-element-id="elementId"
+                    :initial-label="initialLabel"
+                    :placeholder="placeholder"
+                    :query-prop="query"
+
+                    @on-query-change="onQueryChange"
+                    @on-input-focus="isFocused = true"
+                    @on-input-blur="isFocused = false"
+                />
             </slot>
         </div>
         <transition name="transition-drop">
@@ -42,9 +52,17 @@
                 :placement="placement"
                 ref="dropdown"
                 :data-transfer="transfer"
-                v-transfer-dom>
-                <ul v-show="notFoundShow" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
-                <ul v-show="(!notFound && !remote) || (remote && !loading && !notFound)" :class="[prefixCls + '-dropdown-list']"><slot></slot></ul>
+                v-transfer-dom
+            >
+                <ul v-show="showNotFoundLabel" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
+                <ul :class="prefixCls + '-dropdown-list'">
+                  <functional-options
+                      v-if="(!remote) || (remote && !loading)"
+                      :options="selectOptions"
+                      :slot-update-hook="updateSlotOptions"
+                      :slot-options="slotOptions"
+                  ></functional-options>
+                </ul>
                 <ul v-show="loading" :class="[prefixCls + '-loading']">{{ localeLoadingText }}</ul>
             </Drop>
         </transition>
@@ -53,20 +71,61 @@
 <script>
     import Icon from '../icon';
     import Drop from './dropdown.vue';
-    import clickoutside from '../../directives/clickoutside';
+    import vClickOutside from 'v-click-outside-x/index';
     import TransferDom from '../../directives/transfer-dom';
-    import { oneOf, findComponentDownward } from '../../utils/assist';
+    import { oneOf } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
     import Locale from '../../mixins/locale';
-    import { debounce } from './utils';
+    import SelectHead from './select-head.vue';
+    import FunctionalOptions from './functional-options.vue';
 
     const prefixCls = 'ivu-select';
+    const optionRegexp = /^i-option$|^Option$/;
+    const optionGroupRegexp = /option-?group/i;
+
+    const findChild = (instance, checkFn) => {
+        let match = checkFn(instance);
+        if (match) return instance;
+        for (let i = 0, l = instance.$children.length; i < l; i++){
+            const child = instance.$children[i];
+            match = findChild(child, checkFn);
+            if (match) return match;
+        }
+    };
+
+    const findOptionsInVNode = (node) => {
+        const opts = node.componentOptions;
+        if (opts && opts.tag.match(optionRegexp)) return [node];
+        if (!node.children && (!opts || !opts.children)) return [];
+        const children = [...(node.children || []),  ...(opts && opts.children || [])];
+        const options = children.reduce(
+            (arr, el) => [...arr, ...findOptionsInVNode(el)], []
+        ).filter(Boolean);
+        return options.length > 0 ? options : [];
+    };
+
+    const extractOptions = (options) => options.reduce((options, slotEntry) => {
+        return options.concat(findOptionsInVNode(slotEntry));
+    }, []);
+
+    const applyProp = (node, propName, value) => {
+        return {
+            ...node,
+            componentOptions: {
+                ...node.componentOptions,
+                propsData: {
+                    ...node.componentOptions.propsData,
+                    [propName]: value,
+                }
+            }
+        };
+    };
 
     export default {
         name: 'iSelect',
         mixins: [ Emitter, Locale ],
-        components: { Icon, Drop },
-        directives: { clickoutside, TransferDom },
+        components: { FunctionalOptions, Drop, Icon, SelectHead },
+        directives: { clickOutside: vClickOutside.directive, TransferDom },
         props: {
             value: {
                 type: [String, Number, Array],
@@ -99,10 +158,6 @@
             filterMethod: {
                 type: Function
             },
-            remote: {
-                type: Boolean,
-                default: false
-            },
             remoteMethod: {
                 type: Function
             },
@@ -147,23 +202,35 @@
                 type: String
             }
         },
+        mounted(){
+            this.$on('on-select-selected', this.onOptionClick);
+
+            // set the initial values if there are any
+            if (this.values.length > 0 && !this.remote && this.selectOptions.length > 0){
+                this.values = this.values.map(this.getOptionData);
+            }
+
+            if (this.values.length > 0 && this.selectOptions.length === 0){
+                this.hasExpectedValue = this.values;
+            }
+        },
         data () {
+
             return {
                 prefixCls: prefixCls,
+                values: this.getInitialValue(),
+                dropDownWidth: 0,
                 visible: false,
-                options: [],
-                optionInstances: [],
-                selectedSingle: '',    // label
-                selectedMultiple: [],
-                focusIndex: 0,
+                focusIndex: -1,
+                isFocused: false,
                 query: '',
-                lastQuery: '',
-                selectToChangeQuery: false,    // when select an option, set this first and set query, because query is watching, it will emit event
-                inputLength: 20,
-                notFound: false,
-                slotChangeDuration: false,    // if slot change duration and in multiple, set true and after slot change, set false
-                model: this.value,
-                currentLabel: this.label
+                initialLabel: this.label,
+                hasMouseHoverHead: false,
+                slotOptions: this.$slots.default,
+                caretPosition: -1,
+                lastRemoteQuery: '',
+                hasExpectedValue: false,
+                preventRemoteCall: false,
             };
         },
         computed: {
@@ -189,58 +256,19 @@
             },
             selectionCls () {
                 return {
-                    [`${prefixCls}-selection`]: !this.autoComplete
+                    [`${prefixCls}-selection`]: !this.autoComplete,
+                    [`${prefixCls}-selection-focused`]: this.isFocused
                 };
             },
-            showPlaceholder () {
-                let status = false;
-
-                if ((typeof this.model) === 'string') {
-                    if (this.model === '') {
-                        status = true;
-                    }
-                } else if (Array.isArray(this.model)) {
-                    if (!this.model.length) {
-                        status = true;
-                    }
-                } else if( this.model === null){
-                    status = true;
-                }
-
-                return status;
-            },
-            showCloseIcon () {
-                return !this.multiple && this.clearable && !this.showPlaceholder;
-            },
-            inputStyle () {
-                let style = {};
-
-                if (this.multiple) {
-                    if (this.showPlaceholder) {
-                        style.width = '100%';
-                    } else {
-                        style.width = `${this.inputLength}px`;
-                    }
-                }
-
-                return style;
-            },
-            localePlaceholder () {
-                if (this.placeholder === undefined) {
-                    return this.t('i.select.placeholder');
-                } else {
-                    return this.placeholder;
-                }
-            },
             localeNotFoundText () {
-                if (this.notFoundText === undefined) {
+                if (typeof this.notFoundText === 'undefined') {
                     return this.t('i.select.noMatch');
                 } else {
                     return this.notFoundText;
                 }
             },
             localeLoadingText () {
-                if (this.loadingText === undefined) {
+                if (typeof this.loadingText === 'undefined') {
                     return this.t('i.select.loading');
                 } else {
                     return this.loadingText;
@@ -251,323 +279,374 @@
             },
             dropVisible () {
                 let status = true;
-                const options = this.$slots.default || [];
-                if (!this.loading && this.remote && this.query === '' && !options.length) status = false;
+                const noOptions = !this.selectOptions || this.selectOptions.length === 0;
+                if (!this.loading && this.remote && this.query === '' && noOptions) status = false;
 
-                if (this.autoComplete && !options.length) status = false;
+                if (this.autoComplete && noOptions) status = false;
 
                 return this.visible && status;
             },
-            notFoundShow () {
-                const options = this.$slots.default || [];
-                return (this.notFound && !this.remote) || (this.remote && !this.loading && !options.length);
+            showNotFoundLabel () {
+                const {loading, remote, selectOptions} = this;
+                return selectOptions && selectOptions.length === 0 && (!remote || (remote && !loading));
+            },
+            publicValue(){
+                if (this.labelInValue){
+                    return this.multiple ? this.values : this.values[0];
+                } else {
+                    return this.multiple ? this.values.map(option => option.value) : (this.values[0] || {}).value;
+                }
+            },
+            canBeCleared(){
+                const uiStateMatch = this.hasMouseHoverHead || this.active;
+                const qualifiesForClear = !this.multiple && this.clearable;
+                return uiStateMatch && qualifiesForClear && this.reset; // we return a function
+            },
+            selectOptions() {
+                const selectOptions = [];
+                const slotOptions = (this.slotOptions || []);
+                let optionCounter = -1;
+                const currentIndex = this.focusIndex;
+                const selectedValues = this.values.map(({value}) => value);
+                if (this.autoComplete) {
+                    const copyChildren = (node, fn) => {
+                        return {
+                            ...node,
+                            children: (node.children || []).map(fn).map(child => copyChildren(child, fn))
+                        };
+                    };
+                    const autoCompleteOptions = extractOptions(slotOptions);
+                    const selectedSlotOption = autoCompleteOptions[currentIndex];
+
+                    return slotOptions.map(node => {
+                        if (node === selectedSlotOption) return applyProp(node, 'isFocused', true);
+                        return copyChildren(node, (child) => {
+                            if (child !== selectedSlotOption) return child;
+                            return applyProp(child, 'isFocused', true);
+                        });
+                    });
+                }
+
+                for (let option of slotOptions) {
+
+                    const cOptions = option.componentOptions;
+                    if (!cOptions) continue;
+                    if (cOptions.tag.match(optionGroupRegexp)){
+                        let children = cOptions.children;
+
+                        // remove filtered children
+                        if (this.filterable){
+                            children = children.filter(
+                                ({componentOptions}) => this.validateOption(componentOptions)
+                            );
+                        }
+
+                        cOptions.children = children.map(opt => {
+                            optionCounter = optionCounter + 1;
+                            return this.processOption(opt, selectedValues, optionCounter === currentIndex);
+                        });
+
+                        // keep the group if it still has children
+                        if (cOptions.children.length > 0) selectOptions.push({...option});
+                    } else {
+                        // ignore option if not passing filter
+                        const optionPassesFilter = this.filterable ? this.validateOption(cOptions) : option;
+                        if (!optionPassesFilter) continue;
+
+                        optionCounter = optionCounter + 1;
+                        selectOptions.push(this.processOption(option, selectedValues, optionCounter === currentIndex));
+                    }
+                }
+
+                return selectOptions;
+            },
+            flatOptions(){
+                return extractOptions(this.selectOptions);
+            },
+            selectTabindex(){
+                return this.disabled || this.filterable ? -1 : 0;
+            },
+            remote(){
+                return typeof this.remoteMethod === 'function';
             }
         },
         methods: {
-            // open when focus on Select and press `down` key
-            handleFocus () {
-                if (!this.visible) this.toggleMenu();
+            setQuery(query){ // PUBLIC API
+                if (query) {
+                    this.onQueryChange(query);
+                    return;
+                }
+                if (query === null) {
+                    this.onQueryChange('');
+                    this.values = [];
+                }
             },
-            toggleMenu () {
+            clearSingleSelect(){ // PUBLIC API
+                if (this.clearable) this.values = [];
+            },
+            getOptionData(value){
+                const option = this.flatOptions.find(({componentOptions}) => componentOptions.propsData.value === value);
+                if (!option) return null;
+                const textContent = option.componentOptions.children.reduce((str, child) => str + (child.text || ''), '');
+                const label = option.componentOptions.propsData.label || textContent || '';
+                return {
+                    value: value,
+                    label: label,
+                };
+            },
+            getInitialValue(){
+                const {multiple, value} = this;
+                let initialValue = Array.isArray(value) ? value : [value];
+                if (!multiple && (typeof initialValue[0] === 'undefined' || String(initialValue[0]).trim() === '')) initialValue = [];
+                return initialValue;
+            },
+            processOption(option, values, isFocused){
+                if (!option.componentOptions) return option;
+                const optionValue = option.componentOptions.propsData.value;
+                const disabled = option.componentOptions.propsData.disabled;
+                const isSelected = values.includes(optionValue);
+
+                const propsData = {
+                    ...option.componentOptions.propsData,
+                    selected: isSelected,
+                    isFocused: isFocused,
+                    disabled: typeof disabled === 'undefined' ? false : disabled !== false,
+                };
+
+                return {
+                    ...option,
+                    componentOptions: {
+                        ...option.componentOptions,
+                        propsData: propsData
+                    }
+                };
+            },
+
+            validateOption({elm, propsData}){
+                const value = propsData.value;
+                const label = propsData.label || '';
+                const textContent = elm && elm.textContent || '';
+                const stringValues = JSON.stringify([value, label, textContent]);
+                return stringValues.toLowerCase().includes(this.query.toLowerCase());
+            },
+
+            toggleMenu (e, force) {
                 if (this.disabled || this.autoComplete) {
                     return false;
                 }
-                this.visible = !this.visible;
+                this.focusIndex = -1;
+
+                this.visible = typeof force !== 'undefined' ? force : !this.visible;
+                if (this.visible){
+                    this.dropDownWidth = this.$el.getBoundingClientRect().width;
+                    this.broadcast('Drop', 'on-update-popper');
+                }
             },
             hideMenu () {
-                this.visible = false;
-                this.focusIndex = 0;
-                this.broadcast('iOption', 'on-select-close');
+                this.toggleMenu(null, false);
             },
-            // find option component
-            findChild (cb) {
-                const find = function (child) {
-                    const name = child.$options.componentName;
-
-                    if (name) {
-                        cb(child);
-                    } else if (child.$children.length) {
-                        child.$children.forEach((innerChild) => {
-                            find(innerChild, cb);
-                        });
-                    }
-                };
-
-                if (this.optionInstances.length) {
-                    this.optionInstances.forEach((child) => {
-                        find(child);
-                    });
-                } else {
-                    this.$children.forEach((child) => {
-                        find(child);
-                    });
-                }
-            },
-            updateOptions (slot = false) {
-                let options = [];
-                let index = 1;
-
-                this.findChild((child) => {
-                    options.push({
-                        value: child.value,
-                        label: (child.label === undefined) ? child.$el.textContent : child.label
-                    });
-                    child.index = index++;
-
-                    this.optionInstances.push(child);
-                });
-
-                this.options = options;
-
-                if (!this.remote) {
-                    this.updateSingleSelected(true, slot);
-                    this.updateMultipleSelected(true, slot);
-                }
-            },
-            updateSingleSelected (init = false, slot = false) {
-                const type = typeof this.model;
-
-                if (type === 'string' || type === 'number') {
-                    let findModel = false;
-
-                    for (let i = 0; i < this.options.length; i++) {
-                        if (this.model === this.options[i].value) {
-                            this.selectedSingle = this.options[i].label;
-                            findModel = true;
-                            break;
-                        }
-                    }
-
-                    if (slot && !findModel) {
-                        this.model = '';
-                        this.query = '';
-                    }
-                }
-
-                this.toggleSingleSelected(this.model, init);
-            },
-            clearSingleSelect () {
-                if (this.showCloseIcon) {
-                    this.findChild((child) => {
-                        child.selected = false;
-                    });
-                    this.model = '';
+            onClickOutside(event){
+                if (this.visible) {
 
                     if (this.filterable) {
-                        this.query = '';
-                    }
-                }
-            },
-            updateMultipleSelected (init = false, slot = false) {
-                if (this.multiple && Array.isArray(this.model)) {
-                    let selected = this.remote ? this.selectedMultiple : [];
-
-                    for (let i = 0; i < this.model.length; i++) {
-                        const model = this.model[i];
-
-                        for (let j = 0; j < this.options.length; j++) {
-                            const option = this.options[j];
-
-                            if (model === option.value) {
-                                selected.push({
-                                    value: option.value,
-                                    label: option.label
-                                });
-                            }
-                        }
-                    }
-
-                    const selectedArray = [];
-                    const selectedObject = {};
-
-                    selected.forEach(item => {
-                        if (!selectedObject[item.value]) {
-                            selectedArray.push(item);
-                            selectedObject[item.value] = 1;
-                        }
-                    });
-
-                    // #2066
-                    this.selectedMultiple = this.remote ? this.model.length ? selectedArray : [] : selected;
-
-                    if (slot) {
-                        let selectedModel = [];
-
-                        for (let i = 0; i < selected.length; i++) {
-                            selectedModel.push(selected[i].value);
-                        }
-
-                        // if slot change and remove a selected option, emit user
-                        if (this.model.length === selectedModel.length) {
-                            this.slotChangeDuration = true;
-                        }
-
-                        this.model = selectedModel;
-                    }
-                }
-                this.toggleMultipleSelected(this.model, init);
-            },
-            removeTag (index) {
-                if (this.disabled) {
-                    return false;
-                }
-
-                if (this.remote) {
-                    const tag = this.model[index];
-                    this.selectedMultiple = this.selectedMultiple.filter(item => item.value !== tag);
-                }
-
-                this.model.splice(index, 1);
-
-                if (this.filterable && this.visible) {
-                    this.$refs.input.focus();
-                }
-
-                this.broadcast('Drop', 'on-update-popper');
-            },
-            // to select option for single
-            toggleSingleSelected (value, init = false) {
-                if (!this.multiple) {
-                    let label = '';
-
-                    this.findChild((child) => {
-                        if (child.value === value) {
-                            child.selected = true;
-                            label = (child.label === undefined) ? child.$el.innerHTML : child.label;
-                        } else {
-                            child.selected = false;
-                        }
-                    });
-
-                    this.hideMenu();
-
-                    if (!init) {
-                        if (this.labelInValue) {
-                            this.$emit('on-change', {
-                                value: value,
-                                label: label
-                            });
-                            this.dispatch('FormItem', 'on-form-change', {
-                                value: value,
-                                label: label
-                            });
-                        } else {
-                            this.$emit('on-change', value);
-                            this.dispatch('FormItem', 'on-form-change', value);
-                        }
-                    }
-                }
-            },
-            // to select option for multiple
-            toggleMultipleSelected (value, init = false) {
-                if (this.multiple) {
-                    let hybridValue = [];
-                    for (let i = 0; i < value.length; i++) {
-                        hybridValue.push({
-                            value: value[i]
+                        const input = this.$el.querySelector('input[type="text"]');
+                        this.caretPosition = input.selectionStart;
+                        this.$nextTick(() => {
+                            const caretPosition = this.caretPosition === -1 ? input.value.length : this.caretPosition;
+                            input.setSelectionRange(caretPosition, caretPosition);
                         });
                     }
 
-                    this.findChild((child) => {
-                        const index = value.indexOf(child.value);
-
-                        if (index >= 0) {
-                            child.selected = true;
-                            hybridValue[index].label = (child.label === undefined) ? child.$el.innerHTML : child.label;
-                        } else {
-                            child.selected = false;
-                        }
-                    });
-
-                    if (!init) {
-                        if (this.labelInValue) {
-                            this.$emit('on-change', hybridValue);
-                            this.dispatch('FormItem', 'on-form-change', hybridValue);
-                        } else {
-                            this.$emit('on-change', value);
-                            this.dispatch('FormItem', 'on-form-change', value);
-                        }
-                    }
+                    if (!this.autoComplete) event.stopPropagation();
+                    event.preventDefault();
+                    this.hideMenu();
+                    this.isFocused = true;
+                } else {
+                    this.caretPosition = -1;
+                    this.isFocused = false;
                 }
             },
-            handleClose () {
-                this.hideMenu();
+            reset(){
+                this.values = [];
             },
             handleKeydown (e) {
+                if (e.key === 'Backspace'){
+                    return; // so we don't call preventDefault
+                }
+
                 if (this.visible) {
-                    const keyCode = e.keyCode;
+                    e.preventDefault();
+                    if (e.key === 'Tab'){
+                        e.stopPropagation();
+                    }
+
                     // Esc slide-up
-                    if (keyCode === 27) {
-                        e.preventDefault();
+                    if (e.key === 'Escape') {
                         this.hideMenu();
                     }
                     // next
-                    if (keyCode === 40) {
-                        e.preventDefault();
-                        this.navigateOptions('next');
+                    if (e.key === 'ArrowUp') {
+                        this.navigateOptions(-1);
                     }
                     // prev
-                    if (keyCode === 38) {
-                        e.preventDefault();
-                        this.navigateOptions('prev');
+                    if (e.key === 'ArrowDown') {
+                        this.navigateOptions(1);
                     }
                     // enter
-                    if (keyCode === 13) {
-                        e.preventDefault();
+                    if (e.key === 'Enter' && this.focusIndex > -1) {
+                        const optionComponent = this.flatOptions[this.focusIndex];
+                        const option = this.getOptionData(optionComponent.componentOptions.propsData.value);
+                        this.onOptionClick(option);
+                    }
+                } else {
+                    const keysThatCanOpenSelect = ['ArrowUp', 'ArrowDown'];
+                    if (keysThatCanOpenSelect.includes(e.key)) this.toggleMenu(null, true);
+                }
 
-                        this.findChild((child) => {
-                            if (child.isFocus) {
-                                child.select();
-                            }
+
+            },
+            navigateOptions(direction){
+                const optionsLength = this.flatOptions.length - 1;
+
+                let index = this.focusIndex + direction;
+                if (index < 0) index = optionsLength;
+                if (index > optionsLength) index = 0;
+
+                // find nearest option in case of disabled options in between
+                if (direction > 0){
+                    let nearestActiveOption = -1;
+                    for (let i = 0; i < this.flatOptions.length; i++){
+                        const optionIsActive = !this.flatOptions[i].componentOptions.propsData.disabled;
+                        if (optionIsActive) nearestActiveOption = i;
+                        if (nearestActiveOption >= index) break;
+                    }
+                    index = nearestActiveOption;
+                } else {
+                    let nearestActiveOption = this.flatOptions.length;
+                    for (let i = optionsLength; i >= 0; i--){
+                        const optionIsActive = !this.flatOptions[i].componentOptions.propsData.disabled;
+                        if (optionIsActive) nearestActiveOption = i;
+                        if (nearestActiveOption <= index) break;
+                    }
+                    index = nearestActiveOption;
+                }
+
+                this.focusIndex = index;
+            },
+            onOptionClick(option) {
+                if (this.multiple){
+
+                    // keep the query for remote select
+                    if (this.remote) this.lastRemoteQuery = this.lastRemoteQuery || this.query;
+                    else this.lastRemoteQuery = '';
+
+                    const valueIsSelected = this.values.find(({value}) => value === option.value);
+                    if (valueIsSelected){
+                        this.values = this.values.filter(({value}) => value !== option.value);
+                    } else {
+                        this.values = this.values.concat(option);
+                    }
+
+                    this.isFocused = true; // so we put back focus after clicking with mouse on option elements
+                } else {
+                    this.values = [option];
+                    this.lastRemoteQuery = '';
+                    this.hideMenu();
+                }
+
+                if (this.filterable){
+                    const inputField = this.$el.querySelector('input[type="text"]');
+                    if (!this.autoComplete) this.$nextTick(() => inputField.focus());
+                }
+                this.broadcast('Drop', 'on-update-popper');
+            },
+            onQueryChange(query) {
+                this.query = query;
+                if (this.query.length > 0) this.visible = true;
+            },
+            toggleHeaderFocus({type}){
+                if (this.disabled) {
+                    return;
+                }
+                this.isFocused = type === 'focus';
+            },
+            updateSlotOptions(){
+                this.slotOptions = this.$slots.default;
+            }
+        },
+        watch: {
+            value(value){
+                const {getInitialValue, getOptionData, publicValue} = this;
+
+                if (value === '') this.values = [];
+                else if (JSON.stringify(value) !== JSON.stringify(publicValue)) {
+                    this.$nextTick(() => this.values = getInitialValue().map(getOptionData));
+                }
+            },
+            values(now, before){
+                const newValue = JSON.stringify(now);
+                const oldValue = JSON.stringify(before);
+                const shouldEmitInput = newValue !== oldValue;
+
+                if (shouldEmitInput) {
+                    // v-model is always just the value, event with labelInValue === true
+                    const vModelValue = this.labelInValue ?
+                        (this.multiple ? this.publicValue.map(({value}) => value)
+                        :
+                        this.publicValue.value) : this.publicValue;
+                    this.$emit('input', vModelValue); // to update v-model
+                    this.$emit('on-change', this.publicValue);
+                    this.dispatch('FormItem', 'on-form-change', this.publicValue);
+                }
+            },
+            query (query) {
+                this.$emit('on-query-change', query);
+                const {remoteMethod, lastRemoteQuery} = this;
+                const hasValidQuery = query !== '' && (query !== lastRemoteQuery || !lastRemoteQuery);
+                const shouldCallRemoteMethod = remoteMethod && hasValidQuery && !this.preventRemoteCall;
+                this.preventRemoteCall = false; // remove the flag
+
+                if (shouldCallRemoteMethod){
+                    this.focusIndex = -1;
+                    const promise = this.remoteMethod(query);
+                    this.initialLabel = '';
+                    if (promise && promise.then){
+                        promise.then(options => {
+                            if (options) this.options = options;
                         });
                     }
                 }
+                if (query !== '' && this.remote) this.lastRemoteQuery = query;
             },
-            navigateOptions (direction) {
-                if (direction === 'next') {
-                    const next = this.focusIndex + 1;
-                    this.focusIndex = (this.focusIndex === this.options.length) ? 1 : next;
-                } else if (direction === 'prev') {
-                    const prev = this.focusIndex - 1;
-                    this.focusIndex = (this.focusIndex <= 1) ? this.options.length : prev;
+            loading(state){
+                if (state === false){
+                    this.updateSlotOptions();
                 }
+            },
+            isFocused(focused){
+                const el = this.filterable ? this.$el.querySelector('input[type="text"]') : this.$el;
+                el[this.isFocused ? 'focus' : 'blur']();
 
-                let child_status = {
-                    disabled: false,
-                    hidden: false
-                };
-
-                let find_deep = false;    // can next find allowed
-
-                this.findChild((child) => {
-                    if (child.index === this.focusIndex) {
-                        child_status.disabled = child.disabled;
-                        child_status.hidden = child.hidden;
-
-                        if (!child.disabled && !child.hidden) {
-                            child.isFocus = true;
-                        }
-                    } else {
-                        child.isFocus = false;
-                    }
-
-                    if (!child.hidden && !child.disabled) {
-                        find_deep = true;
+                // restore query value in filterable single selects
+                const [selectedOption] = this.values;
+                if (selectedOption && this.filterable && !this.multiple && !focused){
+                    const selectedLabel = selectedOption.label || selectedOption.value;
+                    if (selectedLabel && this.query !== selectedLabel) {
+                        this.preventRemoteCall = true;
+                        this.query = selectedLabel;
                     }
+                }
+            },
+            focusIndex(index){
+                if (index < 0 || this.autoComplete) return;
+                // update scroll
+                const optionValue = this.flatOptions[index].componentOptions.propsData.value;
+                const optionInstance = findChild(this, ({$options}) => {
+                    return $options.componentName === 'select-item' && $options.propsData.value === optionValue;
                 });
 
-                this.resetScrollTop();
-
-                if ((child_status.disabled || child_status.hidden) && find_deep) {
-                    this.navigateOptions(direction);
-                }
-            },
-            resetScrollTop () {
-                const index = this.focusIndex - 1;
-                if (!this.optionInstances.length) return;
-                let bottomOverflowDistance = this.optionInstances[index].$el.getBoundingClientRect().bottom - this.$refs.dropdown.$el.getBoundingClientRect().bottom;
-                let topOverflowDistance = this.optionInstances[index].$el.getBoundingClientRect().top - this.$refs.dropdown.$el.getBoundingClientRect().top;
-
+                let bottomOverflowDistance = optionInstance.$el.getBoundingClientRect().bottom - this.$refs.dropdown.$el.getBoundingClientRect().bottom;
+                let topOverflowDistance = optionInstance.$el.getBoundingClientRect().top - this.$refs.dropdown.$el.getBoundingClientRect().top;
                 if (bottomOverflowDistance > 0) {
                     this.$refs.dropdown.$el.scrollTop += bottomOverflowDistance;
                 }
@@ -575,250 +654,18 @@
                     this.$refs.dropdown.$el.scrollTop += topOverflowDistance;
                 }
             },
-            handleBlur () {
-                setTimeout(() => {
-                    if (this.autoComplete) return;
-                    const model = this.model;
+            dropVisible(open){
+                this.broadcast('Drop', open ? 'on-update-popper' : 'on-destroy-popper');
+            },
+            selectOptions(){
+                if (this.hasExpectedValue){
+                    this.values = this.values.map(this.getOptionData);
+                    this.hasExpectedValue = false;
+                }
 
-                    if (this.multiple) {
-                        this.query = '';
-                    } else {
-                        if (model !== '') {
-                            this.findChild((child) => {
-                                if (child.value === model) {
-                                    this.query = child.label === undefined ? child.searchLabel : child.label;
-                                }
-                            });
-                            // 如果删除了搜索词，下拉列表也清空了，所以强制调用一次remoteMethod
-                            if (this.remote && this.query !== this.lastQuery) {
-                                this.$nextTick(() => {
-                                    this.query = this.lastQuery;
-                                });
-                            }
-                        } else {
-                            this.query = '';
-                        }
-                    }
-                }, 300);
-            },
-            resetInputState () {
-                this.inputLength = this.$refs.input.value.length * 12 + 20;
-            },
-            handleInputDelete () {
-                if (this.multiple && this.model.length && this.query === '') {
-                    this.removeTag(this.model.length - 1);
+                if (this.slotOptions && this.slotOptions.length === 0){
+                    this.query = '';
                 }
-            },
-            // use when slot changed
-            slotChange () {
-                this.options = [];
-                this.optionInstances = [];
-            },
-            setQuery (query) {
-                if (!this.filterable) return;
-                this.query = query;
-            },
-            modelToQuery() {
-                if (!this.multiple && this.filterable && this.model !== undefined) {
-                    this.findChild((child) => {
-                        if (this.model === child.value) {
-                            if (child.label) {
-                                this.query = child.label;
-                            } else if (child.searchLabel) {
-                                this.query = child.searchLabel;
-                            } else {
-                                this.query = child.value;
-                            }
-                        }
-                    });
-                }
-            },
-            broadcastQuery (val) {
-                if (findComponentDownward(this, 'OptionGroup')) {
-                    this.broadcast('OptionGroup', 'on-query-change', val);
-                    this.broadcast('iOption', 'on-query-change', val);
-                } else {
-                    this.broadcast('iOption', 'on-query-change', val);
-                }
-            },
-            debouncedAppendRemove(){
-                return debounce(function(){
-                    if (!this.remote) {
-                        this.modelToQuery();
-                        this.$nextTick(() => this.broadcastQuery(''));
-                    } else {
-                        this.findChild((child) => {
-                            child.updateSearchLabel();   // #1865
-                            child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
-                        });
-                    }
-                    this.slotChange();
-                    this.updateOptions(true);
-                });
-            },
-            // 处理 remote 初始值
-            updateLabel () {
-                if (this.remote) {
-                    if (!this.multiple && this.model !== '') {
-                        this.selectToChangeQuery = true;
-                        if (this.currentLabel === '') this.currentLabel = this.model;
-                        this.lastQuery = this.currentLabel;
-                        this.query = this.currentLabel;
-                    } else if (this.multiple && this.model.length) {
-                        if (this.currentLabel.length !== this.model.length) this.currentLabel = this.model;
-                        this.selectedMultiple = this.model.map((item, index) => {
-                            return {
-                                value: item,
-                                label: this.currentLabel[index]
-                            };
-                        });
-                    } else if (this.multiple && !this.model.length) {
-                        this.selectedMultiple = [];
-                    }
-                }
-            }
-        },
-        mounted () {
-            this.modelToQuery();
-            // 处理 remote 初始值
-            this.updateLabel();
-            this.$nextTick(() => {
-                this.broadcastQuery('');
-            });
-
-            this.updateOptions();
-            document.addEventListener('keydown', this.handleKeydown);
-
-            this.$on('append', this.debouncedAppendRemove());
-            this.$on('remove', this.debouncedAppendRemove());
-
-            this.$on('on-select-selected', (value) => {
-                if (this.model === value) {
-                    if (this.autoComplete) this.$emit('on-change', value);
-                    this.hideMenu();
-                } else {
-                    if (this.multiple) {
-                        const index = this.model.indexOf(value);
-                        if (index >= 0) {
-                            this.removeTag(index);
-                        } else {
-                            this.model.push(value);
-                            this.broadcast('Drop', 'on-update-popper');
-                        }
-
-                        if (this.filterable) {
-                            // remote&filterable&multiple时，一次点多项，不应该设置true，因为无法置为false，下次的搜索会失效
-                            if (this.query !== '') this.selectToChangeQuery = true;
-                            this.query = '';
-                            this.$refs.input.focus();
-                        }
-                    } else {
-                        this.model = value;
-
-                        if (this.filterable) {
-                            this.findChild((child) => {
-                                if (child.value === value) {
-                                    if (this.query !== '') this.selectToChangeQuery = true;
-                                    this.lastQuery = this.query = child.label === undefined ? child.searchLabel : child.label;
-                                }
-                            });
-                        }
-                    }
-                }
-            });
-        },
-        beforeDestroy () {
-            document.removeEventListener('keydown', this.handleKeydown);
-        },
-        watch: {
-            value (val) {
-                this.model = val;
-                // #982
-                if (val === '' || val === null) this.query = '';
-            },
-            label (val) {
-                this.currentLabel = val;
-                this.updateLabel();
-            },
-            model () {
-                this.$emit('input', this.model);
-                this.modelToQuery();
-                if (this.multiple) {
-                    if (this.slotChangeDuration) {
-                        this.slotChangeDuration = false;
-                    } else {
-                        this.updateMultipleSelected();
-                    }
-                } else {
-                    this.updateSingleSelected();
-                }
-                // #957
-                if (!this.visible && this.filterable) {
-                    this.$nextTick(() => {
-                        this.broadcastQuery('');
-                    });
-                }
-            },
-            visible (val) {
-                if (val) {
-                    if (this.filterable) {
-                        if (this.multiple) {
-                            this.$refs.input.focus();
-                        } else {
-                            if (!this.autoComplete) this.$refs.input.select();
-                        }
-                        if (this.remote) {
-                            this.findChild(child => {
-                                child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
-                            });
-                            // remote下，设置了默认值，第一次打开时，搜索一次
-                            const options = this.$slots.default || [];
-                            if (this.query !== '' && !options.length) {
-                                this.remoteMethod(this.query);
-                            }
-                        }
-                    }
-                    this.broadcast('Drop', 'on-update-popper');
-                } else {
-                    if (this.filterable) {
-                        if (!this.autoComplete) this.$refs.input.blur();
-                        // #566 reset options visible
-                        setTimeout(() => {
-                            this.broadcastQuery('');
-                        }, 300);
-                    }
-                    this.broadcast('Drop', 'on-destroy-popper');
-                }
-            },
-            query (val) {
-                if (this.remote && this.remoteMethod) {
-                    if (!this.selectToChangeQuery) {
-                        this.$emit('on-query-change', val);
-                        this.remoteMethod(val);
-                    }
-                    this.focusIndex = 0;
-                    this.findChild(child => {
-                        child.isFocus = false;
-                    });
-                } else {
-                    if (!this.selectToChangeQuery) {
-                        this.$emit('on-query-change', val);
-                    }
-                    this.broadcastQuery(val);
-
-                    let is_hidden = true;
-
-                    this.$nextTick(() => {
-                        this.findChild((child) => {
-                            if (!child.hidden) {
-                                is_hidden = false;
-                            }
-                        });
-                        this.notFound = is_hidden;
-                    });
-                }
-                this.selectToChangeQuery = false;
-                this.broadcast('Drop', 'on-update-popper');
             }
         }
     };
diff --git a/src/styles/components/select.less b/src/styles/components/select.less
index adb6c6ef..046501fe 100644
--- a/src/styles/components/select.less
+++ b/src/styles/components/select.less
@@ -25,23 +25,14 @@
         border: 1px solid @border-color-base;
         transition: all @transition-time @ease-in-out;
 
-        .@{select-prefix-cls}-arrow:nth-of-type(1) {
-            display: none;
-            cursor: pointer;
-        }
-
-        &:hover {
+        &:hover, &-focused {
             .hover();
-            .@{select-prefix-cls}-arrow:nth-of-type(1) {
+            .@{select-prefix-cls}-arrow {
                 display: inline-block;
             }
         }
     }
 
-    &-show-clear &-selection:hover .@{select-prefix-cls}-arrow:nth-of-type(2){
-        display: none;
-    }
-
     &-arrow {
         .inner-arrow();
     }
@@ -51,14 +42,9 @@
             .active();
         }
 
-        .@{select-prefix-cls}-arrow:nth-of-type(2) {
+        .@{select-prefix-cls}-arrow {
             transform: rotate(180deg);
-        }
-    }
-    &:focus{
-        outline: 0;
-        .@{select-prefix-cls}-selection{
-            .active();
+            display: inline-block;
         }
     }
 
@@ -66,7 +52,7 @@
         .@{select-prefix-cls}-selection {
             .disabled();
 
-            .@{select-prefix-cls}-arrow:nth-of-type(1) {
+            .@{select-prefix-cls}-arrow {
                 display: none;
             }
 
@@ -74,7 +60,7 @@
                 border-color: @border-color-base;
                 box-shadow: none;
 
-                .@{select-prefix-cls}-arrow:nth-of-type(2) {
+                .@{select-prefix-cls}-arrow {
                     display: inline-block;
                 }
             }
diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js
index cced6e6c..003f1eab 100644
--- a/test/unit/specs/select.spec.js
+++ b/test/unit/specs/select.spec.js
@@ -26,34 +26,40 @@ describe('Select.vue', () => {
         const placeholderSpan = vm.$el.querySelector('.ivu-select-placeholder');
         expect(placeholderSpan.textContent).to.equal(placeholder);
         expect(placeholderSpan.style.display).to.not.equal('none');
-
-        expect(vm.$children[0].showPlaceholder).to.equal(true);
         done();
       });
     });
 
     it('should create a Select component and take a pre-selected value', done => {
       vm = createVue({
-        template: `
-          <Select :value="2">
-            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
-          </Select>
-        `,
-        data() {
-          return {
-            value: '',
-            options: [{value: 1, label: 'Foo'}, {value: 2, label: 'Bar'}]
-          };
-        }
-      });
-      vm.$nextTick(() => {
-        const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
-        expect(selectedValueSpan.textContent).to.equal('Bar');
-        expect(selectedValueSpan.style.display).to.not.equal('none');
-        expect(vm.$children[0].selectedSingle).to.equal('Bar');
-        expect(vm.$children[0].model).to.equal(2);
-        done();
+          template: `
+              <Select :value="value">
+                <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
+              </Select>
+           `,
+          data() {
+              return {
+                  value: 2,
+                  options: [{value: 1, label: 'Foo'}, {value: 2, label: 'Bar'}]
+              };
+          }
       });
+      waitForIt(
+          () => {
+              const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
+              return selectedValueSpan.textContent === 'Bar';
+          },
+          () => {
+              const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
+              const {label, value} = vm.$children[0].values[0];
+
+              expect(selectedValueSpan.textContent).to.equal('Bar');
+              expect(selectedValueSpan.style.display).to.not.equal('none');
+              expect(label).to.equal('Bar');
+              expect(value).to.equal(2);
+              done();
+          }
+      );
     });
 
     it('should accept normal characters', done => {
@@ -112,13 +118,20 @@ describe('Select.vue', () => {
           };
         }
       });
-      vm.$nextTick(() => {
-        const placeholderSpan = vm.$el.querySelector('.ivu-select-placeholder');
-        const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
-        expect(placeholderSpan.style.display).to.equal('none');
-        expect(selectedValueSpan.style.display).to.not.equal('none');
-        done();
-      });
+        waitForIt(
+            () => {
+                const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
+                return selectedValueSpan.textContent === 'Bar';
+            },
+            () => {
+                const placeholderSpan = vm.$el.querySelector('.ivu-select-placeholder');
+                const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
+                expect(placeholderSpan).to.equal(null);
+                expect(!!selectedValueSpan.style.display).to.not.equal('none');
+                expect(selectedValueSpan.textContent).to.equal('Bar');
+                done();
+            }
+        );
     });
 
     it('should set different classes for different sizes', done => {
@@ -158,12 +171,10 @@ describe('Select.vue', () => {
         }
       });
       const condition = function() {
-        return vm.$children[0].options.length > 0;
+        const componentOptions = vm.$children[0].flatOptions;
+        return componentOptions && componentOptions.length > 0;
       };
       const callback = function() {
-        if (vm.$children[0].options == 0) return setTimeout(waitForIt.bind(null, done), 50);
-        expect(JSON.stringify(vm.$children[0].options)).to.equal(JSON.stringify(laterOptions));
-
         const renderedOptions = vm.$el.querySelectorAll('.ivu-select-dropdown-list li');
         expect(renderedOptions.length).to.equal(laterOptions.length);
 
@@ -177,79 +188,234 @@ describe('Select.vue', () => {
   });
 
   describe('Behavior tests', () => {
-    it('should create different and independent instances', done => {
-      const options = [
-        {value: 'beijing', label: 'Beijing'},
-        {value: 'stockholm', label: 'Stockholm'},
-        {value: 'lisboa', label: 'Lisboa'}
-      ];
+      it('should create different and independent instances', done => {
+          const options = [
+              {value: 'beijing', label: 'Beijing'},
+              {value: 'stockholm', label: 'Stockholm'},
+              {value: 'lisboa', label: 'Lisboa'}
+          ];
 
-      vm = createVue({
-        template: `
-          <div>
-            <i-select v-model="modelA" multiple style="width:260px">
-              <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
-            </i-select>
-            <i-select v-model="modelB" multiple style="width:260px">
-              <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
-            </i-select>
-          </div>
-        `,
-        data() {
-          return {
-            cityList: [],
-            modelA: [],
-            modelB: []
-          };
-        },
-        mounted() {
-          setTimeout(() => (this.cityList = options), 200);
-        }
+          vm = createVue({
+              template: `
+      <div>
+        <i-select v-model="modelA" multiple style="width:260px">
+          <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
+        </i-select>
+        <i-select v-model="modelB" multiple style="width:260px">
+          <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
+        </i-select>
+      </div>
+    `,
+              data() {
+                  return {
+                      cityList: [],
+                      modelA: [],
+                      modelB: []
+                  };
+              },
+              mounted() {
+                  setTimeout(() => (this.cityList = options), 200);
+              }
+          });
+          const [SelectA, SelectB] = vm.$children;
+          SelectA.toggleMenu(null, true);
+          SelectB.toggleMenu(null, true);
+
+          new Promise(resolve => {
+              const condition = function() {
+                  const optionsA = SelectA.$el.querySelectorAll('.ivu-select-item');
+                  const optionsB = SelectB.$el.querySelectorAll('.ivu-select-item');
+                  return optionsA.length > 0 && optionsB.length > 0;
+              };
+              waitForIt(condition, resolve);
+          })
+              .then(() => {
+                  // click in A options
+                  const optionsA = SelectA.$el.querySelectorAll('.ivu-select-item');
+                  optionsA[0].click();
+                  return promissedTick(SelectA);
+              })
+              .then(() => {
+                  expect(SelectA.value[0]).to.equal(options[0].value);
+                  expect(SelectA.value.length).to.equal(1);
+                  expect(SelectB.value.length).to.equal(0);
+
+                  // click in B options
+                  const optionsB = SelectB.$el.querySelectorAll('.ivu-select-item');
+                  optionsB[1].click();
+                  optionsB[2].click();
+                  return promissedTick(SelectB);
+              })
+              .then(() => {
+                  // lets check the values!
+                  const getSelections = component => {
+                      const tags = component.$el.querySelectorAll('.ivu-select-selection .ivu-tag');
+                      return [...tags].map(el => el.textContent.trim()).join(',');
+                  };
+                  const selectAValue = getSelections(SelectA);
+                  const selectBValue = getSelections(SelectB);
+
+                  expect(selectAValue).to.equal(options[0].label);
+                  expect(selectBValue).to.equal(options.slice(1, 3).map(obj => obj.label.trim()).join(','));
+
+                  done();
+              }).catch(err => {
+              console.log(err);
+              done(false);
+          });
       });
-      const [SelectA, SelectB] = vm.$children;
-      SelectA.toggleMenu();
-      SelectB.toggleMenu();
 
-      new Promise(resolve => {
-        const condition = function() {
-          const optionsA = SelectA.$el.querySelectorAll('.ivu-select-item');
-          const optionsB = SelectB.$el.querySelectorAll('.ivu-select-item');
-          return optionsA.length > 0 && optionsB.length > 0;
-        };
-        waitForIt(condition, resolve);
-      })
-        .then(() => {
-          // click in A options
-          const optionsA = SelectA.$el.querySelectorAll('.ivu-select-item');
-          optionsA[0].click();
-          return promissedTick(SelectA);
-        })
-        .then(() => {
-          expect(SelectA.value[0]).to.equal(options[0].value);
-          expect(SelectA.value.length).to.equal(1);
-          expect(SelectB.value.length).to.equal(0);
+      it('should create update model with value, and label when asked', done => {
+          const options = [
+              {value: 'beijing', label: 'Beijing'},
+              {value: 'stockholm', label: 'Stockholm'},
+              {value: 'lisboa', label: 'Lisboa'}
+          ];
+          let onChangeValueA, onChangeValueB;
 
-          // click in B options
-          const optionsB = SelectB.$el.querySelectorAll('.ivu-select-item');
-          optionsB[1].click();
-          optionsB[2].click();
-          return promissedTick(SelectB);
-        })
-        .then(() => {
-          // lets check the values!
-          const getSelections = component => {
-            const tags = component.$el.querySelectorAll('.ivu-select-selection .ivu-tag');
-            return [...tags].map(el => el.textContent.trim()).join(',');
-          };
-          const selectAValue = getSelections(SelectA);
-          const selectBValue = getSelections(SelectB);
 
-          expect(selectAValue).to.equal(options[0].label);
-          expect(selectBValue).to.equal(options.slice(1, 3).map(obj => obj.label.trim()).join(','));
+          vm = createVue({
+              template: `
+                  <div>
+                    <i-select v-model="modelA" style="width:260px" @on-change="onChangeA">
+                      <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
+                    </i-select>
+                    <i-select v-model="modelB" label-in-value style="width:260px" @on-change="onChangeB">
+                      <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
+                    </i-select>
+                  </div>
+                `,
+              data() {
+                  return {
+                      cityList: options,
+                      modelA: [],
+                      modelB: []
+                  };
+              },
+              methods: {
+                  onChangeA(val){
+                      onChangeValueA = val;
+                  },
+                  onChangeB(val){
+                      onChangeValueB = val;
+                  }
+              }
+          });
+          const [SelectA, SelectB] = vm.$children;
+          SelectA.toggleMenu(null, true);
+          SelectB.toggleMenu(null, true);
 
-          done();
-        });
-    });
+
+          new Promise(resolve => {
+              const condition = function() {
+                  const optionsA = SelectA.$el.querySelectorAll('.ivu-select-item');
+                  const optionsB = SelectB.$el.querySelectorAll('.ivu-select-item');
+                  return optionsA.length > 0 && optionsB.length > 0;
+              };
+              waitForIt(condition, resolve);
+          })
+          .then(() => {
+              // click in A options
+              const optionsA = SelectA.$el.querySelectorAll('.ivu-select-item');
+              optionsA[0].click();
+              return promissedTick(SelectA);
+          })
+          .then(() => {
+              expect(vm.modelA).to.equal(options[0].value);
+              expect(onChangeValueA).to.equal(options[0].value);
+
+              // click in B options
+              const optionsB = SelectB.$el.querySelectorAll('.ivu-select-item');
+              optionsB[2].click();
+              return promissedTick(SelectB);
+          })
+          .then(() => {
+              expect(vm.modelB).to.equal(options[2].value);
+              expect(JSON.stringify(onChangeValueB)).to.equal(JSON.stringify(options[2]));
+              done();
+          });
+      });
+  });
+
+  describe('Public API', () => {
+      it('The "setQuery" method should behave as expected', (done) => {
+
+          const options = [
+              {value: 'beijing', label: 'Beijing'},
+              {value: 'stockholm', label: 'Stockholm'},
+              {value: 'lisboa', label: 'Lisboa'}
+          ];
+
+          vm = createVue({
+              template: `
+                <Select v-model="value" filterable>
+                    <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                </Select>
+                `,
+              data() {
+                  return {
+                      value: '',
+                      options: options
+                  };
+              }
+          });
+          const [Select] = vm.$children;
+          Select.setQuery('i');
+          vm.$nextTick(() => {
+              const query = 'i';
+              const input = vm.$el.querySelector('.ivu-select-input');
+              expect(input.value).to.equal(query);
+
+              const renderedOptions = [...vm.$el.querySelectorAll('.ivu-select-item')].map(el => el.textContent);
+              const filteredOptions = options.filter(option => JSON.stringify(option).includes(query)).map(({label}) => label);
+              expect(JSON.stringify(renderedOptions)).to.equal(JSON.stringify(filteredOptions));
+
+              // reset query
+              // setQuery(null) should clear the select
+              Select.setQuery(null);
+              vm.$nextTick(() => {
+                  const input = vm.$el.querySelector('.ivu-select-input');
+                  expect(input.value).to.equal('');
+
+                  const renderedOptions = [...vm.$el.querySelectorAll('.ivu-select-item')].map(el => el.textContent);
+                  expect(JSON.stringify(renderedOptions)).to.equal(JSON.stringify(options.map(({label}) => label)));
+                  done();
+              });
+          });
+
+      });
+
+      it('The "clearSingleSelect" method should behave as expected', (done) => {
+
+          // clearSingleSelect
+          const options = [
+              {value: 'beijing', label: 'Beijing'},
+              {value: 'stockholm', label: 'Stockholm'},
+              {value: 'lisboa', label: 'Lisboa'}
+          ];
+          const preSelected = 'lisboa';
+
+          vm = createVue({
+              template: `
+                <Select v-model="value" clearable>
+                    <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                </Select>
+                `,
+              data() {
+                  return {
+                      value: preSelected,
+                      options: options
+                  };
+              }
+          });
+          const [Select] = vm.$children;
+          vm.$nextTick(() => {
+              expect(Select.publicValue).to.equal(preSelected);
+              Select.clearSingleSelect();
+              expect(typeof Select.publicValue).to.equal('undefined');
+              done();
+          });
+      });
   });
 
   describe('Performance tests', () => {
@@ -278,7 +444,8 @@ describe('Select.vue', () => {
         }
       });
       const condition = function() {
-        return vm.$children[0].options.length == manyLaterOptions.length;
+        const componentOptions = vm.$children[0].flatOptions;
+        return componentOptions && componentOptions.length === manyLaterOptions.length;
       };
       const callback = function() {
         const end = +new Date();