From 13cc2ada5a80bf15d9752bd0cb537efe871e41f9 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 7 Feb 2018 18:56:58 +0800
Subject: [PATCH] add  select

---
 components/_util/props-util.js         |   15 +-
 components/_util/vnode.js              |    3 +
 components/vc-select/DropdownMenu.vue  |   27 +-
 components/vc-select/PropTypes.js      |    4 +-
 components/vc-select/Select.vue        | 1294 ++++++++++++++++++++++++
 components/vc-select/SelectTrigger.vue |  195 ++++
 components/vc-select/assets/index.less |  502 +++++++++
 components/vc-select/demo/combobox.vue |   63 ++
 components/vc-select/util.js           |    5 +-
 examples/routes.js                     |    2 +-
 package.json                           |    1 +
 11 files changed, 2085 insertions(+), 26 deletions(-)
 create mode 100644 components/vc-select/assets/index.less
 create mode 100644 components/vc-select/demo/combobox.vue

diff --git a/components/_util/props-util.js b/components/_util/props-util.js
index 97a929dad..b01fd9adf 100644
--- a/components/_util/props-util.js
+++ b/components/_util/props-util.js
@@ -3,6 +3,11 @@ const hasProp = (instance, prop) => {
   const propsData = $options.propsData || {}
   return prop in propsData
 }
