feat: update vc-select

components/_util/props-util.js

@@ -52,9 +52,11 @@ const getSlots = (ele) => {
   const children = ele.children || componentOptions.children || []
   const slots = {}
   children.forEach(child => {
-    const name = (child.data && child.data.slot) || 'default'
+    if (!isEmptyElement(child)) {
-    slots[name] = slots[name] || []
+      const name = (child.data && child.data.slot) || 'default'
-    slots[name].push(child)
+      slots[name] = slots[name] || []
+      slots[name].push(child)
+    }
   })
   return slots
 }
@@ -213,12 +215,12 @@ export function getComponentName (opts) {
   return opts && (opts.Ctor.options.name || opts.tag)
 }
 
-export function isEmptyElement (ele) {
+export function isEmptyElement (c) {
-  return !(ele.tag || ele.text.trim() !== '')
+  return !(c.tag || (c.text && c.text.trim() !== ''))
 }
 
 export function filterEmpty (children = []) {
-  return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
+  return children.filter(c => !isEmptyElement(c))
 }
 const initDefaultProps = (propTypes, defaultProps) => {
   Object.keys(defaultProps).forEach(k => {

components/vc-select/DropdownMenu.jsx

@@ -11,6 +11,7 @@ export default {
   name: 'DropdownMenu',
   mixins: [BaseMixin],
   props: {
+    ariaId: PropTypes.string,
     defaultActiveFirstOption: PropTypes.bool,
     value: PropTypes.any,
     dropdownMenuStyle: PropTypes.object,
@@ -28,8 +29,10 @@ export default {
     menuItemSelectedIcon: PropTypes.any,
   },
 
-  beforeMount () {
+  created () {
+    this.rafInstance = { cancel: () => null }
     this.lastInputValue = this.$props.inputValue
+    this.lastVisible = false
   },
 
   mounted () {
@@ -101,6 +104,7 @@ export default {
         firstActiveValue,
         dropdownMenuStyle,
         backfillValue,
+        visible,
       } = props
       const menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon')
       const { menuDeselect, menuSelect, popupScroll } = this.$listeners
@@ -136,6 +140,8 @@ export default {
         if (selectedKeys.length || firstActiveValue) {
           if (props.visible && !this.lastVisible) {
             activeKeyProps.activeKey = selectedKeys[0] !== undefined ? selectedKeys[0] : firstActiveValue
+          } else if (!visible) {
+            activeKeyProps.activeKey = undefined
           }
           let foundFirst = false
           // set firstActiveItem via cloning menus
@@ -143,9 +149,7 @@ export default {
           const clone = item => {
             if (
               (!foundFirst && selectedKeys.indexOf(item.key) !== -1) ||
-            (!foundFirst &&
+              (!foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1)
-              !selectedKeys.length &&
-              firstActiveValue.indexOf(item.key) !== -1)
             ) {
               foundFirst = true
               return cloneElement(item, {
@@ -198,6 +202,8 @@ export default {
           overflow: 'auto',
           transform: 'translateZ(0)',
         }}
+        id={this.$props.ariaId}
+        tabIndex='-1'
         onFocus={popupFocus}
         onMousedown={preventDefaultEvent}
         onScroll={popupScroll}

components/vc-select/OptGroup.jsx

@@ -2,7 +2,14 @@
 import PropTypes from '../_util/vue-types'
 export default {
   props: {
-    label: PropTypes.any,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
   },
   isSelectOptGroup: true,
 }

components/vc-select/Option.jsx

@@ -7,8 +7,15 @@ export default {
       PropTypes.string,
       PropTypes.number,
     ]),
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
     disabled: PropTypes.bool,
-    title: PropTypes.string,
+    title: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
   },
   isSelectOption: true,
 }

components/vc-select/PropTypes.js

@@ -31,6 +31,7 @@ export const SelectPropTypes = {
   placeholder: PropTypes.any,
   // onDeselect: PropTypes.func,
   labelInValue: PropTypes.bool,
+  loading: PropTypes.bool,
   value: PropTypes.any,
   defaultValue: PropTypes.any,
   dropdownStyle: PropTypes.object,
@@ -47,4 +48,12 @@ export const SelectPropTypes = {
   inputIcon: PropTypes.any,
   removeIcon: PropTypes.any,
   menuItemSelectedIcon: PropTypes.any,
+  dropdownRender: PropTypes.func,
+  mode: PropTypes.oneOf(['multiple', 'tags']),
+  backfill: PropTypes.bool,
+  dropdownAlign: PropTypes.any,
+  dropdownMatchSelectWidth: PropTypes.bool,
+  dropdownMenuStyle: PropTypes.object,
+  notFoundContent: PropTypes.oneOfType([String, Number]),
+  tabIndex: PropTypes.oneOfType([String, Number]),
 }

components/vc-select/Select.jsx

@@ -7,56 +7,58 @@ import { Item as MenuItem, ItemGroup as MenuItemGroup } from '../vc-menu'
 import warning from 'warning'
 import Vue from 'vue'
 import Option from './Option'
-import { hasProp, getSlotOptions, getPropsData, getValueByProp as getValue, getComponentFromProp, getEvents, getClass, getStyle, getAttrs, getOptionProps } from '../_util/props-util'
+import OptGroup from './OptGroup'
+import { hasProp, getSlotOptions, getPropsData, getValueByProp as getValue, getComponentFromProp, getEvents, getClass, getStyle, getAttrs, getOptionProps, getSlots } from '../_util/props-util'
 import getTransitionProps from '../_util/getTransitionProps'
 import { cloneElement } from '../_util/vnode'
 import BaseMixin from '../_util/BaseMixin'
 import proxyComponent from '../_util/proxyComponent'
 import ref from 'vue-ref'
-
+import SelectTrigger from './SelectTrigger'
-Vue.use(ref, { name: 'ant-ref' })
-
 import {
+  defaultFilterFn,
+  findFirstMenuItem,
+  findIndexInValueBySingleValue,
+  generateUUID,
+  getLabelFromPropsValue,
+  getMapKey,
   getPropValue,
   getValuePropValue,
+  includesSeparators,
   isCombobox,
   isMultipleOrTags,
   isMultipleOrTagsOrCombobox,
   isSingleMode,
+  preventDefaultEvent,
+  saveRef,
+  splitBySeparators,
   toArray,
-  getMapKey,
+  toTitle,
-  findIndexInValueBySingleValue,
-  getLabelFromPropsValue,
   UNSELECTABLE_ATTRIBUTE,
   UNSELECTABLE_STYLE,
-  preventDefaultEvent,
-  findFirstMenuItem,
-  includesSeparators,
-  splitBySeparators,
-  defaultFilterFn,
   validateOptionValue,
-  saveRef,
-  toTitle,
 } from './util'
-import SelectTrigger from './SelectTrigger'
 import { SelectPropTypes } from './PropTypes'
 
+Vue.use(ref, { name: 'ant-ref' })
 const SELECT_EMPTY_VALUE_KEY = 'RC_SELECT_EMPTY_VALUE_KEY'
 
-function noop () {}
+const noop = () => null
 
 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)
+        fns[i].apply(chaining, args)
       }
     }
   }
 }
 const Select = {
   inheritAttrs: false,
+  Option,
+  OptGroup,
   name: 'Select',
   mixins: [BaseMixin],
   props: {
@@ -80,6 +82,8 @@ const Select = {
     combobox: PropTypes.bool.def(false),
     tokenSeparators: PropTypes.arrayOf(PropTypes.string).def([]),
     autoClearSearchValue: PropTypes.bool.def(true),
+    tabIndex: PropTypes.any.def(0),
+    dropdownRender: PropTypes.func.def(menu => menu),
     // onChange: noop,
     // onFocus: noop,
     // onBlur: noop,
@@ -99,6 +103,10 @@ const Select = {
     this.saveSelectTriggerRef = saveRef(this, 'selectTriggerRef')
     this.saveRootRef = saveRef(this, 'rootRef')
     this.saveSelectionRef = saveRef(this, 'selectionRef')
+    this.ariaId = generateUUID()
+    this._focused = false
+    this._mouseDown = false
+    this._options = []
   },
   data () {
     const props = getOptionProps(this)
@@ -116,6 +124,7 @@ const Select = {
       ) : '',
       _open: props.defaultOpen,
       _optionsInfo: optionsInfo,
+      _backfillValue: '',
       // a flag for aviod redundant getOptionsInfoFromProps call
       _skipBuildOptionsInfo: true,
     }
@@ -140,10 +149,10 @@ const Select = {
       if (isMultipleOrTags(this.$props)) {
         const inputNode = this.getInputDOMNode()
         const mirrorNode = this.getInputMirrorDOMNode()
-        if (inputNode.value) {
+        if (inputNode.value && inputNode.value && mirrorNode) {
           inputNode.style.width = ''
           inputNode.style.width = `${mirrorNode.clientWidth + 10}px`
-        } else {
+        } else if (inputNode) {
           inputNode.style.width = ''
         }
       }
@@ -185,6 +194,91 @@ const Select = {
       }
       return newState
     },
+    getOptionsFromChildren (children = [], options = []) {
+      children.forEach(child => {
+        if (!child.data || child.data.slot !== undefined) {
+          return
+        }
+        if (getSlotOptions(child).isSelectOptGroup) {
+          this.getOptionsFromChildren(child.componentOptions.children, options)
+        } else {
+          options.push(child)
+        }
+      })
+      return options
+    },
+    getInputValueForCombobox (props, optionsInfo, useDefaultValue) {
+      let value = []
+      if ('value' in props && !useDefaultValue) {
+        value = toArray(props.value)
+      }
+      if ('defaultValue' in props && useDefaultValue) {
+        value = toArray(props.defaultValue)
+      }
+      if (value.length) {
+        value = value[0]
+      } else {
+        return ''
+      }
+      let label = value
+      if (props.labelInValue) {
+        label = value.label
+      } else if (optionsInfo[getMapKey(value)]) {
+        label = optionsInfo[getMapKey(value)].label
+      }
+      if (label === undefined) {
+        label = ''
+      }
+      return label
+    },
+
+    getLabelFromOption (props, option) {
+      return getPropValue(option, props.optionLabelProp)
+    },
+
+    getOptionsInfoFromProps (props, preState) {
+      const options = this.getOptionsFromChildren(this.$props.children)
+      const optionsInfo = {}
+      options.forEach((option) => {
+        const singleValue = getValuePropValue(option)
+        optionsInfo[getMapKey(singleValue)] = {
+          option,
+          value: singleValue,
+          label: this.getLabelFromOption(props, option),
+          title: getValue(option, 'title'),
+        }
+      })
+      if (preState) {
+        // keep option info in pre state value.
+        const oldOptionsInfo = preState._optionsInfo
+        const value = preState._value
+        if (value) {
+          value.forEach(v => {
+            const key = getMapKey(v)
+            if (!optionsInfo[key] && oldOptionsInfo[key] !== undefined) {
+              optionsInfo[key] = oldOptionsInfo[key]
+            }
+          })
+        }
+      }
+      return optionsInfo
+    },
+
+    getValueFromProps (props, useDefaultValue) {
+      let value = []
+      if ('value' in props && !useDefaultValue) {
+        value = toArray(props.value)
+      }
+      if ('defaultValue' in props && useDefaultValue) {
+        value = toArray(props.defaultValue)
+      }
+      if (props.labelInValue) {
+        value = value.map((v) => {
+          return v.key
+        })
+      }
+      return value
+    },
 
     onInputChange (event) {
       const { tokenSeparators } = this.$props
@@ -290,7 +384,7 @@ const Select = {
         return
       }
 
-      if (this.getRealOpenState(state)) {
+      if (this.getRealOpenState(state) && this.selectTriggerRef) {
         const menu = this.selectTriggerRef.getInnerMenu()
         if (menu && menu.onKeyDown(event, this.handleBackfill)) {
           event.preventDefault()
@@ -324,12 +418,8 @@ const Select = {
         this.setOpenState(false, true)
       }
       this.fireChange(value)
-      let inputValue
+      const inputValue = isCombobox(props) ? getPropValue(item, props.optionLabelProp) : ''
-      if (isCombobox(props)) {
+
-        inputValue = getPropValue(item, props.optionLabelProp)
-      } else {
-        inputValue = ''
-      }
       if (props.autoClearSearchValue) {
         this.setInputValue(inputValue, false)
       }
@@ -357,7 +447,7 @@ const Select = {
     },
 
     onPlaceholderClick (e) {
-      if (this.getInputDOMNode()) {
+      if (this.getInputDOMNode() && this.getInputDOMNode()) {
         this.getInputDOMNode().focus()
       }
     },
@@ -389,89 +479,6 @@ const Select = {
     onChoiceAnimationLeave () {
       this.forcePopupAlign()
     },
-    getOptionsFromChildren (children = [], options = []) {
-      children.forEach(child => {
-        if (!child.data || child.data.slot !== undefined) {
-          return
-        }
-        if (getSlotOptions(child).isSelectOptGroup) {
-          this.getOptionsFromChildren(child.componentOptions.children, options)
-        } else {
-          options.push(child)
-        }
-      })
-      return options
-    },
-    getInputValueForCombobox (props, optionsInfo, useDefaultValue) {
-      let value = []
-      if ('value' in props && !useDefaultValue) {
-        value = toArray(props.value)
-      }
-      if ('defaultValue' in props && useDefaultValue) {
-        value = toArray(props.defaultValue)
-      }
-      if (value.length) {
-        value = value[0]
-      } else {
-        return ''
-      }
-      let label = value
-      if (props.labelInValue) {
-        label = value.label
-      } else if (optionsInfo[getMapKey(value)]) {
-        label = optionsInfo[getMapKey(value)].label
-      }
-      if (label === undefined) {
-        label = ''
-      }
-      return label
-    },
-
-    getLabelFromOption (props, option) {
-      return getPropValue(option, props.optionLabelProp)
-    },
-
-    getOptionsInfoFromProps (props, preState) {
-      const options = this.getOptionsFromChildren(this.$props.children)
-      const optionsInfo = {}
-      options.forEach((option) => {
-        const singleValue = getValuePropValue(option)
-        optionsInfo[getMapKey(singleValue)] = {
-          option,
-          value: singleValue,
-          label: this.getLabelFromOption(props, option),
-          title: getValue(option, 'title'),
-        }
-      })
-      if (preState) {
-        // keep option info in pre state value.
-        const oldOptionsInfo = preState._optionsInfo
-        const value = preState._value
-        value.forEach(v => {
-          const key = getMapKey(v)
-          if (!optionsInfo[key] && oldOptionsInfo[key] !== undefined) {
-            optionsInfo[key] = oldOptionsInfo[key]
-          }
-        })
-      }
-      return optionsInfo
-    },
-
-    getValueFromProps (props, useDefaultValue) {
-      let value = []
-      if ('value' in props && !useDefaultValue) {
-        value = toArray(props.value)
-      }
-      if ('defaultValue' in props && useDefaultValue) {
-        value = toArray(props.defaultValue)
-      }
-      if (props.labelInValue) {
-        value = value.map((v) => {
-          return v.key
-        })
-      }
-      return value
-    },
 
     getOptionInfoBySingleValue  (value, optionsInfo) {
       let info
@@ -515,7 +522,8 @@ const Select = {
       let value = null
       Object.keys(this.$data._optionsInfo).forEach(key => {
         const info = this.$data._optionsInfo[key]
-        if (toArray(info.label).join('') === label) {
+        const oldLable = toArray(info.label)
+        if (oldLable && oldLable.join('') === label) {
           value = info.value
         }
       })
@@ -532,8 +540,8 @@ const Select = {
       return value
     },
 
-    getVLForOnChange (vls_) {
+    getVLForOnChange (vlsS) {
-      let vls = vls_
+      let vls = vlsS
       if (vls !== undefined) {
         if (!this.labelInValue) {
           vls = vls.map(v => v)
@@ -567,10 +575,11 @@ const Select = {
       if (state._inputValue) {
         hidden = true
       }
-      if (state._value.length) {
+      const value = state._value
+      if (value.length) {
         hidden = true
       }
-      if (isCombobox(props) && state._value.length === 1 && !state._value[0]) {
+      if (isCombobox(props) && value.length === 1 && (state._value && !state._value[0])) {
         hidden = false
       }
       const placeholder = props.placeholder
@@ -634,10 +643,16 @@ const Select = {
             this.setInputValue('')
           } else {
             // why not use setState?
-            this.$data._inputValue = this.getInputDOMNode().value = ''
+            this.$data._inputValue = ''
+            this.$nextTick(() => {
+              if (this.getInputDOMNode && this.getInputDOMNode()) {
+                this.getInputDOMNode().value = ''
+              }
+            })
           }
-          value = this.getValueByInput(inputValue)
+          const tmpValue = this.getValueByInput(inputValue)
-          if (value !== undefined) {
+          if (tmpValue !== undefined) {
+            value = tmpValue
             this.fireChange(value)
           }
         }
@@ -677,9 +692,11 @@ const Select = {
       const props = this.$props
       const { _inputValue: inputValue } = this.$data
       const attrs = getAttrs(this)
+      const defaultInput = <input id={attrs.id} autoComplete='off' />
+
       const inputElement = props.getInputElement
         ? props.getInputElement()
-        : <input id={attrs.id} autoComplete='off'/>
+        : defaultInput
       const inputCls = classnames(getClass(inputElement), {
         [`${props.prefixCls}-search__field`]: true,
       })
@@ -749,34 +766,38 @@ const Select = {
     },
 
     getPopupDOMNode () {
-      return this.selectTriggerRef.getPopupDOMNode()
+      if (this.selectTriggerRef) {
+        return this.selectTriggerRef.getPopupDOMNode()
+      }
     },
 
     getPopupMenuComponent () {
-      return this.selectTriggerRef.getInnerMenu()
+      if (this.selectTriggerRef) {
+        return this.selectTriggerRef.getInnerMenu()
+      }
     },
 
     setOpenState (open, needFocus) {
       const { $props: props, $data: state } = this
       if (state._open === open) {
-        this.maybeFocus(open, needFocus)
+        this.maybeFocus(open, !!needFocus)
         return
       }
       this.__emit('dropdownVisibleChange', open)
       const nextState = {
         _open: open,
-        _backfillValue: undefined,
+        _backfillValue: '',
       }
       // clear search input value when open is false in singleMode.
       if (!open && isSingleMode(props) && props.showSearch) {
         this.setInputValue('', false)
       }
       if (!open) {
-        this.maybeFocus(open, needFocus)
+        this.maybeFocus(open, !!needFocus)
       }
       this.setState(nextState, () => {
         if (open) {
-          this.maybeFocus(open, needFocus)
+          this.maybeFocus(open, !!needFocus)
         }
       })
     },
@@ -791,11 +812,11 @@ const Select = {
         }
       }
     },
-    getValueByInput  (string) {
+    getValueByInput  (str) {
       const { multiple, tokenSeparators } = this.$props
       let nextValue = this.$data._value
       let hasNewValue = false
-      splitBySeparators(string, tokenSeparators).forEach(label => {
+      splitBySeparators(str, tokenSeparators).forEach(label => {
         const selectedValue = [label]
         if (multiple) {
           const value = this.getValueByLabel(label)
@@ -804,13 +825,10 @@ const Select = {
             hasNewValue = true
             this.fireSelect(value)
           }
-        } else {
+        } else if (findIndexInValueBySingleValue(nextValue, label) === -1) {
-          // tag
+          nextValue = nextValue.concat(selectedValue)
-          if (findIndexInValueBySingleValue(nextValue, label) === -1) {
+          hasNewValue = true
-            nextValue = nextValue.concat(selectedValue)
+          this.fireSelect(label)
-            hasNewValue = true
-            this.fireSelect(label)
-          }
         }
       })
       return hasNewValue ? nextValue : undefined
@@ -833,17 +851,17 @@ const Select = {
     },
 
     focus () {
-      if (isSingleMode(this.$props)) {
+      if (isSingleMode(this.$props) && this.selectionRef) {
         this.selectionRef.focus()
-      } else {
+      } else if (this.getInputDOMNode()) {
         this.getInputDOMNode().focus()
       }
     },
 
     blur () {
-      if (isSingleMode(this.$props)) {
+      if (isSingleMode(this.$props) && this.selectionRef) {
         this.selectionRef.blur()
-      } else {
+      } else if (this.getInputDOMNode()) {
         this.getInputDOMNode().blur()
       }
     },
@@ -880,11 +898,11 @@ const Select = {
       }
       let filterFn = this.$props.filterOption
       if (hasProp(this, 'filterOption')) {
-        if (this.filterOption === true) {
+        if (filterFn === true) {
-          filterFn = defaultFilter
+          filterFn = defaultFilter.bind(this)
         }
       } else {
-        filterFn = defaultFilter
+        filterFn = defaultFilter.bind(this)
       }
       if (!filterFn) {
         return true
@@ -900,7 +918,7 @@ const Select = {
       if (this.focusTimer) {
         this.clearFocusTime()
       }
-      this.focusTimer = setTimeout(() => {
+      this.focusTimer = window.setTimeout(() => {
         // this._focused = true
         // this.updateFocusClassName()
         this.$emit('focus')
@@ -940,7 +958,7 @@ const Select = {
             input.focus()
             this._focused = true
           }
-        } else if (activeElement !== this.selectionRef) {
+        } else if (activeElement !== this.selectionRef && this.selectionRef) {
           this.selectionRef.focus()
           this._focused = true
         }
@@ -956,8 +974,8 @@ const Select = {
       if (e && e.stopPropagation) {
         e.stopPropagation()
       }
-
+      const oldValue = this.$data._value
-      const value = this.$data._value.filter(singleValue => {
+      const value = oldValue.filter(singleValue => {
         return singleValue !== selectedKey
       })
       const canMultiple = isMultipleOrTags(props)
@@ -1006,7 +1024,9 @@ const Select = {
       if (!this.$data._open) {
         return
       }
-      this.selectTriggerRef && this.selectTriggerRef.triggerRef.forcePopupAlign()
+      if (this.selectTriggerRef && this.selectTriggerRef.triggerRef) {
+        this.selectTriggerRef.triggerRef.forcePopupAlign()
+      }
     },
     renderFilterOptions () {
       const { _inputValue: inputValue } = this.$data
@@ -1024,8 +1044,7 @@ const Select = {
         value = value.filter(singleValue => {
           return (
             childrenKeys.indexOf(singleValue) === -1 &&
-          (!inputValue ||
+          (!inputValue || String(singleValue).indexOf(String(inputValue)) > -1)
-            String(singleValue).indexOf(String(inputValue)) > -1)
           )
         })
         value.forEach(singleValue => {
@@ -1109,25 +1128,49 @@ const Select = {
           return
         }
         if (getSlotOptions(child).isSelectOptGroup) {
-          const innerItems = this.renderFilterOptionsFromChildren(
+          let label = getComponentFromProp(child, 'label')
-            child.componentOptions.children,
+          let key = child.key
-            childrenKeys,
+          if (!key && typeof label === 'string') {
-            menuItems,
+            key = label
-          )
+          } else if (!label && key) {
-          if (innerItems.length) {
+            label = key
-            let label = getComponentFromProp(child, 'label')
+          }
-            let key = child.key
+          const childChildren = getSlots(child).default
-            if (!key && typeof label === 'string') {
+          // Match option group label
-              key = label
+          if (inputValue && this._filterOption(inputValue, child)) {
-            } else if (!label && key) {
+            const innerItems = childChildren.map(
-              label = key
+              (subChild) => {
-            }
+                const childValueSub = getValuePropValue(subChild) || subChild.key
+                return (
+                  <MenuItem key={childValueSub} value={childValueSub} {...subChild.data}>
+                    {subChild.componentOptions.children}
+                  </MenuItem>
+                )
+              },
+            )
+
             sel.push(
               <MenuItemGroup key={key} title={label} class ={getClass(child)}>
                 {innerItems}
-              </MenuItemGroup>
+              </MenuItemGroup>,
             )
+
+          // Not match
+          } else {
+            const innerItems = this.renderFilterOptionsFromChildren(
+              childChildren,
+              childrenKeys,
+              menuItems,
+            )
+            if (innerItems.length) {
+              sel.push(
+                <MenuItemGroup key={key} title={label} {...child.data}>
+                  {innerItems}
+                </MenuItemGroup>
+              )
+            }
           }
+
           return
         }
         warning(
@@ -1242,11 +1285,14 @@ const Select = {
           let content = `+ ${value.length - maxTagCount} ...`
           if (maxTagPlaceholder) {
             content = typeof maxTagPlaceholder === 'function'
-              ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder
+              ? maxTagPlaceholder(omittedValues)
+              : maxTagPlaceholder
           }
           maxTagPlaceholderEl = (<li
             style={UNSELECTABLE_STYLE}
+            {...{ attrs: UNSELECTABLE_ATTRIBUTE }}
             unselectable='unselectable'
+            role='presentation'
             onMousedown={preventDefaultEvent}
             class={`${prefixCls}-selection__choice ${prefixCls}-selection__choice__disabled`}
             key='maxTagPlaceholder'
@@ -1274,9 +1320,11 @@ const Select = {
             return (
               <li
                 style={UNSELECTABLE_STYLE}
+                {...{ attrs: UNSELECTABLE_ATTRIBUTE }}
                 unselectable='unselectable'
                 onMousedown={preventDefaultEvent}
                 class={choiceClassName}
+                role='presentation'
                 key={singleValue || SELECT_EMPTY_VALUE_KEY}
                 title={toTitle(title)}
               >
@@ -1321,11 +1369,7 @@ const Select = {
             </transition-group>
           )
         } else {
-          innerNode = (
+          innerNode = <ul>{selectedValueNodes}</ul>
-            <ul>
-              {selectedValueNodes}
-            </ul>
-          )
         }
       }
       return (
@@ -1342,6 +1386,33 @@ const Select = {
         </div>
       )
     },
+    renderArrow (multiple) {
+      const { showArrow, loading, prefixCls } = this.$props
+      const inputIcon = getComponentFromProp(this, 'inputIcon')
+      if (!showArrow) {
+        return null
+      }
+      // if loading  have loading icon
+      if (multiple && !loading) {
+        return null
+      }
+      const defaultIcon = loading ? (
+        <i class={`${prefixCls}-arrow-loading`} />
+      ) : (
+        <i class={`${prefixCls}-arrow-icon`} />
+      )
+      return (
+        <span
+          key='arrow'
+          class={`${prefixCls}-arrow`}
+          style={UNSELECTABLE_STYLE}
+          {...{ attrs: UNSELECTABLE_ATTRIBUTE }}
+          onClick={this.onArrowClick}
+        >
+          {inputIcon || defaultIcon}
+        </span>
+      )
+    },
     topCtrlContainerClick (e) {
       if (this.$data._open && !isSingleMode(this.$props)) {
         e.stopPropagation()
@@ -1412,7 +1483,6 @@ const Select = {
     const multiple = isMultipleOrTags(props)
     const state = this.$data
     const { disabled, prefixCls } = props
-    const inputIcon = getComponentFromProp(this, 'inputIcon')
     const ctrlNode = this.renderTopControlNode()
     const { _open: open, _inputValue: inputValue, _value: value } = this.$data
     if (open) {
@@ -1429,6 +1499,7 @@ const Select = {
         'aria-autocomplete': 'list',
         'aria-haspopup': 'true',
         'aria-expanded': realOpen,
+        'aria-controls': this.ariaId,
       },
       on: {
         click: this.selectionRefClick,
@@ -1445,7 +1516,7 @@ const Select = {
       selectionProps.on.keydown = this.onKeyDown
       selectionProps.on.focus = this.selectionRefFocus
       selectionProps.on.blur = this.selectionRefBlur
-      selectionProps.attrs.tabIndex = props.disabled ? -1 : 0
+      selectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex
     }
     const rootCls = {
       [prefixCls]: true,
@@ -1492,6 +1563,8 @@ const Select = {
           name: 'ant-ref',
           value: this.saveSelectTriggerRef,
         }] }}
+        dropdownRender={props.dropdownRender}
+        ariaId={this.ariaId}
       >
         <div
           {...{ directives: [{
@@ -1510,16 +1583,7 @@ const Select = {
           <div {...selectionProps}>
             {ctrlNode}
             {this.renderClear()}
-            {multiple || !props.showArrow ? null : (
+            {this.renderArrow(!!multiple)}
-              <span
-                key='arrow'
-                class={`${prefixCls}-arrow`}
-                style={UNSELECTABLE_STYLE}
-                unselectable='unselectable'
-                // onClick={this.onArrowClick}
-              >
-                {inputIcon || <i class={`${prefixCls}-arrow-icon`} />}
-              </span>)}
           </div>
         </div>
       </SelectTrigger>

components/vc-select/SelectTrigger.jsx

@@ -55,6 +55,8 @@ export default {
     getPopupContainer: PropTypes.func,
     backfillValue: PropTypes.any,
     menuItemSelectedIcon: PropTypes.any,
+    dropdownRender: PropTypes.func,
+    ariaId: PropTypes.string,
   },
   created () {
     this.saveDropdownMenuRef = saveRef(this, 'dropdownMenuRef')
@@ -62,7 +64,7 @@ export default {
   },
   data () {
     return {
-      dropdownWidth: null,
+      dropdownWidth: 0,
     }
   },
 
@@ -99,9 +101,13 @@ export default {
         dropdownMenuStyle, getDropdownPrefixCls, backfillValue, menuItemSelectedIcon,
       } = this
       const { menuSelect, menuDeselect, popupScroll } = this.$listeners
+      const props = this.$props
+
+      const { dropdownRender, ariaId } = props
       const dropdownMenuProps = {
         props: {
           ...newProps.props,
+          ariaId,
           prefixCls: getDropdownPrefixCls(),
           value, firstActiveValue, defaultActiveFirstOption, dropdownMenuStyle,
           backfillValue,
@@ -118,9 +124,12 @@ export default {
           value: this.saveDropdownMenuRef,
         }],
       }
-      return (
+      const menuNode = <DropdownMenu {...dropdownMenuProps} />
-        <DropdownMenu {...dropdownMenuProps} />
+
-      )
+      if (dropdownRender) {
+        return dropdownRender(menuNode, props)
+      }
+      return null
     },
 
     getDropdownTransitionName () {

components/vc-select/assets/index.less

@@ -1,7 +1,16 @@
 @selectPrefixCls: rc-select;
 
+@keyframes select-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .effect() {
-  animation-duration: .3s;
+  animation-duration: 0.3s;
   animation-fill-mode: both;
   transform-origin: 0 0;
 }
@@ -14,7 +23,8 @@
   color: #666;
   line-height: 28px;
 
-  ul, li {
+  ul,
+  li {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -35,17 +45,36 @@
     outline: none;
   }
 
+  &-arrow &-arrow-loading {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-top: 6px;
+    margin-left: -4px;
+    &:after {
+      content: ' ';
+      display: block;
+      width: 12px;
+      height: 12px;
+      margin: 2px;
+      border-radius: 50%;
+      border: 2px solid #999999;
+      border-color: #999999 transparent #999999 transparent;
+      animation: select-ring 1.2s linear infinite;
+    }
+  }
+
   &-arrow &-arrow-icon {
     border-color: #999999 transparent transparent transparent;
-      border-style: solid;
+    border-style: solid;
-      border-width: 5px 4px 0 4px;
+    border-width: 5px 4px 0 4px;
-      height: 0;
+    height: 0;
-      width: 0;
+    width: 0;
-      margin-left: -4px;
+    margin-left: -4px;
-      margin-top: -2px;
+    margin-top: -2px;
-      position: absolute;
+    position: absolute;
-      top: 50%;
+    top: 50%;
-      left: 50%;
+    left: 50%;
   }
 
   &-selection {
@@ -251,15 +280,18 @@
     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);
+    transition: padding 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
+      width 0.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);
+      transition: margin 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
     }
 
-    &-zoom-enter, &-zoom-appear, &-zoom-leave {
+    &-zoom-enter,
+    &-zoom-appear,
+    &-zoom-leave {
       .effect();
       opacity: 0;
       animation-play-state: paused;
@@ -310,7 +342,7 @@
       transform: scale(0);
       top: 0;
       right: 2px;
-      transition: opacity .3s, transform .3s;
+      transition: opacity 0.3s, transform 0.3s;
 
       &-icon {
         font-style: normal;
@@ -402,7 +434,8 @@
       }
     }
 
-    &-slide-up-enter, &-slide-up-appear {
+    &-slide-up-enter,
+    &-slide-up-appear {
       .effect();
       opacity: 0;
       animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
@@ -416,7 +449,8 @@
       animation-play-state: paused;
     }
 
-    &-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft, &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft {
+    &-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;
     }
@@ -426,7 +460,8 @@
       animation-play-state: running;
     }
 
-    &-slide-up-enter&-slide-up-enter-active&-placement-topLeft, &-slide-up-appear&-slide-up-appear-active&-placement-topLeft {
+    &-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;
     }
@@ -493,5 +528,4 @@
       border-width: 0 4px 5px 4px;
     }
   }
-
 }

components/vc-select/util.js

@@ -5,7 +5,7 @@ export function toTitle (title) {
   if (typeof title === 'string') {
     return title
   }
-  return null
+  return ''
 }
 export function getValuePropValue (child) {
   if (!child) {
@@ -24,9 +24,7 @@ export function getValuePropValue (child) {
       return label
     }
   }
-  throw new Error(
+  throw new Error(`Need at least a key or a value or a label (only for OptGroup) for ${child}`)
-    `Need at least a key or a value or a label(slot) (only for OptGroup) for ${child}`
-  )
 }
 
 export function getPropValue (child, prop) {
@@ -88,10 +86,12 @@ export function preventDefaultEvent (e) {
 
 export function findIndexInValueBySingleValue (value, singleValue) {
   let index = -1
-  for (let i = 0; i < value.length; i++) {
+  if (value) {
-    if (value[i] === singleValue) {
+    for (let i = 0; i < value.length; i++) {
-      index = i
+      if (value[i] === singleValue) {
-      break
+        index = i
+        break
+      }
     }
   }
   return index
@@ -100,10 +100,12 @@ export function findIndexInValueBySingleValue (value, singleValue) {
 export function getLabelFromPropsValue (value, key) {
   let label
   value = toArray(value)
-  for (let i = 0; i < value.length; i++) {
+  if (value) {
-    if (value[i].key === key) {
+    for (let i = 0; i < value.length; i++) {
-      label = value[i].label
+      if (value[i].key === key) {
-      break
+        label = value[i].label
+        break
+      }
     }
   }
   return label
@@ -155,18 +157,18 @@ export function findFirstMenuItem (children) {
   return null
 }
 
-export function includesSeparators (string, separators) {
+export function includesSeparators (str, separators) {
   for (let i = 0; i < separators.length; ++i) {
-    if (string.lastIndexOf(separators[i]) > 0) {
+    if (str.lastIndexOf(separators[i]) > 0) {
       return true
     }
   }
   return false
 }
 
-export function splitBySeparators (string, separators) {
+export function splitBySeparators (str, separators) {
   const reg = new RegExp(`[${separators.join()}]`)
-  return string.split(reg).filter(token => token)
+  return str.split(reg).filter(token => token)
 }
 
 export function defaultFilterFn (input, child) {
@@ -180,9 +182,7 @@ export function defaultFilterFn (input, child) {
   } else {
     value = String(value)
   }
-  return (
+  return value.toLowerCase().indexOf(input.toLowerCase()) > -1
-    value.toLowerCase().indexOf(input.toLowerCase()) > -1
-  )
 }
 
 export function validateOptionValue (value, props) {
@@ -192,7 +192,7 @@ export function validateOptionValue (value, props) {
   if (typeof value !== 'string') {
     throw new Error(
       `Invalid \`value\` of type \`${typeof value}\` supplied to Option, ` +
-      `expected \`string\` when \`tags/combobox\` is \`true\`.`
+        `expected \`string\` when \`tags/combobox\` is \`true\`.`,
     )
   }
 }
@@ -202,3 +202,16 @@ export function saveRef (instance, name) {
     instance[name] = node
   }
 }
+
+export function generateUUID () {
+  if (process.env.NODE_ENV === 'test') {
+    return 'test-uuid'
+  }
+  let d = new Date().getTime()
+  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+    const r = (d + Math.random() * 16) % 16 | 0
+    d = Math.floor(d / 16)
+    return (c === 'x' ? r : (r & 0x7) | 0x8).toString(16)
+  })
+  return uuid
+}