From c9b86944ec1dfe33c572461f2489a74f217194e8 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Tue, 27 Mar 2018 09:58:27 +0200
Subject: [PATCH] Refactor Select!

---
 src/components/select/functional-options.vue |   29 +
 src/components/select/option.vue             |   61 +-
 src/components/select/select-head.vue        |  196 ++++
 src/components/select/select.vue             | 1007 +++++++-----------
 src/styles/components/select.less            |   26 +-
 5 files changed, 647 insertions(+), 672 deletions(-)
 create mode 100644 src/components/select/functional-options.vue
 create mode 100644 src/components/select/select-head.vue

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..749bb0cd 100644
--- a/src/components/select/option.vue
+++ b/src/components/select/option.vue
@@ -1,5 +1,5 @@
 <template>
-    <li :class="classes" @click.stop="select" @mouseout.stop="blur" v-show="!hidden"><slot>{{ showLabel }}</slot></li>
+    <li :class="classes" @click.stop="select"><slot>{{ showLabel }}</slot></li>
 </template>
 <script>
     import Emitter from '../../mixins/emitter';
@@ -22,15 +22,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 +45,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..ba98364f 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -1,38 +1,50 @@
 <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"
+
+                    ref="selectHead"
+                />
             </slot>
         </div>
         <transition name="transition-drop">
@@ -42,9 +54,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 +73,32 @@
 <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 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;
+        }
+    };
 
     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 +131,6 @@
             filterMethod: {
                 type: Function
             },
-            remote: {
-                type: Boolean,
-                default: false
-            },
             remoteMethod: {
                 type: Function
             },
@@ -147,23 +175,29 @@
                 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.values = this.values.map(this.getOptionData);
+            }
+        },
         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: '',
             };
         },
         computed: {
@@ -189,58 +223,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,574 +246,358 @@
             },
             dropVisible () {
                 let status = true;
-                const options = this.$slots.default || [];
+                const options = this.selectOptions;
                 if (!this.loading && this.remote && this.query === '' && !options.length) status = false;
 
                 if (this.autoComplete && !options.length) 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.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 = [];
+                let optionCounter = -1;
+                const currentIndex = this.focusIndex;
+                const selectedValues = this.values.map(({value}) => value);
+                for (let option of (this.slotOptions || [])) {
+
+                    if (!option.componentOptions) continue;
+
+                    if (option.componentOptions.tag.match(optionGroupRegexp)){
+                        let children = option.componentOptions.children;
+
+                        // remove filtered children
+                        if (this.filterable){
+                            children = children.filter(
+                                ({componentOptions}) => this.validateOption(componentOptions)
+                            );
+                        }
+
+                        option.componentOptions.children = children.map(opt => {
+                            optionCounter = optionCounter + 1;
+                            return this.processOption(opt, selectedValues, optionCounter === currentIndex);
+                        });
+
+                        // keep the group if it still has children
+                        if (option.componentOptions.children.length > 0) selectOptions.push({...option});
+                    } else {
+                        // ignore option if not passing filter
+                        const optionPassesFilter = this.filterable ? this.validateOption(option.componentOptions) : option;
+                        if (!optionPassesFilter) continue;
+
+                        optionCounter = optionCounter + 1;
+                        selectOptions.push(this.processOption(option, selectedValues, optionCounter === currentIndex));
+                    }
+                }
+
+                return selectOptions;
+            },
+            flatOptions(){
+                return this.selectOptions.reduce((options, option) => {
+                    const isOptionGroup = option.componentOptions.tag.match(optionGroupRegexp);
+                    if (isOptionGroup) return options.concat(option.componentOptions.children || []);
+                    else return options.concat(option);
+                }, []);
+            },
+            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);
+                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;
+                }
             },
             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.$refs.selectHead.$refs.input;
+                        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);
-                        }
-                    }
+                    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.$refs.selectHead.$refs.input;
+                    this.$nextTick(() => inputField.focus());
+                }
+            },
+            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;
+
+                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 {selectHead, reference} = this.$refs;
+                const el = this.filterable ? selectHead.$el.querySelector('input') : reference;
+                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 (this.query !== selectedLabel) this.query = selectedLabel;
+                }
+            },
+            focusIndex(index){
+                if (index < 0) 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;
                 }
                 if (topOverflowDistance < 0) {
                     this.$refs.dropdown.$el.scrollTop += topOverflowDistance;
                 }
-            },
-            handleBlur () {
-                setTimeout(() => {
-                    if (this.autoComplete) return;
-                    const model = this.model;
-
-                    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);
-                }
-            },
-            // 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;
                 }
             }