+const slotHasProp = (slot, prop) => {
+  const $options = slot.componentOptions || {}
+  const propsData = $options.propsData || {}
+  return prop in propsData
+}
 const filterProps = (props, propsData = {}) => {
   const res = {}
   Object.keys(props).forEach((k) => {
@@ -12,7 +17,9 @@ const filterProps = (props, propsData = {}) => {
   })
   return res
 }
-
+const getSlotOptions = (slot) => {
+  return slot.componentOptions.Ctor.options
+}
 const getOptionProps = (instance) => {
   const { $options = {}, $props = {}} = instance
   return filterProps($props, $options.propsData)
@@ -27,5 +34,9 @@ const getComponentFromProp = (instance, prop) => {
   return instance.$slots[prop]
 }
 
-export { hasProp, filterProps, getOptionProps, getComponentFromProp }
+const getPropsData = (ele) => {
+  return ele.componentOptions && ele.componentOptions.propsData
+}
+
+export { hasProp, filterProps, getOptionProps, getComponentFromProp, getSlotOptions, slotHasProp, getPropsData }
 export default hasProp
diff --git a/components/_util/vnode.js b/components/_util/vnode.js
index ba85697ee..079c31522 100644
--- a/components/_util/vnode.js
+++ b/components/_util/vnode.js
@@ -123,6 +123,9 @@ export function filterEmpty (children = []) {
 export function getPropsData (ele) {
   return ele.componentOptions && ele.componentOptions.propsData
 }
+export function getValueByProp (ele, prop) {
+  return ele.componentOptions && ele.componentOptions.propsData[prop]
+}
 
 export function getEvents (child) {
   let events = {}
diff --git a/components/vc-select/DropdownMenu.vue b/components/vc-select/DropdownMenu.vue
index 2d16545cc..750f34cf4 100644
--- a/components/vc-select/DropdownMenu.vue
+++ b/components/vc-select/DropdownMenu.vue
@@ -1,6 +1,5 @@
 <script>
 import PropTypes from '../_util/vue-types'
-import toArray from 'rc-util/lib/Children/toArray'
 import Menu from '../vc-menu'
 import scrollIntoView from 'dom-scroll-into-view'
 import { getSelectKeys, preventDefaultEvent } from './util'
@@ -99,6 +98,7 @@ export default {
         firstActiveValue,
         dropdownMenuStyle,
       } = props
+      const { menuDeselect, menuSelect } = this.$listeners
       if (menuItems && menuItems.length) {
         const selectedKeys = getSelectKeys(menuItems, value)
         const menuProps = {
@@ -114,10 +114,10 @@ export default {
           ref: 'menuRef',
         }
         if (multiple) {
-          menuProps.on.deselect = this.onMenuDeselect
-          menuProps.on.select = this.onMenuSelect
+          menuProps.on.deselect = menuDeselect
+          menuProps.on.select = menuSelect
         } else {
-          menuProps.on.click = this.onMenuSelect
+          menuProps.on.click = menuSelect
         }
         const activeKeyProps = {}
 
@@ -146,7 +146,7 @@ export default {
 
           clonedMenuItems = menuItems.map(item => {
             if (item.type.isMenuItemGroup) {
-              const children = toArray(item.props.children).map(clone)
+              const children = item.$slots.default.map(clone)
               return cloneElement(item, {}, children)
             }
             return clone(item)
@@ -167,27 +167,16 @@ export default {
       }
       return null
     },
-    onPopupFocus (e) {
-      this.__emit('popupFocus', e)
-    },
-    onPopupScroll (e) {
-      this.__emit('popupScroll', e)
-    },
-    onMenuDeselect () {
-      this.__emit('menuDeselect', ...arguments)
-    },
-    onMenuSelect () {
-      this.__emit('menuSelect', ...arguments)
-    },
   },
   render () {
     const renderMenu = this.renderMenu()
+    const { popupFocus, popupScroll } = this.$listeners
     return renderMenu ? (
       <div
         style={{ overflow: 'auto' }}
-        onFocus={this.onPopupFocus}
+        onFocus={popupFocus}
         onMousedown={preventDefaultEvent}
-        onScroll={this.onPopupScroll}
+        onScroll={popupScroll}
       >
         {renderMenu}
       </div>
diff --git a/components/vc-select/PropTypes.js b/components/vc-select/PropTypes.js
index 6b6b2bc18..e9a866b15 100644
--- a/components/vc-select/PropTypes.js
+++ b/components/vc-select/PropTypes.js
@@ -69,8 +69,8 @@ export const SelectPropTypes = {
   placeholder: PropTypes.any,
   // onDeselect: PropTypes.func,
   labelInValue: PropTypes.bool,
-  value: valueType,
-  defaultValue: valueType,
+  value: PropTypes.any,
+  defaultValue: PropTypes.any,
   dropdownStyle: PropTypes.object,
   maxTagTextLength: PropTypes.number,
   maxTagCount: PropTypes.number,
diff --git a/components/vc-select/Select.vue b/components/vc-select/Select.vue
index e69de29bb..cff6cca59 100644
--- a/components/vc-select/Select.vue
+++ b/components/vc-select/Select.vue
@@ -0,0 +1,1294 @@
+<script>
+import KeyCode from '../_util/KeyCode'
+import PropTypes from '../_util/vue-types'
+import classnames from 'classnames'
+import classes from 'component-classes'
+import { Item as MenuItem, ItemGroup as MenuItemGroup } from '../vc-menu'
+import warning from 'warning'
+import { hasProp, getSlotOptions } from '../_util/props-util'
+import getTransitionProps from '../_util/getTransitionProps'
+import { cloneElement, getClass, getPropsData, getValueByProp as getValue, getEvents } from '../_util/vnode'
+import BaseMixin from '../_util/BaseMixin'
+
+import {
+  getPropValue,
+  getValuePropValue,
+  isCombobox,
+  isMultipleOrTags,
+  isMultipleOrTagsOrCombobox,
+  isSingleMode,
+  toArray,
+  findIndexInValueByKey,
+  UNSELECTABLE_ATTRIBUTE,
+  UNSELECTABLE_STYLE,
+  preventDefaultEvent,
+  findFirstMenuItem,
+  includesSeparators,
+  splitBySeparators,
+  findIndexInValueByLabel,
+  defaultFilterFn,
+  validateOptionValue,
+} from './util'
+import SelectTrigger from './SelectTrigger'
+import { SelectPropTypes } from './PropTypes'
+
+function noop () {}
+
+function chaining (...fns) {
+  return function (...args) { // eslint-disable-line
+    // eslint-disable-line
+    for (let i = 0; i < fns.length; i++) {
+      if (fns[i] && typeof fns[i] === 'function') {
+        fns[i].apply(this, args)
+      }
+    }
+  }
+}
+export default {
+  name: 'Select',
+  mixins: [BaseMixin],
+  props: {
+    ...SelectPropTypes,
+    prefixCls: SelectPropTypes.prefixCls.def('rc-select'),
+    defaultOpen: PropTypes.bool.def(false),
+    labelInValue: SelectPropTypes.labelInValue.def(false),
+    defaultActiveFirstOption: SelectPropTypes.defaultActiveFirstOption.def(true),
+    showSearch: SelectPropTypes.showSearch.def(true),
+    allowClear: SelectPropTypes.allowClear.def(false),
+    placeholder: SelectPropTypes.placeholder.def(''),
+    showArrow: SelectPropTypes.showArrow.def(true),
+    dropdownMatchSelectWidth: PropTypes.bool.def(true),
+    dropdownStyle: SelectPropTypes.dropdownStyle.def({}),
+    dropdownMenuStyle: PropTypes.object.def({}),
+    optionFilterProp: SelectPropTypes.optionFilterProp.def('value'),
+    optionLabelProp: SelectPropTypes.optionLabelProp.def('value'),
+    notFoundContent: PropTypes.string.def('Not Found'),
+    backfill: PropTypes.bool.def(false),
+    showAction: SelectPropTypes.showAction.def(['click']),
+    // onChange: noop,
+    // onFocus: noop,
+    // onBlur: noop,
+    // onSelect: noop,
+    // onSearch: noop,
+    // onDeselect: noop,
+    // onInputKeydown: noop,
+  },
+  data () {
+    let sValue = []
+    const { value, defaultValue, combobox, open, defaultOpen, $slots } = this
+    if (hasProp(this, 'value')) {
+      sValue = toArray(value)
+    } else {
+      sValue = toArray(defaultValue)
+    }
+    sValue = this.addLabelToValue(sValue)
+    sValue = this.addTitleToValue($slots, sValue)
+    let inputValue = ''
+    if (combobox) {
+      inputValue = sValue.length
+        ? this.getLabelFromProps(sValue[0].key)
+        : ''
+    }
+    let sOpen = open
+    if (sOpen === undefined) {
+      sOpen = defaultOpen
+    }
+    this.adjustOpenState()
+    return {
+      sValue,
+      inputValue,
+      sOpen,
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.autoFocus && this.focus()
+    })
+  },
+  beforeUpdate () {
+    if (hasProp(this, 'value')) {
+      const { combobox, $slots } = this
+      let value = toArray(this.value)
+      value = this.addLabelToValue(value)
+      value = this.addTitleToValue($slots, value)
+      this.setState({
+        sValue: value,
+      })
+      if (combobox) {
+        this.setState({
+          inputValue: value.length
+            ? this.getLabelFromProps(value[0].key)
+            : '',
+        })
+      }
+    }
+    this.adjustOpenState()
+  },
+
+  updated () {
+    this.$nextTick(() => {
+      if (isMultipleOrTags(this.$props)) {
+        const inputNode = this.getInputDOMNode()
+        const mirrorNode = this.getInputMirrorDOMNode()
+        if (inputNode.value) {
+          inputNode.style.width = ''
+          inputNode.style.width = `${mirrorNode.clientWidth}px`
+        } else {
+          inputNode.style.width = ''
+        }
+      }
+    })
+  },
+
+  beforeDestroy () {
+    this.clearFocusTime()
+    this.clearBlurTime()
+    this.clearAdjustTimer()
+    if (this.dropdownContainer) {
+      // ReactDOM.unmountComponentAtNode(this.dropdownContainer)
+      document.body.removeChild(this.dropdownContainer)
+      this.dropdownContainer = null
+    }
+  },
+  methods: {
+    onInputChange (event) {
+      const { tokenSeparators } = this
+      const val = event.target.value
+      if (
+        isMultipleOrTags(this.$props) &&
+      tokenSeparators &&
+      includesSeparators(val, tokenSeparators)
+      ) {
+        const nextValue = this.tokenize(val)
+        this.fireChange(nextValue)
+        this.setOpenState(false, true)
+        this.setInputValue('', false)
+        return
+      }
+      this.setInputValue(val)
+      this.setState({
+        sOpen: true,
+      })
+      if (isCombobox(this.$props)) {
+        this.fireChange([
+          {
+            key: val,
+          },
+        ])
+      }
+    },
+
+    onDropdownVisibleChange (open) {
+      if (open && !this._focused) {
+        this.clearBlurTime()
+        this.timeoutFocus()
+        this._focused = true
+        this.updateFocusClassName()
+      }
+      this.setOpenState(open)
+    },
+
+    // combobox ignore
+    onKeyDown (event) {
+      const { disabled, sOpen } = this
+      if (disabled) {
+        return
+      }
+      const keyCode = event.keyCode
+      if (sOpen && !this.getInputDOMNode()) {
+        this.onInputKeydown(event)
+      } else if (keyCode === KeyCode.ENTER || keyCode === KeyCode.DOWN) {
+        this.setOpenState(true)
+        event.preventDefault()
+      }
+    },
+
+    onInputKeydown (event) {
+      const { disabled, sOpen, sValue, $props } = this
+      if (disabled) {
+        return
+      }
+      const keyCode = event.keyCode
+      if (
+        isMultipleOrTags($props) &&
+      !event.target.value &&
+      keyCode === KeyCode.BACKSPACE
+      ) {
+        event.preventDefault()
+        if (sValue.length) {
+          this.removeSelected(sValue[sValue.length - 1].key)
+        }
+        return
+      }
+      if (keyCode === KeyCode.DOWN) {
+        if (!sOpen) {
+          this.openIfHasChildren()
+          event.preventDefault()
+          event.stopPropagation()
+          return
+        }
+      } else if (keyCode === KeyCode.ESC) {
+        if (sOpen) {
+          this.setOpenState(false)
+          event.preventDefault()
+          event.stopPropagation()
+        }
+        return
+      }
+
+      if (sOpen) {
+        const menu = this.$refs.selectTriggerRef.getInnerMenu()
+        if (menu && menu.onKeyDown(event, this.handleBackfill)) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+      }
+    },
+
+    onMenuSelect ({ item }) {
+      let sValue = this.sValue
+      const props = this.$props
+      const selectedValue = getValuePropValue(item)
+      const selectedLabel = this.getLabelFromOption(item)
+      const lastValue = sValue[sValue.length - 1]
+      let event = selectedValue
+      if (props.labelInValue) {
+        event = {
+          key: event,
+          label: selectedLabel,
+        }
+      }
+      this.__emit('select', event, item)
+      const selectedTitle = item.props.title
+      if (isMultipleOrTags(props)) {
+        if (findIndexInValueByKey(sValue, selectedValue) !== -1) {
+          return
+        }
+        sValue = sValue.concat([
+          {
+            key: selectedValue,
+            label: selectedLabel,
+            title: selectedTitle,
+          },
+        ])
+      } else {
+        if (isCombobox(props)) {
+          this.skipAdjustOpen = true
+          this.clearAdjustTimer()
+          this.skipAdjustOpenTimer = setTimeout(() => {
+            this.skipAdjustOpen = false
+          }, 0)
+        }
+        if (lastValue && lastValue.key === selectedValue && !lastValue.backfill) {
+          this.setOpenState(false, true)
+          return
+        }
+        sValue = [
+          {
+            key: selectedValue,
+            label: selectedLabel,
+            title: selectedTitle,
+          },
+        ]
+        this.setOpenState(false, true)
+      }
+      this.fireChange(sValue)
+      let inputValue
+      if (isCombobox(props)) {
+        inputValue = getPropValue(item, props.optionLabelProp)
+      } else {
+        inputValue = ''
+      }
+      this.setInputValue(inputValue, false)
+    },
+
+    onMenuDeselect ({ item, domEvent }) {
+      if (domEvent.type === 'click') {
+        this.removeSelected(getValuePropValue(item))
+      }
+      this.setInputValue('', false)
+    },
+
+    onArrowClick (e) {
+      e.stopPropagation()
+      if (!this.disabled) {
+        this.setOpenState(!this.sOpen, !this.sOpen)
+      }
+    },
+
+    onPlaceholderClick () {
+      if (this.getInputDOMNode()) {
+        this.getInputDOMNode().focus()
+      }
+    },
+
+    onOuterFocus (e) {
+      if (this.disabled) {
+        e.preventDefault()
+        return
+      }
+      this.clearBlurTime()
+      if (
+        !isMultipleOrTagsOrCombobox(this.$props) &&
+      e.target === this.getInputDOMNode()
+      ) {
+        return
+      }
+      if (this._focused) {
+        return
+      }
+      this._focused = true
+      this.updateFocusClassName()
+      this.timeoutFocus()
+    },
+
+    onPopupFocus () {
+    // fix ie scrollbar, focus element again
+      this.maybeFocus(true, true)
+    },
+
+    onOuterBlur (e) {
+      if (this.disabled) {
+        e.preventDefault()
+        return
+      }
+      this.blurTimer = setTimeout(() => {
+        this._focused = false
+        this.updateFocusClassName()
+        const props = this.$props
+        let { sValue } = this
+        const { inputValue } = this
+        if (
+          isSingleMode(props) &&
+        props.showSearch &&
+        inputValue &&
+        props.defaultActiveFirstOption
+        ) {
+          const options = this._options || []
+          if (options.length) {
+            const firstOption = findFirstMenuItem(options)
+            if (firstOption) {
+              sValue = [
+                {
+                  key: firstOption.key,
+                  label: this.getLabelFromOption(firstOption),
+                },
+              ]
+              this.fireChange(sValue)
+            }
+          }
+        } else if (isMultipleOrTags(props) && inputValue) {
+        // why not use setState?
+          this.inputValue = this.getInputDOMNode().value = ''
+        }
+        this._emit('blur', this.getVLForOnChange(sValue))
+        this.setOpenState(false)
+      }, 10)
+    },
+
+    onClearSelection (event) {
+      const { inputValue, sValue, disabled } = this
+      if (disabled) {
+        return
+      }
+      event.stopPropagation()
+      if (inputValue || sValue.length) {
+        if (sValue.length) {
+          this.fireChange([])
+        }
+        this.setOpenState(false, true)
+        if (inputValue) {
+          this.setInputValue('')
+        }
+      }
+    },
+
+    onChoiceAnimationLeave () {
+      this.$refs.selectTriggerRef.triggerRef.forcePopupAlign()
+    },
+
+    getLabelBySingleValue (children, value) {
+      if (value === undefined) {
+        return null
+      }
+      let label = null
+      children.forEach(child => {
+        if (!child) {
+          return
+        }
+        console.log('child', child)
+        if (getSlotOptions(child).isSelectOptGroup) {
+          const maybe = this.getLabelBySingleValue(child.componentOptions.children, value)
+          if (maybe !== null) {
+            label = maybe
+          }
+        } else if (getValuePropValue(child) === value) {
+          label = this.getLabelFromOption(child)
+        }
+      })
+      return label
+    },
+
+    getValueByLabel (children, label) {
+      if (label === undefined) {
+        return null
+      }
+      let value = null
+      children.forEach(child => {
+        if (!child) {
+          return
+        }
+        if (getSlotOptions(child).isSelectOptGroup) {
+          const maybe = this.getValueByLabel(child.componentOptions.children, label)
+          if (maybe !== null) {
+            value = maybe
+          }
+        } else if (toArray(this.getLabelFromOption(child)).join('') === label) {
+          value = getValuePropValue(child)
+        }
+      })
+      return value
+    },
+
+    getLabelFromOption (child) {
+      return getPropValue(child, this.optionLabelProp)
+    },
+
+    getLabelFromProps (value) {
+      return this.getLabelByValue(this.$slots.default, value)
+    },
+
+    getVLForOnChange (vls_) {
+      let vls = vls_
+      if (vls !== undefined) {
+        if (!this.labelInValue) {
+          vls = vls.map(v => v.key)
+        } else {
+          vls = vls.map(vl => ({ key: vl.key, label: vl.label }))
+        }
+        return isMultipleOrTags(this.$props) ? vls : vls[0]
+      }
+      return vls
+    },
+
+    getLabelByValue (children, value) {
+      const label = this.getLabelBySingleValue(children, value)
+      if (label === null) {
+        return value
+      }
+      return label
+    },
+
+    getDropdownContainer () {
+      if (!this.dropdownContainer) {
+        this.dropdownContainer = document.createElement('div')
+        document.body.appendChild(this.dropdownContainer)
+      }
+      return this.dropdownContainer
+    },
+
+    getPlaceholderElement () {
+      // const { props, state } = this
+      const { inputValue, sValue, placeholder, prefixCls, $props } = this
+      let hidden = false
+      if (inputValue) {
+        hidden = true
+      }
+      if (sValue.length) {
+        hidden = true
+      }
+      if (isCombobox($props) && sValue.length === 1 && !sValue[0].key) {
+        hidden = false
+      }
+      if (placeholder) {
+        return (
+          <div
+            onMousedown={preventDefaultEvent}
+            style={{
+              display: hidden ? 'none' : 'block',
+              ...UNSELECTABLE_STYLE,
+            }}
+            {...UNSELECTABLE_ATTRIBUTE}
+            onClick={this.onPlaceholderClick}
+            class={`${prefixCls}-selection__placeholder`}
+          >
+            {placeholder}
+          </div>
+        )
+      }
+      return null
+    },
+
+    _getInputElement () {
+      const props = this.$props
+      const inputElement = props.getInputElement
+        ? props.getInputElement()
+        : <input id={props.id} autoComplete='off' />
+      const inputCls = classnames(getClass(inputElement), {
+        [`${props.prefixCls}-search__field`]: true,
+      })
+      // https://github.com/ant-design/ant-design/issues/4992#issuecomment-281542159
+      // Add space to the end of the inputValue as the width measurement tolerance
+      return (
+        <div class={`${props.prefixCls}-search__field__wrap`}>
+          {cloneElement(inputElement, {
+            props: {
+              value: this.inputValue,
+              disabled: props.disabled,
+
+            },
+            class: inputCls,
+            ref: 'inputRef',
+            on: {
+              change: this.onInputChange,
+              keyDown: chaining(
+                this.onInputKeydown,
+                getEvents(inputElement).keydown || noop,
+                this.$listeners.inputKeydown
+              ),
+            },
+          })}
+          <span
+            ref='inputMirrorRef'
+            class={`${props.prefixCls}-search__field__mirror`}
+          >
+            {this.inputValue}&nbsp;
+          </span>
+        </div>
+      )
+    },
+
+    getInputDOMNode () {
+      return this.$refs.topCtrlRef
+        ? this.$refs.topCtrlRef.querySelector('input,textarea,div[contentEditable]')
+        : this.$refs.inputRef
+    },
+
+    getInputMirrorDOMNode () {
+      return this.$refs.inputMirrorRef
+    },
+
+    getPopupDOMNode () {
+      return this.$refs.selectTriggerRef.getPopupDOMNode()
+    },
+
+    getPopupMenuComponent () {
+      return this.$refs.selectTriggerRef.getInnerMenu()
+    },
+
+    setOpenState (open, needFocus) {
+      const { $props: props, $data: state } = this
+      if (state.sOpen === open) {
+        this.maybeFocus(open, needFocus)
+        return
+      }
+      const nextState = {
+        sOpen: open,
+      }
+      // clear search input value when open is false in singleMode.
+      if (!open && isSingleMode(props) && props.showSearch) {
+        this.setInputValue('')
+      }
+      if (!open) {
+        this.maybeFocus(open, needFocus)
+      }
+      this.setState(nextState, () => {
+        if (open) {
+          this.maybeFocus(open, needFocus)
+        }
+      })
+    },
+
+    setInputValue (inputValue, fireSearch = true) {
+      if (inputValue !== this.inputValue) {
+        this.setState({
+          inputValue,
+        })
+        if (fireSearch) {
+          this.__emit('search', inputValue)
+        }
+      }
+    },
+
+    focus () {
+      if (isSingleMode(this.props)) {
+        this.$refs.selectionRef.focus()
+      } else {
+        this.getInputDOMNode().focus()
+      }
+    },
+
+    blur () {
+      if (isSingleMode(this.props)) {
+        this.$refs.selectionRef.blur()
+      } else {
+        this.getInputDOMNode().blur()
+      }
+    },
+
+    handleBackfill (item) {
+      if (!this.backfill || !(isSingleMode(this.$props) || isCombobox(this.$props))) {
+        return
+      }
+
+      const key = getValuePropValue(item)
+      const label = this.getLabelFromOption(item)
+      const backfillValue = {
+        key,
+        label,
+        backfill: true,
+      }
+
+      if (isCombobox(this.$props)) {
+        this.setInputValue(key, false)
+      }
+
+      this.setState({
+        sValue: [backfillValue],
+      })
+    },
+
+    _filterOption (input, child, defaultFilter = defaultFilterFn) {
+      const { sValue } = this
+      const lastValue = sValue[sValue.length - 1]
+      if (!input || (lastValue && lastValue.backfill)) {
+        return true
+      }
+      let filterFn = this.filterOption
+      if (hasProp(this, 'filterOption')) {
+        if (this.filterOption === true) {
+          filterFn = defaultFilter
+        }
+      } else {
+        filterFn = defaultFilter
+      }
+
+      if (!filterFn) {
+        return true
+      } else if (typeof filterFn === 'function') {
+        return filterFn.call(this, input, child)
+      } else if (getValue(child, 'disabled')) {
+        return false
+      }
+      return true
+    },
+
+    timeoutFocus () {
+      if (this.focusTimer) {
+        this.clearFocusTime()
+      }
+      this.focusTimer = setTimeout(() => {
+        this.__emit('focus')
+      }, 10)
+    },
+
+    clearFocusTime () {
+      if (this.focusTimer) {
+        clearTimeout(this.focusTimer)
+        this.focusTimer = null
+      }
+    },
+
+    clearBlurTime () {
+      if (this.blurTimer) {
+        clearTimeout(this.blurTimer)
+        this.blurTimer = null
+      }
+    },
+
+    clearAdjustTimer () {
+      if (this.skipAdjustOpenTimer) {
+        clearTimeout(this.skipAdjustOpenTimer)
+        this.skipAdjustOpenTimer = null
+      }
+    },
+
+    updateFocusClassName () {
+      const { $refs: { rootRef }, prefixCls } = this
+      // avoid setState and its side effect
+      if (this._focused) {
+        classes(rootRef).add(`${prefixCls}-focused`)
+      } else {
+        classes(rootRef).remove(`${prefixCls}-focused`)
+      }
+    },
+
+    maybeFocus (open, needFocus) {
+      if (needFocus || open) {
+        const input = this.getInputDOMNode()
+        const { activeElement } = document
+        if (input && (open || isMultipleOrTagsOrCombobox(this.props))) {
+          if (activeElement !== input) {
+            input.focus()
+            this._focused = true
+          }
+        } else {
+          if (activeElement !== this.$refs.selectionRef) {
+            this.$refs.selectionRef.focus()
+            this._focused = true
+          }
+        }
+      }
+    },
+
+    addLabelToValue (value_) {
+      let value = value_
+      if (this.labelInValue) {
+        value.forEach(v => {
+          v.label = v.label || this.getLabelFromProps(v.key)
+        })
+      } else {
+        value = value.map(v => {
+          return {
+            key: v,
+            label: this.getLabelFromProps(v),
+          }
+        })
+      }
+      return value
+    },
+
+    addTitleToValue ($slots, values) {
+      let nextValues = values
+      const keys = values.map(v => v.key)
+      $slots.default.forEach(child => {
+        if (!child) {
+          return
+        }
+        if (getSlotOptions(child).isSelectOptGroup) {
+          nextValues = this.addTitleToValue(child.$slots, nextValues)
+        } else {
+          const value = getValuePropValue(child)
+          const valueIndex = keys.indexOf(value)
+          if (valueIndex > -1) {
+            nextValues[valueIndex].title = getValue(child, 'title')
+          }
+        }
+      })
+      return nextValues
+    },
+
+    removeSelected (selectedKey) {
+      const props = this.$props
+      if (props.disabled || this.isChildDisabled(selectedKey)) {
+        return
+      }
+      let label
+      const value = this.sValue.filter(singleValue => {
+        if (singleValue.key === selectedKey) {
+          label = singleValue.label
+        }
+        return singleValue.key !== selectedKey
+      })
+      const canMultiple = isMultipleOrTags(props)
+
+      if (canMultiple) {
+        let event = selectedKey
+        if (props.labelInValue) {
+          event = {
+            key: selectedKey,
+            label,
+          }
+        }
+        this.__emit('deselect', event)
+      }
+      this.fireChange(value)
+    },
+
+    openIfHasChildren () {
+      const { $props, $slots } = this
+      if (($slots.default && $slots.default.length) || isSingleMode($props)) {
+        this.setOpenState(true)
+      }
+    },
+
+    fireChange (value) {
+      if (hasProp(this, 'value')) {
+        this.setState({
+          sValue: value,
+        })
+      }
+      this.__emit('change', this.getVLForOnChange(value))
+    },
+
+    isChildDisabled (key) {
+      return this.$slots.default.some(child => {
+        const childValue = getValuePropValue(child)
+        return childValue === key && getValue(child, 'title')
+      })
+    },
+
+    tokenize (string) {
+      const { multiple, tokenSeparators, $slots } = this
+      let nextValue = this.sValue
+      splitBySeparators(string, tokenSeparators).forEach(label => {
+        const selectedValue = { key: label, label }
+        if (findIndexInValueByLabel(nextValue, label) === -1) {
+          if (multiple) {
+            const value = this.getValueByLabel($slots.default, label)
+            if (value) {
+              selectedValue.key = value
+              nextValue = nextValue.concat(selectedValue)
+            }
+          } else {
+            nextValue = nextValue.concat(selectedValue)
+          }
+        }
+      })
+      return nextValue
+    },
+
+    adjustOpenState () {
+      if (this.skipAdjustOpen) {
+        return
+      }
+      const { $props, showSearch } = this
+      let sOpen = this.sOpen
+      let options = []
+      // If hidden menu due to no options, then it should be calculated again
+      if (sOpen || this.hiddenForNoOptions) {
+        options = this.renderFilterOptions()
+      }
+      this._options = options
+
+      if (isMultipleOrTagsOrCombobox($props) || !showSearch) {
+        if (sOpen && !options.length) {
+          sOpen = false
+          this.hiddenForNoOptions = true
+        }
+        // Keep menu open if there are options and hidden for no options before
+        if (this.hiddenForNoOptions && options.length) {
+          sOpen = true
+          this.hiddenForNoOptions = false
+        }
+      }
+      this.sOpen = sOpen
+    },
+
+    renderFilterOptions () {
+      const { inputValue } = this
+      const { $slots, tags, filterOption, notFoundContent } = this
+      const menuItems = []
+      const childrenKeys = []
+      let options = this.renderFilterOptionsFromChildren(
+        $slots.default,
+        childrenKeys,
+        menuItems,
+      )
+      if (tags) {
+      // tags value must be string
+        let value = this.sValue || []
+        value = value.filter(singleValue => {
+          return (
+            childrenKeys.indexOf(singleValue.key) === -1 &&
+          (!inputValue ||
+            String(singleValue.key).indexOf(String(inputValue)) > -1)
+          )
+        })
+        value.forEach(singleValue => {
+          const key = singleValue.key
+          const menuItem = (
+            <MenuItem
+              style={UNSELECTABLE_STYLE}
+              attribute={UNSELECTABLE_ATTRIBUTE}
+              value={key}
+              key={key}
+            >
+              {key}
+            </MenuItem>
+          )
+          options.push(menuItem)
+          menuItems.push(menuItem)
+        })
+        if (inputValue) {
+          const notFindInputItem = menuItems.every(option => {
+          // this.filterOption return true has two meaning,
+          // 1, some one exists after filtering
+          // 2, filterOption is set to false
+          // condition 2 does not mean the option has same value with inputValue
+            const filterFn = () => getValuePropValue(option) === inputValue
+            if (filterOption !== false) {
+              return !this._filterOption(
+                inputValue,
+                option,
+                filterFn
+              )
+            }
+            return !filterFn()
+          })
+          if (notFindInputItem) {
+            options.unshift(
+              <MenuItem
+                style={UNSELECTABLE_STYLE}
+                attribute={UNSELECTABLE_ATTRIBUTE}
+                value={inputValue}
+                key={inputValue}
+              >
+                {inputValue}
+              </MenuItem>
+            )
+          }
+        }
+      }
+
+      if (!options.length && notFoundContent) {
+        options = [
+          <MenuItem
+            style={UNSELECTABLE_STYLE}
+            attribute={UNSELECTABLE_ATTRIBUTE}
+            disabled
+            value='NOT_FOUND'
+            key='NOT_FOUND'
+          >
+            {notFoundContent}
+          </MenuItem>,
+        ]
+      }
+      return options
+    },
+
+    renderFilterOptionsFromChildren (children, childrenKeys, menuItems) {
+      const sel = []
+      const props = this.$props
+      const { inputValue } = this
+      const tags = props.tags
+      children.forEach(child => {
+        if (!child) {
+          return
+        }
+        if (getSlotOptions(child).isSelectOptGroup) {
+          const innerItems = this.renderFilterOptionsFromChildren(
+            child.componentOptions.children,
+            childrenKeys,
+            menuItems,
+          )
+          if (innerItems.length) {
+            let label = getValue(child, 'label')
+            let key = child.key
+            if (!key && typeof label === 'string') {
+              key = label
+            } else if (!label && key) {
+              label = key
+            }
+            sel.push(
+              <MenuItemGroup key={key} title={label}>
+                {innerItems}
+              </MenuItemGroup>
+            )
+          }
+          return
+        }
+
+        warning(
+          getSlotOptions(child).isSelectOptGroup,
+          'the children of `Select` should be `Select.Option` or `Select.OptGroup`, ' +
+          `instead of \`${getSlotOptions(child).isSelectOptGroup ||
+            getSlotOptions(child)}\`.`
+        )
+
+        const childValue = getValuePropValue(child)
+
+        validateOptionValue(childValue, this.$props)
+
+        if (this._filterOption(inputValue, child)) {
+          const menuItem = (
+            <MenuItem
+              style={UNSELECTABLE_STYLE}
+              attribute={UNSELECTABLE_ATTRIBUTE}
+              value={childValue}
+              key={childValue}
+              {...getPropsData(child)}
+            />
+          )
+          sel.push(menuItem)
+          menuItems.push(menuItem)
+        }
+        if (tags && !getValue(child, 'disabled')) {
+          childrenKeys.push(childValue)
+        }
+      })
+
+      return sel
+    },
+
+    renderTopControlNode () {
+      const { sValue, sOpen, inputValue, $props: props } = this
+      const {
+        choiceTransitionName,
+        prefixCls,
+        maxTagTextLength,
+        maxTagCount,
+        maxTagPlaceholder,
+        showSearch,
+      } = props
+      const className = `${prefixCls}-selection__rendered`
+      // search input is inside topControlNode in single, multiple & combobox. 2016/04/13
+      let innerNode = null
+      if (isSingleMode(props)) {
+        let selectedValue = null
+        if (sValue.length) {
+          let showSelectedValue = false
+          let opacity = 1
+          if (!showSearch) {
+            showSelectedValue = true
+          } else {
+            if (sOpen) {
+              showSelectedValue = !inputValue
+              if (showSelectedValue) {
+                opacity = 0.4
+              }
+            } else {
+              showSelectedValue = true
+            }
+          }
+          const singleValue = sValue[0]
+          selectedValue = (
+            <div
+              key='value'
+              class={`${prefixCls}-selection-selected-value`}
+              title={singleValue.title || singleValue.label}
+              style={{
+                display: showSelectedValue ? 'block' : 'none',
+                opacity,
+              }}
+            >
+              {sValue[0].label}
+            </div>
+          )
+        }
+        if (!showSearch) {
+          innerNode = [selectedValue]
+        } else {
+          innerNode = [
+            selectedValue,
+            <div
+              class={`${prefixCls}-search ${prefixCls}-search--inline`}
+              key='input'
+              style={{
+                display: sOpen ? 'block' : 'none',
+              }}
+            >
+              {this._getInputElement()}
+            </div>,
+          ]
+        }
+      } else {
+        let selectedValueNodes = []
+        let limitedCountValue = sValue
+        let maxTagPlaceholderEl
+        if (maxTagCount !== undefined && sValue.length > maxTagCount) {
+          limitedCountValue = limitedCountValue.slice(0, maxTagCount)
+          const omittedValues = this.getVLForOnChange(sValue.slice(maxTagCount, sValue.length))
+          let content = `+ ${sValue.length - maxTagCount} ...`
+          if (maxTagPlaceholder) {
+            content = typeof maxTagPlaceholder === 'function'
+              ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder
+          }
+          maxTagPlaceholderEl = (<li
+            style={UNSELECTABLE_STYLE}
+            {...UNSELECTABLE_ATTRIBUTE}
+            onMouseDown={preventDefaultEvent}
+            class={`${prefixCls}-selection__choice ${prefixCls}-selection__choice__disabled`}
+            key={'maxTagPlaceholder'}
+            title={content}
+          >
+            <div class={`${prefixCls}-selection__choice__content`}>{content}</div>
+          </li>)
+        }
+        if (isMultipleOrTags(props)) {
+          selectedValueNodes = limitedCountValue.map(singleValue => {
+            let content = singleValue.label
+            const title = singleValue.title || content
+            if (
+              maxTagTextLength &&
+            typeof content === 'string' &&
+            content.length > maxTagTextLength
+            ) {
+              content = `${content.slice(0, maxTagTextLength)}...`
+            }
+            const disabled = this.isChildDisabled(singleValue.key)
+            const choiceClassName = disabled
+              ? `${prefixCls}-selection__choice ${prefixCls}-selection__choice__disabled`
+              : `${prefixCls}-selection__choice`
+            return (
+              <li
+                style={UNSELECTABLE_STYLE}
+                {...UNSELECTABLE_ATTRIBUTE}
+                onMousedown={preventDefaultEvent}
+                class={choiceClassName}
+                key={singleValue.key}
+                title={title}
+              >
+                <div class={`${prefixCls}-selection__choice__content`}>
+                  {content}
+                </div>
+                {disabled ? null : (
+                  <span
+                    class={`${prefixCls}-selection__choice__remove`}
+                    onClick={this.removeSelected.bind(this, singleValue.key)}
+                  />)}
+              </li>
+            )
+          })
+        }
+        if (maxTagPlaceholderEl) {
+          selectedValueNodes.push(maxTagPlaceholderEl)
+        }
+        selectedValueNodes.push(
+          <li
+            class={`${prefixCls}-search ${prefixCls}-search--inline`}
+            key='__input'
+          >
+            {this._getInputElement()}
+          </li>
+        )
+
+        if (isMultipleOrTags(props) && choiceTransitionName) {
+          const transitionProps = getTransitionProps(choiceTransitionName, {
+            tag: 'ul',
+          })
+          innerNode = (
+            <transition-group
+              // onLeave={this.onChoiceAnimationLeave}
+              // component='ul'
+              // transitionName={choiceTransitionName}
+              {...transitionProps}
+            >
+              {selectedValueNodes}
+            </transition-group>
+          )
+        } else {
+          innerNode = (
+            <ul>
+              {selectedValueNodes}
+            </ul>
+          )
+        }
+      }
+      return (
+        <div class={className} ref='topCtrlRef'>
+          {this.getPlaceholderElement()}
+          {innerNode}
+        </div>
+      )
+    },
+
+    renderClear () {
+      const { prefixCls, allowClear, sValue, inputValue } = this
+      const clear = (
+        <span
+          key='clear'
+          onMousedown={preventDefaultEvent}
+          style={UNSELECTABLE_STYLE}
+          {...UNSELECTABLE_ATTRIBUTE}
+          class={`${prefixCls}-selection__clear`}
+          onClick={this.onClearSelection}
+        />
+      )
+      if (!allowClear) {
+        return null
+      }
+      if (isCombobox(this.$props)) {
+        if (inputValue) {
+          return clear
+        }
+        return null
+      }
+      if (inputValue || sValue.length) {
+        return clear
+      }
+      return null
+    },
+  },
+
+  render () {
+    const props = this.$props
+    const multiple = isMultipleOrTags(props)
+    const { disabled, prefixCls, sOpen, inputValue, sValue, $listeners } = this
+    const { mouseenter = noop, mouseleave = noop, popupScroll = noop } = $listeners
+    const ctrlNode = this.renderTopControlNode()
+    let extraSelectionProps = {}
+    const options = this._options
+    if (!isMultipleOrTagsOrCombobox(props)) {
+      extraSelectionProps = {
+        onKeyDown: this.onKeyDown,
+        tabIndex: props.disabled ? -1 : 0,
+      }
+    }
+    const rootCls = {
+      [prefixCls]: 1,
+      [`${prefixCls}-open`]: sOpen,
+      [`${prefixCls}-focused`]: sOpen || !!this._focused,
+      [`${prefixCls}-combobox`]: isCombobox(props),
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-enabled`]: !disabled,
+      [`${prefixCls}-allow-clear`]: !!props.allowClear,
+    }
+    return (
+      <SelectTrigger
+        dropdownAlign={props.dropdownAlign}
+        dropdownClass={props.dropdownClassName}
+        dropdownMatchSelectWidth={props.dropdownMatchSelectWidth}
+        defaultActiveFirstOption={props.defaultActiveFirstOption}
+        dropdownMenuStyle={props.dropdownMenuStyle}
+        transitionName={props.transitionName}
+        animation={props.animation}
+        prefixCls={props.prefixCls}
+        dropdownStyle={props.dropdownStyle}
+        combobox={props.combobox}
+        showSearch={props.showSearch}
+        options={options}
+        multiple={multiple}
+        disabled={disabled}
+        visible={sOpen}
+        inputValue={inputValue}
+        value={sValue}
+        firstActiveValue={props.firstActiveValue}
+        onDropdownVisibleChange={this.onDropdownVisibleChange}
+        getPopupContainer={props.getPopupContainer}
+        onMenuSelect={this.onMenuSelect}
+        onMenuDeselect={this.onMenuDeselect}
+        onPopupScroll={popupScroll}
+        onPopupFocus={this.onPopupFocus}
+        onMouseenter={mouseenter}
+        onMouseleave={mouseleave}
+        showAction={props.showAction}
+        ref='selectTriggerRef'
+      >
+        <div
+          ref='rootRef'
+          onBlur={this.onOuterBlur}
+          onFocus={this.onOuterFocus}
+          class={classnames(rootCls)}
+        >
+          <div
+            ref='selectionRef'
+            key='selection'
+            class={`${prefixCls}-selection
+            ${prefixCls}-selection--${multiple ? 'multiple' : 'single'}`}
+            role='combobox'
+            aria-autocomplete='list'
+            aria-haspopup='true'
+            aria-expanded={sOpen}
+            {...extraSelectionProps}
+          >
+            {ctrlNode}
+            {this.renderClear()}
+            {multiple || !props.showArrow ? null : (
+              <span
+                key='arrow'
+                class={`${prefixCls}-arrow`}
+                style={UNSELECTABLE_STYLE}
+                {...UNSELECTABLE_ATTRIBUTE}
+                onClick={this.onArrowClick}
+              >
+                <b />
+              </span>)}
+          </div>
+        </div>
+      </SelectTrigger>
+    )
+  },
+}
+
+</script>
diff --git a/components/vc-select/SelectTrigger.vue b/components/vc-select/SelectTrigger.vue
index e69de29bb..843eadb39 100644
--- a/components/vc-select/SelectTrigger.vue
+++ b/components/vc-select/SelectTrigger.vue
@@ -0,0 +1,195 @@
+<script>
+import classnames from 'classnames'
+import Trigger from '../trigger'
+import PropTypes from '../_util/vue-types'
+import DropdownMenu from './DropdownMenu'
+import { isSingleMode } from './util'
+import BaseMixin from '../_util/BaseMixin'
+
+const BUILT_IN_PLACEMENTS = {
+  bottomLeft: {
+    points: ['tl', 'bl'],
+    offset: [0, 4],
+    overflow: {
+      adjustX: 0,
+      adjustY: 1,
+    },
+  },
+  topLeft: {
+    points: ['bl', 'tl'],
+    offset: [0, -4],
+    overflow: {
+      adjustX: 0,
+      adjustY: 1,
+    },
+  },
+}
+
+export default {
+  name: 'SelectTrigger',
+  mixins: [BaseMixin],
+  props: {
+    // onPopupFocus: PropTypes.func,
+    // onPopupScroll: PropTypes.func,
+    dropdownMatchSelectWidth: PropTypes.bool,
+    dropdownAlign: PropTypes.object,
+    visible: PropTypes.bool,
+    disabled: PropTypes.bool,
+    showSearch: PropTypes.bool,
+    dropdownClassName: PropTypes.string,
+    multiple: PropTypes.bool,
+    inputValue: PropTypes.string,
+    filterOption: PropTypes.any,
+    options: PropTypes.any,
+    prefixCls: PropTypes.string,
+    popupClassName: PropTypes.string,
+    // children: PropTypes.any,
+    showAction: PropTypes.arrayOf(PropTypes.string),
+  },
+  data () {
+    return {
+      dropdownWidth: null,
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      this.setDropdownWidth()
+    })
+  },
+
+  updated () {
+    this.$nextTick(() => {
+      this.setDropdownWidth()
+    })
+  },
+  methods: {
+    setDropdownWidth () {
+      const width = this.$el.offsetWidth
+      if (width !== this.dropdownWidth) {
+        this.setState({ dropdownWidth: width })
+      }
+    },
+
+    getInnerMenu () {
+      return this.$refs.dropdownMenuRef && this.$refs.dropdownMenuRef.$refs.menuRef
+    },
+
+    getPopupDOMNode () {
+      return this.$refs.triggerRef.getPopupDomNode()
+    },
+
+    getDropdownElement (newProps) {
+      const {
+        value, firstActiveValue, defaultActiveFirstOption,
+        dropdownMenuStyle, getDropdownPrefixCls,
+      } = this
+      const { menuSelect, menuDeselect, popupScroll } = this.$listeners
+      const dropdownMenuProps = {
+        props: {
+          ...newProps.props,
+          prefixCls: getDropdownPrefixCls(),
+          value, firstActiveValue, defaultActiveFirstOption, dropdownMenuStyle,
+        },
+        on: {
+          ...newProps.on,
+          menuSelect,
+          menuDeselect,
+          popupScroll,
+        },
+        ref: 'dropdownMenuRef',
+      }
+      return (
+        <DropdownMenu {...dropdownMenuProps} />
+      )
+    },
+
+    getDropdownTransitionName () {
+      const props = this.$props
+      let transitionName = props.transitionName
+      if (!transitionName && props.animation) {
+        transitionName = `${this.getDropdownPrefixCls()}-${props.animation}`
+      }
+      return transitionName
+    },
+
+    getDropdownPrefixCls () {
+      return `${this.prefixCls}-dropdown`
+    },
+  },
+
+  render () {
+    const { $props, $slots, $listeners } = this
+    const {
+      multiple,
+      visible,
+      inputValue,
+      dropdownAlign,
+      disabled,
+      showSearch,
+      dropdownClassName,
+      dropdownStyle,
+      dropdownMatchSelectWidth,
+      options,
+      getPopupContainer,
+      showAction,
+    } = $props
+    const dropdownPrefixCls = this.getDropdownPrefixCls()
+    const popupClassName = {
+      [dropdownClassName]: !!dropdownClassName,
+      [`${dropdownPrefixCls}--${multiple ? 'multiple' : 'single'}`]: 1,
+    }
+    const popupElement = this.getDropdownElement({
+      props: {
+        menuItems: options,
+        multiple,
+        inputValue,
+        visible,
+      }, on: {
+        popupFocus: $listeners.popupFocus,
+      },
+    })
+    let hideAction
+    if (disabled) {
+      hideAction = []
+    } else if (isSingleMode($props) && !showSearch) {
+      hideAction = ['click']
+    } else {
+      hideAction = ['blur']
+    }
+    const popupStyle = { ...dropdownStyle }
+    const widthProp = dropdownMatchSelectWidth ? 'width' : 'minWidth'
+    if (this.dropdownWidth) {
+      popupStyle[widthProp] = `${this.dropdownWidth}px`
+    }
+    const triggerProps = {
+      props: {
+        ...$props,
+        showAction: disabled ? [] : showAction,
+        hideAction,
+        ref: 'triggerRef',
+        popupPlacement: 'bottomLeft',
+        builtinPlacements: BUILT_IN_PLACEMENTS,
+        prefixCls: dropdownPrefixCls,
+        popupTransitionName: this.getDropdownTransitionName(),
+        popup: popupElement,
+        popupAlign: dropdownAlign,
+        popupVisible: visible,
+        getPopupContainer,
+        popupClassName: classnames(popupClassName),
+        popupStyle,
+      },
+      on: {
+        popupVisibleChange: $listeners.dropdownVisibleChange,
+      },
+      ref: 'triggerRef',
+    }
+    return (
+      <Trigger {...triggerProps}>
+        {$slots.default}
+      </Trigger>
+    )
+  },
+}
+
+</script>
diff --git a/components/vc-select/assets/index.less b/components/vc-select/assets/index.less
new file mode 100644
index 000000000..3fdf5bd09
--- /dev/null
+++ b/components/vc-select/assets/index.less
@@ -0,0 +1,502 @@
+@selectPrefixCls: rc-select;
+
+.effect() {
+  animation-duration: .3s;
+  animation-fill-mode: both;
+  transform-origin: 0 0;
+}
+
+.@{selectPrefixCls} {
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  color: #666;
+  line-height: 28px;
+
+  &-allow-clear {
+    .@{selectPrefixCls}-selection--single .@{selectPrefixCls}-selection__rendered {
+      padding-right: 40px;
+    }
+  }
+
+  ul, li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  > ul > li > a {
+    padding: 0;
+    background-color: #fff;
+  }
+
+  // arrow
+  &-arrow {
+    height: 26px;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 20px;
+    outline: none;
+    b {
+      border-color: #999999 transparent transparent transparent;
+      border-style: solid;
+      border-width: 5px 4px 0 4px;
+      height: 0;
+      width: 0;
+      margin-left: -4px;
+      margin-top: -2px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+    }
+  }
+
+  &-selection {
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+
+    box-sizing: border-box;
+    display: block;
+
+    background-color: #fff;
+    border-radius: 6px;
+    border: 1px solid #d9d9d9;
+
+    &__placeholder {
+      position: absolute;
+      top: 0;
+      color: #aaa;
+    }
+
+    &__clear {
+      font-weight: bold;
+      position: absolute;
+      line-height: 28px;
+
+      &:after {
+        content: '×'
+      }
+    }
+  }
+
+  &-focused &-selection {
+    border-color: #23c0fa;
+    box-shadow: 0 0 2px fadeout(#2db7f5, 20%);
+  }
+
+  &-enabled &-selection {
+    &:hover {
+      border-color: #23c0fa;
+      box-shadow: 0 0 2px fadeout(#2db7f5, 20%);
+    }
+    &:active {
+      border-color: #2db7f5;
+    }
+  }
+
+  &-selection--single {
+    height: 28px;
+    line-height: 28px;
+    cursor: pointer;
+    position: relative;
+
+    .@{selectPrefixCls}-selection-selected-value {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+
+    .@{selectPrefixCls}-selection__rendered {
+      height: 28px;
+      position: relative;
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-left: 10px;
+      padding-right: 20px;
+      line-height: 28px;
+    }
+
+    .@{selectPrefixCls}-selection__clear {
+      top: 0;
+      right: 20px;
+    }
+  }
+
+  &-disabled {
+    color: #ccc;
+    cursor: not-allowed;
+
+    .@{selectPrefixCls}-selection--single,
+    .@{selectPrefixCls}-selection__choice__remove {
+      cursor: not-allowed;
+      color: #ccc;
+
+      &:hover {
+        cursor: not-allowed;
+        color: #ccc;
+      }
+    }
+  }
+
+  &-search__field__wrap {
+    display: inline-block;
+  }
+
+  &-search__field__placeholder {
+    position: absolute;
+    top: 0;
+    left: 3px;
+    color: #aaa;
+  }
+
+  &-search--inline {
+    width: 100%;
+    .@{selectPrefixCls}-search__field__wrap {
+      width: 100%;
+    }
+    .@{selectPrefixCls}-search__field {
+      border: none;
+      font-size: 100%;
+      //margin-top: 5px;
+      background: transparent;
+      outline: 0;
+      width: 100%;
+      &::-ms-clear {
+        display: none;
+      }
+    }
+    .@{selectPrefixCls}-search__field__mirror {
+      position: absolute;
+      top: -999px;
+      left: 0;
+      white-space: pre;
+    }
+    > i {
+      float: right;
+    }
+  }
+
+  &-enabled&-selection--multiple {
+    cursor: text;
+  }
+
+  &-selection--multiple {
+    min-height: 28px;
+
+    .@{selectPrefixCls}-search--inline {
+      float: left;
+      width: auto;
+      .@{selectPrefixCls}-search__field {
+        &__wrap {
+          width: auto;
+        }
+        width: 0.75em;
+      }
+    }
+
+    .@{selectPrefixCls}-search__field__placeholder {
+      top: 5px;
+      left: 8px;
+    }
+
+    .@{selectPrefixCls}-selection__rendered {
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-left: 8px;
+      padding-bottom: 2px;
+
+      .@{selectPrefixCls}-selection__choice {
+        margin-top: 4px;
+        line-height: 20px;
+      }
+    }
+
+    .@{selectPrefixCls}-selection__clear {
+      top: 1px;
+      right: 8px;
+    }
+  }
+
+  &-enabled {
+    .@{selectPrefixCls}-selection__choice {
+      cursor: default;
+      &:hover {
+        .@{selectPrefixCls}-selection__choice__remove {
+          opacity: 1;
+          transform: scale(1);
+        }
+        .@{selectPrefixCls}-selection__choice__content {
+          margin-left: -8px;
+          margin-right: 8px;
+        }
+      }
+    }
+
+    .@{selectPrefixCls}-selection__choice__disabled {
+      cursor: not-allowed;
+      &:hover {
+        .@{selectPrefixCls}-selection__choice__content {
+          margin-left: 0;
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  & &-selection__choice {
+    background-color: #f3f3f3;
+    border-radius: 4px;
+    float: left;
+    padding: 0 15px;
+    margin-right: 4px;
+    position: relative;
+    overflow: hidden;
+    transition: padding .3s cubic-bezier(0.6, -0.28, 0.735, 0.045), width .3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+
+    &__content {
+      margin-left: 0;
+      margin-right: 0;
+      transition: margin .3s cubic-bezier(0.165, 0.84, 0.44, 1);
+    }
+
+    &-zoom-enter, &-zoom-appear, &-zoom-leave {
+      .effect();
+      opacity: 0;
+      animation-play-state: paused;
+      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+
+    &-zoom-leave {
+      opacity: 1;
+      animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+    }
+
+    &-zoom-enter.@{selectPrefixCls}-selection__choice-zoom-enter-active,
+    &-zoom-appear.@{selectPrefixCls}-selection__choice-zoom-appear-active {
+      animation-play-state: running;
+      animation-name: rcSelectChoiceZoomIn;
+    }
+
+    &-zoom-leave.@{selectPrefixCls}-selection__choice-zoom-leave-active {
+      animation-play-state: running;
+      animation-name: rcSelectChoiceZoomOut;
+    }
+
+    @keyframes rcSelectChoiceZoomIn {
+      0% {
+        transform: scale(0.6);
+        opacity: 0;
+      }
+      100% {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+
+    @keyframes rcSelectChoiceZoomOut {
+      to {
+        transform: scale(0);
+        opacity: 0;
+      }
+    }
+
+    &__remove {
+      color: #919191;
+      cursor: pointer;
+      font-weight: bold;
+      padding: 0 0 0 8px;
+      position: absolute;
+      opacity: 0;
+      transform: scale(0);
+      top: 0;
+      right: 2px;
+      transition: opacity .3s, transform .3s;
+      &:before {
+        content: '×'
+      }
+
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+
+  &-dropdown {
+    background-color: white;
+    border: 1px solid #d9d9d9;
+    box-shadow: 0 0px 4px #d9d9d9;
+    border-radius: 4px;
+    box-sizing: border-box;
+    z-index: 100;
+    left: -9999px;
+    top: -9999px;
+    position: absolute;
+    outline: none;
+
+    &:empty,
+    &-hidden {
+      display: none;
+    }
+
+    &-menu {
+      outline: none;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      z-index: 9999;
+
+      > li {
+        margin: 0;
+        padding: 0;
+      }
+
+      &-item-group-list {
+        margin: 0;
+        padding: 0;
+
+        > li.@{selectPrefixCls}-menu-item {
+          padding-left: 20px;
+        }
+      }
+
+      &-item-group-title {
+        color: #999;
+        line-height: 1.5;
+        padding: 8px 10px;
+        border-bottom: 1px solid #dedede;
+      }
+
+      li&-item {
+        margin: 0;
+        position: relative;
+        display: block;
+        padding: 7px 10px;
+        font-weight: normal;
+        color: #666;
+        white-space: nowrap;
+
+        &-disabled {
+          color: #ccc;
+          cursor: not-allowed;
+        }
+
+        &-selected {
+          color: #666;
+          background-color: #ddd;
+        }
+
+        &-active {
+          background-color: #5897fb;
+          color: white;
+          cursor: pointer;
+        }
+
+        &-divider {
+          height: 1px;
+          margin: 1px 0;
+          overflow: hidden;
+          background-color: #e5e5e5;
+          line-height: 0;
+        }
+      }
+    }
+
+    &-slide-up-enter, &-slide-up-appear {
+      .effect();
+      opacity: 0;
+      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+      animation-play-state: paused;
+    }
+
+    &-slide-up-leave {
+      .effect();
+      opacity: 1;
+      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+      animation-play-state: paused;
+    }
+
+    &-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft, &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft {
+      animation-name: rcSelectDropdownSlideUpIn;
+      animation-play-state: running;
+    }
+
+    &-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft {
+      animation-name: rcSelectDropdownSlideUpOut;
+      animation-play-state: running;
+    }
+
+    &-slide-up-enter&-slide-up-enter-active&-placement-topLeft, &-slide-up-appear&-slide-up-appear-active&-placement-topLeft {
+      animation-name: rcSelectDropdownSlideDownIn;
+      animation-play-state: running;
+    }
+
+    &-slide-up-leave&-slide-up-leave-active&-placement-topLeft {
+      animation-name: rcSelectDropdownSlideDownOut;
+      animation-play-state: running;
+    }
+
+    @keyframes rcSelectDropdownSlideUpIn {
+      0% {
+        opacity: 0;
+        transform-origin: 0% 0%;
+        transform: scaleY(0);
+      }
+      100% {
+        opacity: 1;
+        transform-origin: 0% 0%;
+        transform: scaleY(1);
+      }
+    }
+    @keyframes rcSelectDropdownSlideUpOut {
+      0% {
+        opacity: 1;
+        transform-origin: 0% 0%;
+        transform: scaleY(1);
+      }
+      100% {
+        opacity: 0;
+        transform-origin: 0% 0%;
+        transform: scaleY(0);
+      }
+    }
+
+    @keyframes rcSelectDropdownSlideDownIn {
+      0% {
+        opacity: 0;
+        transform-origin: 0% 100%;
+        transform: scaleY(0);
+      }
+      100% {
+        opacity: 1;
+        transform-origin: 0% 100%;
+        transform: scaleY(1);
+      }
+    }
+    @keyframes rcSelectDropdownSlideDownOut {
+      0% {
+        opacity: 1;
+        transform-origin: 0% 100%;
+        transform: scaleY(1);
+      }
+      100% {
+        opacity: 0;
+        transform-origin: 0% 100%;
+        transform: scaleY(0);
+      }
+    }
+  }
+
+  &-open {
+    .@{selectPrefixCls}-arrow b {
+      border-color: transparent transparent #888 transparent;
+      border-width: 0 4px 5px 4px;
+    }
+  }
+
+}
diff --git a/components/vc-select/demo/combobox.vue b/components/vc-select/demo/combobox.vue
new file mode 100644
index 000000000..0700da7ad
--- /dev/null
+++ b/components/vc-select/demo/combobox.vue
@@ -0,0 +1,63 @@
+<script>
+import Select, { Option } from '../index'
+import '../assets/index.less'
+
+export default {
+  data () {
+    return {
+      disabled: false,
+      value: '',
+    }
+  },
+  methods: {
+    onChange (value) {
+      this.value = value
+    },
+
+    onKeyDown (e) {
+      if (e.keyCode === 13) {
+        console.log('onEnter', this.value)
+      }
+    },
+
+    onSelect (v) {
+      console.log('onSelect', v)
+    },
+
+    toggleDisabled () {
+      this.disabled = !this.disabled
+    },
+  },
+
+  render () {
+    return (<div>
+      <h2>combobox</h2>
+      <p>
+        <button onClick={this.toggleDisabled}>toggle disabled</button>
+      </p>
+      <div style={{ width: 300 }}>
+        <Select
+          disabled={this.disabled}
+          style={{ width: 500 }}
+          onChange={this.onChange}
+          onSelect={this.onSelect}
+          onInputKeydown={this.onKeyDown}
+          notFoundContent=''
+          allowClear
+          placeholder='please select'
+          value={this.value}
+          combobox
+          backfill
+        >
+          <Option value='jack'>
+            <b style={{ color: 'red' }}>jack</b>
+          </Option>
+          <Option value='lucy'>lucy</Option>
+          <Option value='disabled' disabled>disabled</Option>
+          <Option value='yiminghe'>yiminghe</Option>
+        </Select>
+      </div>
+    </div>)
+  },
+}
+</script>
diff --git a/components/vc-select/util.js b/components/vc-select/util.js
index 40dcb3135..c18a9e68a 100644
--- a/components/vc-select/util.js
+++ b/components/vc-select/util.js
@@ -1,12 +1,13 @@
+import { getPropsData, getSlotOptions } from '../_util/props-util'
 export function getValuePropValue (child) {
-  const props = child.props
+  const props = getPropsData(child)
   if ('value' in props) {
     return props.value
   }
   if (child.key) {
     return child.key
   }
-  if (child.type && child.type.isSelectOptGroup && props.label) {
+  if (getSlotOptions(child).isSelectOptGroup && props.label) {
     return props.label
   }
   throw new Error(
diff --git a/examples/routes.js b/examples/routes.js
index 469049595..5e4a0d694 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/message/demo/${d}.md`),
+    component: import(`../components/vc-select/demo/${d}.vue`),
   }
 }
 export default [
diff --git a/package.json b/package.json
index abc9a7614..0cfcdd748 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
   },
   "dependencies": {
     "add-dom-event-listener": "^1.0.2",
+    "classnames": "^2.2.5",
     "component-classes": "^1.2.6",
     "css-animation": "^1.4.1",
     "dom-align": "^1.6.7",