iep-ui 1.4.20 → 1.4.21

package/es/vc-select/Select.js

@@ -0,0 +1,1765 @@
+import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
+import _defineProperty from 'babel-runtime/helpers/defineProperty';
+import _extends from 'babel-runtime/helpers/extends';
+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 Vue from 'vue';
+import Option from './Option';
+import OptGroup from './OptGroup';
+import { hasProp, getSlotOptions, getPropsData, getValueByProp as getValue, getComponentFromProp, getEvents, getClass, getStyle, getAttrs, getOptionProps, getSlots, getListeners } 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';
+import { defaultFilterFn, findFirstMenuItem, findIndexInValueBySingleValue, generateUUID, getLabelFromPropsValue, getMapKey, getPropValue, getValuePropValue, includesSeparators, isCombobox, isMultipleOrTags, isMultipleOrTagsOrCombobox, isSingleMode, preventDefaultEvent, saveRef, splitBySeparators, toArray, toTitle, UNSELECTABLE_ATTRIBUTE, UNSELECTABLE_STYLE, validateOptionValue } from './util';
+import { SelectPropTypes } from './PropTypes';
+import contains from '../vc-util/Dom/contains';
+import { isIE, isEdge } from '../_util/env';
+
+Vue.use(ref, { name: 'ant-ref' });
+var SELECT_EMPTY_VALUE_KEY = 'RC_SELECT_EMPTY_VALUE_KEY';
+
+var noop = function noop() {
+  return null;
+};
+
+// Where el is the DOM element you'd like to test for visibility
+function isHidden(node) {
+  return !node || node.offsetParent === null;
+}
+
+function chaining() {
+  for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
+    fns[_key] = arguments[_key];
+  }
+
+  return function () {
+    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    // eslint-disable-line
+    // eslint-disable-line
+    for (var i = 0; i < fns.length; i++) {
+      if (fns[i] && typeof fns[i] === 'function') {
+        fns[i].apply(chaining, args);
+      }
+    }
+  };
+}
+var Select = {
+  inheritAttrs: false,
+  Option: Option,
+  OptGroup: OptGroup,
+  name: 'Select',
+  mixins: [BaseMixin],
+  props: _extends({}, 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(function () {
+      return {};
+    }),
+    dropdownMenuStyle: PropTypes.object.def(function () {
+      return {};
+    }),
+    optionFilterProp: SelectPropTypes.optionFilterProp.def('value'),
+    optionLabelProp: SelectPropTypes.optionLabelProp.def('value'),
+    notFoundContent: PropTypes.any.def('Not Found'),
+    backfill: PropTypes.bool.def(false),
+    showAction: SelectPropTypes.showAction.def(['click']),
+    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(function (menu) {
+      return menu;
+    })
+    // onChange: noop,
+    // onFocus: noop,
+    // onBlur: noop,
+    // onSelect: noop,
+    // onSearch: noop,
+    // onDeselect: noop,
+    // onInputKeydown: noop,
+  }),
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  created: function created() {
+    this.saveInputRef = saveRef(this, 'inputRef');
+    this.saveInputMirrorRef = saveRef(this, 'inputMirrorRef');
+    this.saveTopCtrlRef = saveRef(this, 'topCtrlRef');
+    this.saveSelectTriggerRef = saveRef(this, 'selectTriggerRef');
+    this.saveRootRef = saveRef(this, 'rootRef');
+    this.saveSelectionRef = saveRef(this, 'selectionRef');
+    this._focused = false;
+    this._mouseDown = false;
+    this._options = [];
+    this._empty = false;
+  },
+  data: function data() {
+    var props = getOptionProps(this);
+    var optionsInfo = this.getOptionsInfoFromProps(props);
+    warning(this.__propsSymbol__, 'Replace slots.default with props.children and pass props.__propsSymbol__');
+    if (props.tags && typeof props.filterOption !== 'function') {
+      var isDisabledExist = Object.keys(optionsInfo).some(function (key) {
+        return optionsInfo[key].disabled;
+      });
+      warning(!isDisabledExist, 'Please avoid setting option to disabled in tags mode since user can always type text as tag.');
+    }
+    var state = {
+      _value: this.getValueFromProps(props, true), // true: use default value
+      _inputValue: props.combobox ? this.getInputValueForCombobox(props, optionsInfo, true // use default value
+      ) : '',
+      _open: props.defaultOpen,
+      _optionsInfo: optionsInfo,
+      _backfillValue: '',
+      // a flag for aviod redundant getOptionsInfoFromProps call
+      _skipBuildOptionsInfo: true,
+      _ariaId: generateUUID()
+    };
+    return _extends({}, state, {
+      _mirrorInputValue: state._inputValue }, this.getDerivedState(props, state));
+  },
+  mounted: function mounted() {
+    var _this = this;
+
+    this.$nextTick(function () {
+      // when defaultOpen is true, we should auto focus search input
+      // https://github.com/ant-design/ant-design/issues/14254
+      if (_this.autoFocus || _this._open) {
+        _this.focus();
+      }
+      // this.setState({
+      //   _ariaId: generateUUID(),
+      // });
+    });
+  },
+
+  watch: {
+    __propsSymbol__: function __propsSymbol__() {
+      _extends(this.$data, this.getDerivedState(getOptionProps(this), this.$data));
+    },
+    '$data._inputValue': function $data_inputValue(val) {
+      this.$data._mirrorInputValue = val;
+    }
+  },
+  updated: function updated() {
+    var _this2 = this;
+
+    this.$nextTick(function () {
+      if (isMultipleOrTags(_this2.$props)) {
+        var inputNode = _this2.getInputDOMNode();
+        var mirrorNode = _this2.getInputMirrorDOMNode();
+        if (inputNode && inputNode.value && mirrorNode) {
+          inputNode.style.width = '';
+          inputNode.style.width = mirrorNode.clientWidth + 10 + 'px';
+        } else if (inputNode) {
+          inputNode.style.width = '';
+        }
+      }
+      _this2.forcePopupAlign();
+    });
+  },
+  beforeDestroy: function beforeDestroy() {
+    this.clearFocusTime();
+    this.clearBlurTime();
+    this.clearComboboxTime();
+    if (this.dropdownContainer) {
+      document.body.removeChild(this.dropdownContainer);
+      this.dropdownContainer = null;
+    }
+  },
+
+  methods: {
+    getDerivedState: function getDerivedState(nextProps, prevState) {
+      var optionsInfo = prevState._skipBuildOptionsInfo ? prevState._optionsInfo : this.getOptionsInfoFromProps(nextProps, prevState);
+
+      var newState = {
+        _optionsInfo: optionsInfo,
+        _skipBuildOptionsInfo: false
+      };
+
+      if ('open' in nextProps) {
+        newState._open = nextProps.open;
+      }
+
+      if ('value' in nextProps) {
+        var value = this.getValueFromProps(nextProps);
+        newState._value = value;
+        if (nextProps.combobox) {
+          newState._inputValue = this.getInputValueForCombobox(nextProps, optionsInfo);
+        }
+      }
+      return newState;
+    },
+    getOptionsFromChildren: function getOptionsFromChildren() {
+      var _this3 = this;
+
+      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+      children.forEach(function (child) {
+        if (!child.data || child.data.slot !== undefined) {
+          return;
+        }
+        if (getSlotOptions(child).isSelectOptGroup) {
+          _this3.getOptionsFromChildren(child.componentOptions.children, options);
+        } else {
+          options.push(child);
+        }
+      });
+      return options;
+    },
+    getInputValueForCombobox: function getInputValueForCombobox(props, optionsInfo, useDefaultValue) {
+      var 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 '';
+      }
+      var 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: function getLabelFromOption(props, option) {
+      return getPropValue(option, props.optionLabelProp);
+    },
+    getOptionsInfoFromProps: function getOptionsInfoFromProps(props, preState) {
+      var _this4 = this;
+
+      var options = this.getOptionsFromChildren(this.$props.children);
+      var optionsInfo = {};
+      options.forEach(function (option) {
+        var singleValue = getValuePropValue(option);
+        optionsInfo[getMapKey(singleValue)] = {
+          option: option,
+          value: singleValue,
+          label: _this4.getLabelFromOption(props, option),
+          title: getValue(option, 'title'),
+          disabled: getValue(option, 'disabled')
+        };
+      });
+      if (preState) {
+        // keep option info in pre state value.
+        var oldOptionsInfo = preState._optionsInfo;
+        var value = preState._value;
+        if (value) {
+          value.forEach(function (v) {
+            var key = getMapKey(v);
+            if (!optionsInfo[key] && oldOptionsInfo[key] !== undefined) {
+              optionsInfo[key] = oldOptionsInfo[key];
+            }
+          });
+        }
+      }
+      return optionsInfo;
+    },
+    getValueFromProps: function getValueFromProps(props, useDefaultValue) {
+      var 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(function (v) {
+          return v.key;
+        });
+      }
+      return value;
+    },
+    onInputChange: function onInputChange(e) {
+      var _e$target = e.target,
+          val = _e$target.value,
+          composing = _e$target.composing;
+
+      var _$data$_inputValue = this.$data._inputValue,
+          _inputValue = _$data$_inputValue === undefined ? '' : _$data$_inputValue;
+
+      if (e.isComposing || composing || _inputValue === val) {
+        this.setState({
+          _mirrorInputValue: val
+        });
+        return;
+      }
+      var tokenSeparators = this.$props.tokenSeparators;
+
+      if (isMultipleOrTags(this.$props) && tokenSeparators.length && includesSeparators(val, tokenSeparators)) {
+        var nextValue = this.getValueByInput(val);
+        if (nextValue !== undefined) {
+          this.fireChange(nextValue);
+        }
+        this.setOpenState(false, { needFocus: true });
+        this.setInputValue('', false);
+        return;
+      }
+      this.setInputValue(val);
+      this.setState({
+        _open: true
+      });
+      if (isCombobox(this.$props)) {
+        this.fireChange([val]);
+      }
+    },
+    onDropdownVisibleChange: function onDropdownVisibleChange(open) {
+      if (open && !this._focused) {
+        this.clearBlurTime();
+        this.timeoutFocus();
+        this._focused = true;
+        this.updateFocusClassName();
+      }
+      this.setOpenState(open);
+    },
+
+
+    // combobox ignore
+    onKeyDown: function onKeyDown(event) {
+      var open = this.$data._open;
+      var disabled = this.$props.disabled;
+
+      if (disabled) {
+        return;
+      }
+      var keyCode = event.keyCode;
+      if (open && !this.getInputDOMNode()) {
+        this.onInputKeydown(event);
+      } else if (keyCode === KeyCode.ENTER || keyCode === KeyCode.DOWN) {
+        // vue state是同步更新，onKeyDown在onMenuSelect后会再次调用，单选时不在调用setOpenState
+        // https://github.com/iep-ui/iep-ui/issues/1142
+        if (keyCode === KeyCode.ENTER && !isMultipleOrTags(this.$props)) {
+          this.maybeFocus(true);
+        } else if (!open) {
+          this.setOpenState(true);
+        }
+        event.preventDefault();
+      } else if (keyCode === KeyCode.SPACE) {
+        // Not block space if popup is shown
+        if (!open) {
+          this.setOpenState(true);
+          event.preventDefault();
+        }
+      }
+    },
+    onInputKeydown: function onInputKeydown(event) {
+      var _this5 = this;
+
+      var _$props = this.$props,
+          disabled = _$props.disabled,
+          combobox = _$props.combobox,
+          defaultActiveFirstOption = _$props.defaultActiveFirstOption;
+
+      if (disabled) {
+        return;
+      }
+      var state = this.$data;
+      var isRealOpen = this.getRealOpenState(state);
+      var keyCode = event.keyCode;
+      if (isMultipleOrTags(this.$props) && !event.target.value && keyCode === KeyCode.BACKSPACE) {
+        event.preventDefault();
+        var value = state._value;
+
+        if (value.length) {
+          this.removeSelected(value[value.length - 1]);
+        }
+        return;
+      }
+      if (keyCode === KeyCode.DOWN) {
+        if (!state._open) {
+          this.openIfHasChildren();
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      } else if (keyCode === KeyCode.ENTER && state._open) {
+        // Aviod trigger form submit when select item
+        // https://github.com/ant-design/ant-design/issues/10861
+        // https://github.com/ant-design/ant-design/issues/14544
+        if (isRealOpen || !combobox) {
+          event.preventDefault();
+        }
+        // Hard close popup to avoid lock of non option in combobox mode
+        if (isRealOpen && combobox && defaultActiveFirstOption === false) {
+          this.comboboxTimer = setTimeout(function () {
+            _this5.setOpenState(false);
+          });
+        }
+      } else if (keyCode === KeyCode.ESC) {
+        if (state._open) {
+          this.setOpenState(false);
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        return;
+      }
+
+      if (isRealOpen && this.selectTriggerRef) {
+        var menu = this.selectTriggerRef.getInnerMenu();
+        if (menu && menu.onKeyDown(event, this.handleBackfill)) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      }
+    },
+    onMenuSelect: function onMenuSelect(_ref) {
+      var item = _ref.item;
+
+      if (!item) {
+        return;
+      }
+      var value = this.$data._value;
+      var props = this.$props;
+      var selectedValue = getValuePropValue(item);
+      var lastValue = value[value.length - 1];
+      var skipTrigger = false;
+
+      if (isMultipleOrTags(props)) {
+        if (findIndexInValueBySingleValue(value, selectedValue) !== -1) {
+          skipTrigger = true;
+        } else {
+          value = value.concat([selectedValue]);
+        }
+      } else {
+        if (!isCombobox(props) && lastValue !== undefined && lastValue === selectedValue && selectedValue !== this.$data._backfillValue) {
+          this.setOpenState(false, { needFocus: true, fireSearch: false });
+          skipTrigger = true;
+        } else {
+          value = [selectedValue];
+          this.setOpenState(false, { needFocus: true, fireSearch: false });
+        }
+      }
+      if (!skipTrigger) {
+        this.fireChange(value);
+      }
+      if (!skipTrigger) {
+        this.fireSelect(selectedValue);
+        var inputValue = isCombobox(props) ? getPropValue(item, props.optionLabelProp) : '';
+
+        if (props.autoClearSearchValue) {
+          this.setInputValue(inputValue, false);
+        }
+      }
+    },
+    onMenuDeselect: function onMenuDeselect(_ref2) {
+      var item = _ref2.item,
+          domEvent = _ref2.domEvent;
+
+      if (domEvent.type === 'keydown' && domEvent.keyCode === KeyCode.ENTER) {
+        var menuItemDomNode = item.$el;
+        // https://github.com/ant-design/ant-design/issues/20465#issuecomment-569033796
+        if (!isHidden(menuItemDomNode)) {
+          this.removeSelected(getValuePropValue(item));
+        }
+        return;
+      }
+      if (domEvent.type === 'click') {
+        this.removeSelected(getValuePropValue(item));
+      }
+      if (this.autoClearSearchValue) {
+        this.setInputValue('');
+      }
+    },
+    onArrowClick: function onArrowClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.clearBlurTime();
+      if (!this.disabled) {
+        this.setOpenState(!this.$data._open, { needFocus: !this.$data._open });
+      }
+    },
+    onPlaceholderClick: function onPlaceholderClick() {
+      if (this.getInputDOMNode() && this.getInputDOMNode()) {
+        this.getInputDOMNode().focus();
+      }
+    },
+    onPopupFocus: function onPopupFocus() {
+      // fix ie infiniteScroll, focus element again
+      this.maybeFocus(true, true);
+    },
+    onClearSelection: function onClearSelection(event) {
+      var props = this.$props;
+      var state = this.$data;
+      if (props.disabled) {
+        return;
+      }
+      var inputValue = state._inputValue,
+          value = state._value;
+
+      event.stopPropagation();
+      if (inputValue || value.length) {
+        if (value.length) {
+          this.fireChange([]);
+        }
+        this.setOpenState(false, { needFocus: true });
+        if (inputValue) {
+          this.setInputValue('');
+        }
+      }
+    },
+    onChoiceAnimationLeave: function onChoiceAnimationLeave() {
+      this.forcePopupAlign();
+    },
+    getOptionInfoBySingleValue: function getOptionInfoBySingleValue(value, optionsInfo) {
+      var h = this.$createElement;
+
+      var info = void 0;
+      optionsInfo = optionsInfo || this.$data._optionsInfo;
+      if (optionsInfo[getMapKey(value)]) {
+        info = optionsInfo[getMapKey(value)];
+      }
+      if (info) {
+        return info;
+      }
+      var defaultLabel = value;
+      if (this.$props.labelInValue) {
+        var valueLabel = getLabelFromPropsValue(this.$props.value, value);
+        var defaultValueLabel = getLabelFromPropsValue(this.$props.defaultValue, value);
+        if (valueLabel !== undefined) {
+          defaultLabel = valueLabel;
+        } else if (defaultValueLabel !== undefined) {
+          defaultLabel = defaultValueLabel;
+        }
+      }
+      var defaultInfo = {
+        option: h(
+          Option,
+          {
+            attrs: { value: value },
+            key: value },
+          [value]
+        ),
+        value: value,
+        label: defaultLabel
+      };
+      return defaultInfo;
+    },
+    getOptionBySingleValue: function getOptionBySingleValue(value) {
+      var _getOptionInfoBySingl = this.getOptionInfoBySingleValue(value),
+          option = _getOptionInfoBySingl.option;
+
+      return option;
+    },
+    getOptionsBySingleValue: function getOptionsBySingleValue(values) {
+      var _this6 = this;
+
+      return values.map(function (value) {
+        return _this6.getOptionBySingleValue(value);
+      });
+    },
+    getValueByLabel: function getValueByLabel(label) {
+      var _this7 = this;
+
+      if (label === undefined) {
+        return null;
+      }
+      var value = null;
+      Object.keys(this.$data._optionsInfo).forEach(function (key) {
+        var info = _this7.$data._optionsInfo[key];
+        var disabled = info.disabled;
+
+        if (disabled) {
+          return;
+        }
+        var oldLable = toArray(info.label);
+        if (oldLable && oldLable.join('') === label) {
+          value = info.value;
+        }
+      });
+      return value;
+    },
+    getVLBySingleValue: function getVLBySingleValue(value) {
+      if (this.$props.labelInValue) {
+        return {
+          key: value,
+          label: this.getLabelBySingleValue(value)
+        };
+      }
+      return value;
+    },
+    getVLForOnChange: function getVLForOnChange(vlsS) {
+      var _this8 = this;
+
+      var vls = vlsS;
+      if (vls !== undefined) {
+        if (!this.labelInValue) {
+          vls = vls.map(function (v) {
+            return v;
+          });
+        } else {
+          vls = vls.map(function (vl) {
+            return {
+              key: vl,
+              label: _this8.getLabelBySingleValue(vl)
+            };
+          });
+        }
+        return isMultipleOrTags(this.$props) ? vls : vls[0];
+      }
+      return vls;
+    },
+    getLabelBySingleValue: function getLabelBySingleValue(value, optionsInfo) {
+      var _getOptionInfoBySingl2 = this.getOptionInfoBySingleValue(value, optionsInfo),
+          label = _getOptionInfoBySingl2.label;
+
+      return label;
+    },
+    getDropdownContainer: function getDropdownContainer() {
+      if (!this.dropdownContainer) {
+        this.dropdownContainer = document.createElement('div');
+        document.body.appendChild(this.dropdownContainer);
+      }
+      return this.dropdownContainer;
+    },
+    getPlaceholderElement: function getPlaceholderElement() {
+      var h = this.$createElement;
+      var props = this.$props,
+          state = this.$data;
+
+      var hidden = false;
+      if (state._mirrorInputValue) {
+        hidden = true;
+      }
+      var value = state._value;
+      if (value.length) {
+        hidden = true;
+      }
+      if (!state._mirrorInputValue && isCombobox(props) && value.length === 1 && state._value && !state._value[0]) {
+        hidden = false;
+      }
+      var placeholder = props.placeholder;
+      if (placeholder) {
+        var p = {
+          on: {
+            mousedown: preventDefaultEvent,
+            click: this.onPlaceholderClick
+          },
+          attrs: UNSELECTABLE_ATTRIBUTE,
+          style: _extends({
+            display: hidden ? 'none' : 'block'
+          }, UNSELECTABLE_STYLE),
+          'class': props.prefixCls + '-selection__placeholder'
+        };
+        return h(
+          'div',
+          p,
+          [placeholder]
+        );
+      }
+      return null;
+    },
+    inputClick: function inputClick(e) {
+      if (this.$data._open) {
+        this.clearBlurTime();
+        e.stopPropagation();
+      } else {
+        this._focused = false;
+      }
+    },
+    inputBlur: function inputBlur(e) {
+      var _this9 = this;
+
+      var target = e.relatedTarget || document.activeElement;
+
+      // https://github.com/iep-ui/iep-ui/issues/999
+      // https://github.com/iep-ui/iep-ui/issues/1223
+      if ((isIE || isEdge) && (e.relatedTarget === this.$refs.arrow || target && this.selectTriggerRef && this.selectTriggerRef.getInnerMenu() && this.selectTriggerRef.getInnerMenu().$el === target || contains(e.target, target))) {
+        e.target.focus();
+        e.preventDefault();
+        return;
+      }
+      this.clearBlurTime();
+      if (this.disabled) {
+        e.preventDefault();
+        return;
+      }
+      this.blurTimer = setTimeout(function () {
+        _this9._focused = false;
+        _this9.updateFocusClassName();
+        var props = _this9.$props;
+        var value = _this9.$data._value;
+        var inputValue = _this9.$data._inputValue;
+
+        if (isSingleMode(props) && props.showSearch && inputValue && props.defaultActiveFirstOption) {
+          var options = _this9._options || [];
+          if (options.length) {
+            var firstOption = findFirstMenuItem(options);
+            if (firstOption) {
+              value = [getValuePropValue(firstOption)];
+              _this9.fireChange(value);
+            }
+          }
+        } else if (isMultipleOrTags(props) && inputValue) {
+          if (_this9._mouseDown) {
+            // need update dropmenu when not blur
+            _this9.setInputValue('');
+          } else {
+            // why not use setState?
+            _this9.$data._inputValue = '';
+            if (_this9.getInputDOMNode && _this9.getInputDOMNode()) {
+              _this9.getInputDOMNode().value = '';
+            }
+          }
+          var tmpValue = _this9.getValueByInput(inputValue);
+          if (tmpValue !== undefined) {
+            value = tmpValue;
+            _this9.fireChange(value);
+          }
+        }
+        // if click the rest space of Select in multiple mode
+        if (isMultipleOrTags(props) && _this9._mouseDown) {
+          _this9.maybeFocus(true, true);
+          _this9._mouseDown = false;
+          return;
+        }
+        _this9.setOpenState(false);
+        _this9.$emit('blur', _this9.getVLForOnChange(value));
+      }, 200);
+    },
+    inputFocus: function inputFocus(e) {
+      if (this.$props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      this.clearBlurTime();
+
+      // In IE11, onOuterFocus will be trigger twice when focus input
+      // First one: e.target is div
+      // Second one: e.target is input
+      // other browser only trigger second one
+      // https://github.com/ant-design/ant-design/issues/15942
+      // Here we ignore the first one when e.target is div
+      var inputNode = this.getInputDOMNode();
+      if (inputNode && e.target === this.rootRef) {
+        return;
+      }
+      if (!isMultipleOrTagsOrCombobox(this.$props) && e.target === inputNode) {
+        return;
+      }
+      if (this._focused) {
+        return;
+      }
+      this._focused = true;
+      this.updateFocusClassName();
+      // only effect multiple or tag mode
+      if (!isMultipleOrTags(this.$props) || !this._mouseDown) {
+        this.timeoutFocus();
+      }
+    },
+    _getInputElement: function _getInputElement() {
+      var h = this.$createElement;
+
+      var props = this.$props;
+      var _$data = this.$data,
+          inputValue = _$data._inputValue,
+          _mirrorInputValue = _$data._mirrorInputValue;
+
+      var attrs = getAttrs(this);
+      var defaultInput = h('input', {
+        attrs: { id: attrs.id, autoComplete: 'off' }
+      });
+
+      var inputElement = props.getInputElement ? props.getInputElement() : defaultInput;
+      var inputCls = classnames(getClass(inputElement), _defineProperty({}, props.prefixCls + '-search__field', true));
+      var inputEvents = getEvents(inputElement);
+      // https://github.com/ant-design/ant-design/issues/4992#issuecomment-281542159
+      // Add space to the end of the inputValue as the width measurement tolerance
+      inputElement.data = inputElement.data || {};
+      return h(
+        'div',
+        { 'class': props.prefixCls + '-search__field__wrap', on: {
+            'click': this.inputClick
+          }
+        },
+        [cloneElement(inputElement, {
+          props: {
+            disabled: props.disabled,
+            value: inputValue
+          },
+          attrs: _extends({}, inputElement.data.attrs || {}, {
+            disabled: props.disabled,
+            value: inputValue
+          }),
+          domProps: {
+            value: inputValue
+          },
+          'class': inputCls,
+          directives: [{
+            name: 'ant-ref',
+            value: this.saveInputRef
+          }, {
+            name: 'ant-input'
+          }],
+          on: {
+            input: this.onInputChange,
+            keydown: chaining(this.onInputKeydown, inputEvents.keydown, getListeners(this).inputKeydown),
+            focus: chaining(this.inputFocus, inputEvents.focus),
+            blur: chaining(this.inputBlur, inputEvents.blur)
+          }
+        }), h(
+          'span',
+          _mergeJSXProps([{
+            directives: [{
+              name: 'ant-ref',
+              value: this.saveInputMirrorRef
+            }]
+          }, {
+            // ref='inputMirrorRef'
+            'class': props.prefixCls + '-search__field__mirror'
+          }]),
+          [_mirrorInputValue, '\xA0']
+        )]
+      );
+    },
+    getInputDOMNode: function getInputDOMNode() {
+      return this.topCtrlRef ? this.topCtrlRef.querySelector('input,textarea,div[contentEditable]') : this.inputRef;
+    },
+    getInputMirrorDOMNode: function getInputMirrorDOMNode() {
+      return this.inputMirrorRef;
+    },
+    getPopupDOMNode: function getPopupDOMNode() {
+      if (this.selectTriggerRef) {
+        return this.selectTriggerRef.getPopupDOMNode();
+      }
+    },
+    getPopupMenuComponent: function getPopupMenuComponent() {
+      if (this.selectTriggerRef) {
+        return this.selectTriggerRef.getInnerMenu();
+      }
+    },
+    setOpenState: function setOpenState(open) {
+      var _this10 = this;
+
+      var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var props = this.$props,
+          state = this.$data;
+      var needFocus = config.needFocus,
+          fireSearch = config.fireSearch;
+
+      if (state._open === open) {
+        this.maybeFocus(open, !!needFocus);
+        return;
+      }
+      this.__emit('dropdownVisibleChange', open);
+      var nextState = {
+        _open: open,
+        _backfillValue: ''
+      };
+      // clear search input value when open is false in singleMode.
+      if (!open && isSingleMode(props) && props.showSearch) {
+        this.setInputValue('', fireSearch);
+      }
+      if (!open) {
+        this.maybeFocus(open, !!needFocus);
+      }
+      this.setState(nextState, function () {
+        if (open) {
+          _this10.maybeFocus(open, !!needFocus);
+        }
+      });
+    },
+    setInputValue: function setInputValue(inputValue) {
+      var fireSearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+      if (inputValue !== this.$data._inputValue) {
+        this.setState({
+          _inputValue: inputValue
+        }, this.forcePopupAlign);
+        if (fireSearch) {
+          this.$emit('search', inputValue);
+        }
+      }
+    },
+    getValueByInput: function getValueByInput(str) {
+      var _this11 = this;
+
+      var _$props2 = this.$props,
+          multiple = _$props2.multiple,
+          tokenSeparators = _$props2.tokenSeparators;
+
+      var nextValue = this.$data._value;
+      var hasNewValue = false;
+      splitBySeparators(str, tokenSeparators).forEach(function (label) {
+        var selectedValue = [label];
+        if (multiple) {
+          var value = _this11.getValueByLabel(label);
+          if (value && findIndexInValueBySingleValue(nextValue, value) === -1) {
+            nextValue = nextValue.concat(value);
+            hasNewValue = true;
+            _this11.fireSelect(value);
+          }
+        } else if (findIndexInValueBySingleValue(nextValue, label) === -1) {
+          nextValue = nextValue.concat(selectedValue);
+          hasNewValue = true;
+          _this11.fireSelect(label);
+        }
+      });
+      return hasNewValue ? nextValue : undefined;
+    },
+    getRealOpenState: function getRealOpenState(state) {
+      var _open = this.$props.open;
+
+      if (typeof _open === 'boolean') {
+        return _open;
+      }
+
+      var open = (state || this.$data)._open;
+      var options = this._options || [];
+      if (isMultipleOrTagsOrCombobox(this.$props) || !this.$props.showSearch) {
+        if (open && !options.length) {
+          open = false;
+        }
+      }
+      return open;
+    },
+    focus: function focus() {
+      if (isSingleMode(this.$props) && this.selectionRef) {
+        this.selectionRef.focus();
+      } else if (this.getInputDOMNode()) {
+        this.getInputDOMNode().focus();
+      }
+    },
+    blur: function blur() {
+      if (isSingleMode(this.$props) && this.selectionRef) {
+        this.selectionRef.blur();
+      } else if (this.getInputDOMNode()) {
+        this.getInputDOMNode().blur();
+      }
+    },
+    markMouseDown: function markMouseDown() {
+      this._mouseDown = true;
+    },
+    markMouseLeave: function markMouseLeave() {
+      this._mouseDown = false;
+    },
+    handleBackfill: function handleBackfill(item) {
+      if (!this.backfill || !(isSingleMode(this.$props) || isCombobox(this.$props))) {
+        return;
+      }
+
+      var key = getValuePropValue(item);
+
+      if (isCombobox(this.$props)) {
+        this.setInputValue(key, false);
+      }
+
+      this.setState({
+        _value: [key],
+        _backfillValue: key
+      });
+    },
+    _filterOption: function _filterOption(input, child) {
+      var defaultFilter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultFilterFn;
+      var _$data2 = this.$data,
+          value = _$data2._value,
+          backfillValue = _$data2._backfillValue;
+
+      var lastValue = value[value.length - 1];
+      if (!input || lastValue && lastValue === backfillValue) {
+        return true;
+      }
+      var filterFn = this.$props.filterOption;
+      if (hasProp(this, 'filterOption')) {
+        if (filterFn === true) {
+          filterFn = defaultFilter.bind(this);
+        }
+      } else {
+        filterFn = defaultFilter.bind(this);
+      }
+      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: function timeoutFocus() {
+      var _this12 = this;
+
+      if (this.focusTimer) {
+        this.clearFocusTime();
+      }
+      this.focusTimer = window.setTimeout(function () {
+        // this._focused = true
+        // this.updateFocusClassName()
+        _this12.$emit('focus');
+      }, 10);
+    },
+    clearFocusTime: function clearFocusTime() {
+      if (this.focusTimer) {
+        clearTimeout(this.focusTimer);
+        this.focusTimer = null;
+      }
+    },
+    clearBlurTime: function clearBlurTime() {
+      if (this.blurTimer) {
+        clearTimeout(this.blurTimer);
+        this.blurTimer = null;
+      }
+    },
+    clearComboboxTime: function clearComboboxTime() {
+      if (this.comboboxTimer) {
+        clearTimeout(this.comboboxTimer);
+        this.comboboxTimer = null;
+      }
+    },
+    updateFocusClassName: function updateFocusClassName() {
+      var rootRef = this.rootRef,
+          prefixCls = this.prefixCls;
+      // avoid setState and its side effect
+
+      if (this._focused) {
+        classes(rootRef).add(prefixCls + '-focused');
+      } else {
+        classes(rootRef).remove(prefixCls + '-focused');
+      }
+    },
+    maybeFocus: function maybeFocus(open, needFocus) {
+      if (needFocus || open) {
+        var input = this.getInputDOMNode();
+        var _document = document,
+            activeElement = _document.activeElement;
+
+        if (input && (open || isMultipleOrTagsOrCombobox(this.$props))) {
+          if (activeElement !== input) {
+            input.focus();
+            this._focused = true;
+          }
+        } else if (activeElement !== this.selectionRef && this.selectionRef) {
+          this.selectionRef.focus();
+          this._focused = true;
+        }
+      }
+    },
+    removeSelected: function removeSelected(selectedKey, e) {
+      var props = this.$props;
+      if (props.disabled || this.isChildDisabled(selectedKey)) {
+        return;
+      }
+      // Do not trigger Trigger popup
+      if (e && e.stopPropagation) {
+        e.stopPropagation();
+      }
+      var oldValue = this.$data._value;
+      var value = oldValue.filter(function (singleValue) {
+        return singleValue !== selectedKey;
+      });
+      var canMultiple = isMultipleOrTags(props);
+
+      if (canMultiple) {
+        var event = selectedKey;
+        if (props.labelInValue) {
+          event = {
+            key: selectedKey,
+            label: this.getLabelBySingleValue(selectedKey)
+          };
+        }
+        this.$emit('deselect', event, this.getOptionBySingleValue(selectedKey));
+      }
+      this.fireChange(value);
+    },
+    openIfHasChildren: function openIfHasChildren() {
+      var $props = this.$props;
+
+      if ($props.children && $props.children.length || isSingleMode($props)) {
+        this.setOpenState(true);
+      }
+    },
+    fireSelect: function fireSelect(value) {
+      this.$emit('select', this.getVLBySingleValue(value), this.getOptionBySingleValue(value));
+    },
+    fireChange: function fireChange(value) {
+      if (!hasProp(this, 'value')) {
+        this.setState({
+          _value: value
+        }, this.forcePopupAlign);
+      }
+      var vls = this.getVLForOnChange(value);
+      var options = this.getOptionsBySingleValue(value);
+      this._valueOptions = options;
+      this.$emit('change', vls, isMultipleOrTags(this.$props) ? options : options[0]);
+    },
+    isChildDisabled: function isChildDisabled(key) {
+      return (this.$props.children || []).some(function (child) {
+        var childValue = getValuePropValue(child);
+        return childValue === key && getValue(child, 'disabled');
+      });
+    },
+    forcePopupAlign: function forcePopupAlign() {
+      if (!this.$data._open) {
+        return;
+      }
+      if (this.selectTriggerRef && this.selectTriggerRef.triggerRef) {
+        this.selectTriggerRef.triggerRef.forcePopupAlign();
+      }
+    },
+    renderFilterOptions: function renderFilterOptions() {
+      var h = this.$createElement;
+      var inputValue = this.$data._inputValue;
+      var _$props3 = this.$props,
+          children = _$props3.children,
+          tags = _$props3.tags,
+          notFoundContent = _$props3.notFoundContent;
+
+      var menuItems = [];
+      var childrenKeys = [];
+      var empty = false;
+      var options = this.renderFilterOptionsFromChildren(children, childrenKeys, menuItems);
+      if (tags) {
+        // tags value must be string
+        var value = this.$data._value;
+        value = value.filter(function (singleValue) {
+          return childrenKeys.indexOf(singleValue) === -1 && (!inputValue || String(singleValue).indexOf(String(inputValue)) > -1);
+        });
+
+        // sort by length
+        value.sort(function (val1, val2) {
+          return val1.length - val2.length;
+        });
+
+        value.forEach(function (singleValue) {
+          var key = singleValue;
+          var attrs = _extends({}, UNSELECTABLE_ATTRIBUTE, {
+            role: 'option'
+          });
+          var menuItem = h(
+            MenuItem,
+            _mergeJSXProps([{ style: UNSELECTABLE_STYLE }, { attrs: attrs }, {
+              attrs: { value: key },
+              key: key }]),
+            [key]
+          );
+          options.push(menuItem);
+          menuItems.push(menuItem);
+        });
+        // ref: https://github.com/ant-design/ant-design/issues/14090
+        if (inputValue && menuItems.every(function (option) {
+          return getValuePropValue(option) !== inputValue;
+        })) {
+          var p = {
+            attrs: UNSELECTABLE_ATTRIBUTE,
+            key: inputValue,
+            props: {
+              value: inputValue,
+              role: 'option'
+            },
+            style: UNSELECTABLE_STYLE
+          };
+          options.unshift(h(
+            MenuItem,
+            p,
+            [inputValue]
+          ));
+        }
+      }
+
+      if (!options.length && notFoundContent) {
+        empty = true;
+        var _p = {
+          attrs: UNSELECTABLE_ATTRIBUTE,
+          key: 'NOT_FOUND',
+          props: {
+            value: 'NOT_FOUND',
+            disabled: true,
+            role: 'option'
+          },
+          style: UNSELECTABLE_STYLE
+        };
+        options = [h(
+          MenuItem,
+          _p,
+          [notFoundContent]
+        )];
+      }
+      return { empty: empty, options: options };
+    },
+    renderFilterOptionsFromChildren: function renderFilterOptionsFromChildren() {
+      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+      var _this13 = this;
+
+      var childrenKeys = arguments[1];
+      var menuItems = arguments[2];
+      var h = this.$createElement;
+
+      var sel = [];
+      var props = this.$props;
+      var inputValue = this.$data._inputValue;
+
+      var tags = props.tags;
+      children.forEach(function (child) {
+        if (!child.data || child.data.slot !== undefined) {
+          return;
+        }
+        if (getSlotOptions(child).isSelectOptGroup) {
+          var label = getComponentFromProp(child, 'label');
+          var key = child.key;
+          if (!key && typeof label === 'string') {
+            key = label;
+          } else if (!label && key) {
+            label = key;
+          }
+          var childChildren = getSlots(child)['default'];
+          childChildren = typeof childChildren === 'function' ? childChildren() : childChildren;
+          // Match option group label
+          if (inputValue && _this13._filterOption(inputValue, child)) {
+            var innerItems = childChildren.map(function (subChild) {
+              var childValueSub = getValuePropValue(subChild) || subChild.key;
+              return h(
+                MenuItem,
+                _mergeJSXProps([{ key: childValueSub, attrs: { value: childValueSub }
+                }, subChild.data]),
+                [subChild.componentOptions.children]
+              );
+            });
+
+            sel.push(h(
+              MenuItemGroup,
+              { key: key, attrs: { title: label },
+                'class': getClass(child) },
+              [innerItems]
+            ));
+
+            // Not match
+          } else {
+            var _innerItems = _this13.renderFilterOptionsFromChildren(childChildren, childrenKeys, menuItems);
+            if (_innerItems.length) {
+              sel.push(h(
+                MenuItemGroup,
+                _mergeJSXProps([{ key: key, attrs: { title: label }
+                }, child.data]),
+                [_innerItems]
+              ));
+            }
+          }
+
+          return;
+        }
+        warning(getSlotOptions(child).isSelectOption, 'the children of `Select` should be `Select.Option` or `Select.OptGroup`, ' + ('instead of `' + (getSlotOptions(child).name || getSlotOptions(child)) + '`.'));
+
+        var childValue = getValuePropValue(child);
+
+        validateOptionValue(childValue, _this13.$props);
+        if (_this13._filterOption(inputValue, child)) {
+          var p = {
+            attrs: _extends({}, UNSELECTABLE_ATTRIBUTE, getAttrs(child)),
+            key: childValue,
+            props: _extends({
+              value: childValue
+            }, getPropsData(child), {
+              role: 'option'
+            }),
+            style: UNSELECTABLE_STYLE,
+            on: getEvents(child),
+            'class': getClass(child)
+          };
+          var menuItem = h(
+            MenuItem,
+            p,
+            [child.componentOptions.children]
+          );
+          sel.push(menuItem);
+          menuItems.push(menuItem);
+        }
+        if (tags) {
+          childrenKeys.push(childValue);
+        }
+      });
+
+      return sel;
+    },
+    renderTopControlNode: function renderTopControlNode() {
+      var _this14 = this;
+
+      var h = this.$createElement;
+      var props = this.$props;
+      var _$data3 = this.$data,
+          value = _$data3._value,
+          inputValue = _$data3._inputValue,
+          open = _$data3._open;
+      var choiceTransitionName = props.choiceTransitionName,
+          prefixCls = props.prefixCls,
+          maxTagTextLength = props.maxTagTextLength,
+          maxTagCount = props.maxTagCount,
+          maxTagPlaceholder = props.maxTagPlaceholder,
+          showSearch = props.showSearch;
+
+      var removeIcon = getComponentFromProp(this, 'removeIcon');
+      var className = prefixCls + '-selection__rendered';
+      // search input is inside topControlNode in single, multiple & combobox. 2016/04/13
+      var innerNode = null;
+      if (isSingleMode(props)) {
+        var selectedValue = null;
+        if (value.length) {
+          var showSelectedValue = false;
+          var opacity = 1;
+          if (!showSearch) {
+            showSelectedValue = true;
+          } else if (open) {
+            showSelectedValue = !inputValue;
+            if (showSelectedValue) {
+              opacity = 0.4;
+            }
+          } else {
+            showSelectedValue = true;
+          }
+          var singleValue = value[0];
+
+          var _getOptionInfoBySingl3 = this.getOptionInfoBySingleValue(singleValue),
+              label = _getOptionInfoBySingl3.label,
+              title = _getOptionInfoBySingl3.title;
+
+          selectedValue = h(
+            'div',
+            {
+              key: 'value',
+              'class': prefixCls + '-selection-selected-value',
+              attrs: { title: toTitle(title || label)
+              },
+              style: {
+                display: showSelectedValue ? 'block' : 'none',
+                opacity: opacity
+              }
+            },
+            [label]
+          );
+        }
+        if (!showSearch) {
+          innerNode = [selectedValue];
+        } else {
+          innerNode = [selectedValue, h(
+            'div',
+            {
+              'class': prefixCls + '-search ' + prefixCls + '-search--inline',
+              key: 'input',
+              style: {
+                display: open ? 'block' : 'none'
+              }
+            },
+            [this._getInputElement()]
+          )];
+        }
+      } else {
+        var selectedValueNodes = [];
+        var limitedCountValue = value;
+        var maxTagPlaceholderEl = void 0;
+        if (maxTagCount !== undefined && value.length > maxTagCount) {
+          limitedCountValue = limitedCountValue.slice(0, maxTagCount);
+          var omittedValues = this.getVLForOnChange(value.slice(maxTagCount, value.length));
+          var content = '+ ' + (value.length - maxTagCount) + ' ...';
+          if (maxTagPlaceholder) {
+            content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
+          }
+          var attrs = _extends({}, UNSELECTABLE_ATTRIBUTE, {
+            role: 'presentation',
+            title: toTitle(content)
+          });
+          maxTagPlaceholderEl = h(
+            'li',
+            _mergeJSXProps([{
+              style: UNSELECTABLE_STYLE
+            }, { attrs: attrs }, {
+              on: {
+                'mousedown': preventDefaultEvent
+              },
+
+              'class': prefixCls + '-selection__choice ' + prefixCls + '-selection__choice__disabled',
+              key: 'maxTagPlaceholder'
+            }]),
+            [h(
+              'div',
+              { 'class': prefixCls + '-selection__choice__content' },
+              [content]
+            )]
+          );
+        }
+        if (isMultipleOrTags(props)) {
+          selectedValueNodes = limitedCountValue.map(function (singleValue) {
+            var info = _this14.getOptionInfoBySingleValue(singleValue);
+            var content = info.label;
+            var title = info.title || content;
+            if (maxTagTextLength && typeof content === 'string' && content.length > maxTagTextLength) {
+              content = content.slice(0, maxTagTextLength) + '...';
+            }
+            var disabled = _this14.isChildDisabled(singleValue);
+            var choiceClassName = disabled ? prefixCls + '-selection__choice ' + prefixCls + '-selection__choice__disabled' : prefixCls + '-selection__choice';
+            // attrs 放在一起，避免动态title混乱问题，很奇怪的问题 https://github.com/iep-ui/iep-ui/issues/588
+            var attrs = _extends({}, UNSELECTABLE_ATTRIBUTE, {
+              role: 'presentation',
+              title: toTitle(title)
+            });
+            return h(
+              'li',
+              _mergeJSXProps([{
+                style: UNSELECTABLE_STYLE
+              }, { attrs: attrs }, {
+                on: {
+                  'mousedown': preventDefaultEvent
+                },
+
+                'class': choiceClassName,
+                key: singleValue || SELECT_EMPTY_VALUE_KEY
+              }]),
+              [h(
+                'div',
+                { 'class': prefixCls + '-selection__choice__content' },
+                [content]
+              ), disabled ? null : h(
+                'span',
+                {
+                  on: {
+                    'click': function click(event) {
+                      _this14.removeSelected(singleValue, event);
+                    }
+                  },
+
+                  'class': prefixCls + '-selection__choice__remove'
+                },
+                [removeIcon || h(
+                  'i',
+                  { 'class': prefixCls + '-selection__choice__remove-icon' },
+                  ['\xD7']
+                )]
+              )]
+            );
+          });
+        }
+        if (maxTagPlaceholderEl) {
+          selectedValueNodes.push(maxTagPlaceholderEl);
+        }
+        selectedValueNodes.push(h(
+          'li',
+          { 'class': prefixCls + '-search ' + prefixCls + '-search--inline', key: '__input' },
+          [this._getInputElement()]
+        ));
+
+        if (isMultipleOrTags(props) && choiceTransitionName) {
+          var transitionProps = getTransitionProps(choiceTransitionName, {
+            tag: 'ul',
+            afterLeave: this.onChoiceAnimationLeave
+          });
+          innerNode = h(
+            'transition-group',
+            transitionProps,
+            [selectedValueNodes]
+          );
+        } else {
+          innerNode = h('ul', [selectedValueNodes]);
+        }
+      }
+      return h(
+        'div',
+        _mergeJSXProps([{
+          'class': className
+        }, {
+          directives: [{
+            name: 'ant-ref',
+            value: this.saveTopCtrlRef
+          }]
+        }, {
+          on: {
+            'click': this.topCtrlContainerClick
+          }
+        }]),
+        [this.getPlaceholderElement(), innerNode]
+      );
+    },
+    renderArrow: function renderArrow(multiple) {
+      var h = this.$createElement;
+
+      // showArrow : Set to true if not multiple by default but keep set value.
+      //   const { showArrow = !multiple, loading, prefixCls } = this.$props;
+      var _$props4 = this.$props,
+          loading = _$props4.loading,
+          prefixCls = _$props4.prefixCls;
+
+      var inputIcon = getComponentFromProp(this, 'inputIcon');
+      //   if (!showArrow && !loading) {
+      //     return null;
+      //   }
+      // if loading  have loading icon
+      var defaultIcon = loading ? h('i', { 'class': prefixCls + '-arrow-loading' }) : h('i', { 'class': prefixCls + '-arrow-icon' });
+      return h(
+        'span',
+        _mergeJSXProps([{
+          key: 'arrow',
+          'class': prefixCls + '-arrow',
+          style: UNSELECTABLE_STYLE
+        }, { attrs: UNSELECTABLE_ATTRIBUTE }, {
+          on: {
+            'click': this.onArrowClick
+          },
+
+          ref: 'arrow'
+        }]),
+        [inputIcon || defaultIcon]
+      );
+    },
+    topCtrlContainerClick: function topCtrlContainerClick(e) {
+      if (this.$data._open && !isSingleMode(this.$props)) {
+        e.stopPropagation();
+      }
+    },
+    renderClear: function renderClear() {
+      var h = this.$createElement;
+      var _$props5 = this.$props,
+          prefixCls = _$props5.prefixCls,
+          allowClear = _$props5.allowClear;
+      var _$data4 = this.$data,
+          value = _$data4._value,
+          inputValue = _$data4._inputValue;
+
+      var clearIcon = getComponentFromProp(this, 'clearIcon');
+      var clear = h(
+        'span',
+        _mergeJSXProps([{
+          key: 'clear',
+          'class': prefixCls + '-selection__clear',
+          on: {
+            'mousedown': preventDefaultEvent
+          },
+
+          style: UNSELECTABLE_STYLE
+        }, { attrs: UNSELECTABLE_ATTRIBUTE }, {
+          on: {
+            'click': this.onClearSelection
+          }
+        }]),
+        [clearIcon || h(
+          'i',
+          { 'class': prefixCls + '-selection__clear-icon' },
+          ['\xD7']
+        )]
+      );
+      if (!allowClear) {
+        return null;
+      }
+      if (isCombobox(this.$props)) {
+        if (inputValue) {
+          return clear;
+        }
+        return null;
+      }
+      if (inputValue || value.length) {
+        return clear;
+      }
+      return null;
+    },
+    selectionRefClick: function selectionRefClick() {
+      //e.stopPropagation();
+      if (!this.disabled) {
+        var input = this.getInputDOMNode();
+        if (this._focused && this.$data._open) {
+          // this._focused = false;
+          this.setOpenState(false, false);
+          input && input.blur();
+        } else {
+          this.clearBlurTime();
+          //this._focused = true;
+          this.setOpenState(true, true);
+          input && input.focus();
+        }
+      }
+    },
+    selectionRefFocus: function selectionRefFocus(e) {
+      if (this._focused || this.disabled || isMultipleOrTagsOrCombobox(this.$props)) {
+        e.preventDefault();
+        return;
+      }
+      this._focused = true;
+      this.updateFocusClassName();
+      this.$emit('focus');
+    },
+    selectionRefBlur: function selectionRefBlur(e) {
+      if (isMultipleOrTagsOrCombobox(this.$props)) {
+        e.preventDefault();
+        return;
+      }
+      this.inputBlur(e);
+    }
+  },
+
+  render: function render() {
+    var _rootCls;
+
+    var h = arguments[0];
+
+    var props = this.$props;
+    var multiple = isMultipleOrTags(props);
+    // Default set showArrow to true if not set (not set directly in defaultProps to handle multiple case)
+    var _props$showArrow = props.showArrow,
+        showArrow = _props$showArrow === undefined ? true : _props$showArrow;
+
+    var state = this.$data;
+    var disabled = props.disabled,
+        prefixCls = props.prefixCls,
+        loading = props.loading;
+
+    var ctrlNode = this.renderTopControlNode();
+    var _$data5 = this.$data,
+        open = _$data5._open,
+        inputValue = _$data5._inputValue,
+        value = _$data5._value;
+
+    if (open) {
+      var filterOptions = this.renderFilterOptions();
+      this._empty = filterOptions.empty;
+      this._options = filterOptions.options;
+    }
+    var realOpen = this.getRealOpenState();
+    var empty = this._empty;
+    var options = this._options || [];
+
+    var _getListeners = getListeners(this),
+        _getListeners$mouseen = _getListeners.mouseenter,
+        mouseenter = _getListeners$mouseen === undefined ? noop : _getListeners$mouseen,
+        _getListeners$mousele = _getListeners.mouseleave,
+        mouseleave = _getListeners$mousele === undefined ? noop : _getListeners$mousele,
+        _getListeners$popupSc = _getListeners.popupScroll,
+        popupScroll = _getListeners$popupSc === undefined ? noop : _getListeners$popupSc;
+
+    var selectionProps = {
+      props: {},
+      attrs: {
+        role: 'combobox',
+        'aria-autocomplete': 'list',
+        'aria-haspopup': 'true',
+        'aria-expanded': realOpen,
+        'aria-controls': this.$data._ariaId
+      },
+      on: {
+        // click: this.selectionRefClick,
+      },
+      'class': prefixCls + '-selection ' + prefixCls + '-selection--' + (multiple ? 'multiple' : 'single'),
+      // directives: [
+      //   {
+      //     name: 'ant-ref',
+      //     value: this.saveSelectionRef,
+      //   },
+      // ],
+      key: 'selection'
+    };
+    //if (!isMultipleOrTagsOrCombobox(props)) {
+    // selectionProps.on.keydown = this.onKeyDown;
+    // selectionProps.on.focus = this.selectionRefFocus;
+    // selectionProps.on.blur = this.selectionRefBlur;
+    // selectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex;
+    //}
+    var extraSelectionProps = { attrs: { tabIndex: -1 } };
+    if (!isMultipleOrTagsOrCombobox(props)) {
+      extraSelectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex;
+    }
+    var rootCls = (_rootCls = {}, _defineProperty(_rootCls, prefixCls, true), _defineProperty(_rootCls, prefixCls + '-open', open), _defineProperty(_rootCls, prefixCls + '-focused', open || !!this._focused), _defineProperty(_rootCls, prefixCls + '-combobox', isCombobox(props)), _defineProperty(_rootCls, prefixCls + '-disabled', disabled), _defineProperty(_rootCls, prefixCls + '-enabled', !disabled), _defineProperty(_rootCls, prefixCls + '-allow-clear', !!props.allowClear), _defineProperty(_rootCls, prefixCls + '-no-arrow', !showArrow), _defineProperty(_rootCls, prefixCls + '-loading', !!loading), _rootCls);
+    return h(
+      SelectTrigger,
+      _mergeJSXProps([{
+        attrs: {
+          dropdownAlign: props.dropdownAlign,
+          dropdownClassName: 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,
+          empty: empty,
+          multiple: multiple,
+          disabled: disabled,
+          visible: realOpen,
+          inputValue: inputValue,
+          value: value,
+          backfillValue: state._backfillValue,
+          firstActiveValue: props.firstActiveValue,
+
+          getPopupContainer: props.getPopupContainer,
+
+          showAction: props.showAction,
+          menuItemSelectedIcon: getComponentFromProp(this, 'menuItemSelectedIcon')
+        },
+        on: {
+          'dropdownVisibleChange': this.onDropdownVisibleChange,
+          'menuSelect': this.onMenuSelect,
+          'menuDeselect': this.onMenuDeselect,
+          'popupScroll': popupScroll,
+          'popupFocus': this.onPopupFocus,
+          'mouseenter': mouseenter,
+          'mouseleave': mouseleave
+        }
+      }, {
+        directives: [{
+          name: 'ant-ref',
+          value: this.saveSelectTriggerRef
+        }]
+      }, {
+        attrs: {
+          dropdownRender: props.dropdownRender,
+          ariaId: this.$data._ariaId
+        }
+      }]),
+      [h(
+        'div',
+        _mergeJSXProps([{
+          directives: [{
+            name: 'ant-ref',
+            value: chaining(this.saveRootRef, this.saveSelectionRef)
+          }]
+        }, {
+          style: getStyle(this),
+          'class': classnames(rootCls),
+          on: {
+            'mousedown': this.markMouseDown,
+            'mouseup': this.markMouseLeave,
+            'mouseout': this.markMouseLeave
+          }
+        }, extraSelectionProps, {
+          on: {
+            'blur': this.selectionRefBlur,
+            'focus': this.selectionRefFocus,
+            'click': this.selectionRefClick,
+            'keydown': isMultipleOrTagsOrCombobox(props) ? noop : this.onKeyDown
+          }
+        }]),
+        [h(
+          'div',
+          selectionProps,
+          [ctrlNode, this.renderClear(), this.renderArrow(!!multiple)]
+        )]
+      )]
+    );
+  }
+};
+export { Select };
+export default proxyComponent(Select);