fix: select drop-down option displays an exception for #970

components/vc-select/DropdownMenu.jsx

@@ -107,7 +107,6 @@ export default {
         const menuProps = {
           props: {
             multiple,
-            defaultActiveFirst: defaultActiveFirstOption,
             itemIcon: multiple ? menuItemSelectedIcon : null,
             selectedKeys,
             prefixCls: `${prefixCls}-menu`,
@@ -131,11 +130,15 @@ export default {
         const activeKeyProps = {};
 
         let clonedMenuItems = menuItems;
+        let defaultActiveFirst = defaultActiveFirstOption;
         if (selectedKeys.length || firstActiveValue) {
           if (props.visible && !this.lastVisible) {
-            activeKeyProps.activeKey =
-              selectedKeys[0] !== undefined ? selectedKeys[0] : firstActiveValue;
+            activeKeyProps.activeKey = selectedKeys[0] || firstActiveValue;;
           } else if (!visible) {
+            // Do not trigger auto active since we already have selectedKeys
+            if (selectedKeys[0]) {
+              defaultActiveFirst = false;
+            }
             activeKeyProps.activeKey = undefined;
           }
           let foundFirst = false;
@@ -180,7 +183,7 @@ export default {
         if (inputValue !== this.lastInputValue && (!lastValue || lastValue !== backfillValue)) {
           activeKeyProps.activeKey = '';
         }
-        menuProps.props = { ...activeKeyProps, ...menuProps.props };
+        menuProps.props = { ...activeKeyProps, ...menuProps.props, ...{defaultActiveFirst} };
         return <Menu {...menuProps}>{clonedMenuItems}</Menu>;
       }
       return null;

site/dev.js

@@ -12,7 +12,7 @@ import Api from './components/api';
 import './components';
 import demoBox from './components/demoBox';
 import demoContainer from './components/demoContainer';
-import Test from '../components/date-picker/demo/index.vue';
+import Test from '../components/test/index.vue';
 import zhCN from './theme/zh-CN';
 import enUS from './theme/en-US';
 Vue.use(Vuex);