fix

components/vc-select/DropdownMenu.vue

@@ -3,18 +3,22 @@ import PropTypes from '../_util/vue-types'
 import toArray from 'rc-util/lib/Children/toArray'
 import Menu from '../vc-menu'
 import scrollIntoView from 'dom-scroll-into-view'
-import { getSelectKeys, preventDefaultEvent, saveRef } from './util'
+import { getSelectKeys, preventDefaultEvent } from './util'
+import { cloneElement } from '../_util/vnode'
+import BaseMixin from '../_util/BaseMixin'
 
 export default {
+  name: 'DropdownMenu',
+  mixins: [BaseMixin],
   props: {
     defaultActiveFirstOption: PropTypes.bool,
     value: PropTypes.any,
     dropdownMenuStyle: PropTypes.object,
     multiple: PropTypes.bool,
-    onPopupFocus: PropTypes.func,
+    // onPopupFocus: PropTypes.func,
-    onPopupScroll: PropTypes.func,
+    // onPopupScroll: PropTypes.func,
-    onMenuDeSelect: PropTypes.func,
+    // onMenuDeSelect: PropTypes.func,
-    onMenuSelect: PropTypes.func,
+    // onMenuSelect: PropTypes.func,
     prefixCls: PropTypes.string,
     menuItems: PropTypes.any,
     inputValue: PropTypes.string,
@@ -84,27 +88,37 @@ export default {
     },
 
     renderMenu () {
-      const props = this.props
+      const props = this.$props
       const {
         menuItems,
         defaultActiveFirstOption,
         value,
         prefixCls,
         multiple,
-        onMenuSelect,
         inputValue,
         firstActiveValue,
+        dropdownMenuStyle,
       } = props
       if (menuItems && menuItems.length) {
-        const menuProps = {}
-        if (multiple) {
-          menuProps.onDeselect = props.onMenuDeselect
-          menuProps.onSelect = onMenuSelect
-        } else {
-          menuProps.onClick = onMenuSelect
-        }
-
         const selectedKeys = getSelectKeys(menuItems, value)
+        const menuProps = {
+          props: {
+            multiple,
+            defaultActiveFirst: defaultActiveFirstOption,
+            focusable: false,
+            selectedKeys,
+            prefixCls: `${prefixCls}-menu`,
+          },
+          on: {},
+          style: dropdownMenuStyle,
+          ref: 'menuRef',
+        }
+        if (multiple) {
+          menuProps.on.deselect = this.onMenuDeselect
+          menuProps.on.select = this.onMenuSelect
+        } else {
+          menuProps.on.click = this.onMenuSelect
+        }
         const activeKeyProps = {}
 
         let clonedMenuItems = menuItems
@@ -124,9 +138,7 @@ export default {
             ) {
               foundFirst = true
               return cloneElement(item, {
-                ref: ref => {
+                ref: 'firstActiveItem',
-                  this.firstActiveItem = ref
-                },
               })
             }
             return item
@@ -146,34 +158,36 @@ export default {
         if (inputValue !== this.lastInputValue && (!lastValue || !lastValue.backfill)) {
           activeKeyProps.activeKey = ''
         }
-
+        menuProps.props = { ...menuProps.props, ...activeKeyProps }
         return (
-          <Menu
+          <Menu {...menuProps}>
-            ref={saveRef(this, 'menuRef')}
-            style={this.props.dropdownMenuStyle}
-            defaultActiveFirst={defaultActiveFirstOption}
-            {...activeKeyProps}
-            multiple={multiple}
-            focusable={false}
-            {...menuProps}
-            selectedKeys={selectedKeys}
-            prefixCls={`${prefixCls}-menu`}
-          >
             {clonedMenuItems}
           </Menu>
         )
       }
       return null
     },
+    onPopupFocus (e) {
+      this.__emit('popupFocus', e)
+    },
+    onPopupScroll (e) {
+      this.__emit('popupScroll', e)
+    },
+    onMenuDeselect () {
+      this.__emit('menuDeselect', ...arguments)
+    },
+    onMenuSelect () {
+      this.__emit('menuSelect', ...arguments)
+    },
   },
   render () {
     const renderMenu = this.renderMenu()
     return renderMenu ? (
       <div
         style={{ overflow: 'auto' }}
-        onFocus={this.props.onPopupFocus}
+        onFocus={this.onPopupFocus}
-        onMouseDown={preventDefaultEvent}
+        onMousedown={preventDefaultEvent}
-        onScroll={this.props.onPopupScroll}
+        onScroll={this.onPopupScroll}
       >
         {renderMenu}
       </div>
@@ -181,6 +195,4 @@ export default {
   },
 }
 
-DropdownMenu.displayName = 'DropdownMenu'
-
 </script>

components/vc-select/util.js

@@ -157,9 +157,3 @@ export function validateOptionValue (value, props) {
     )
   }
 }
-
-export function saveRef (instance, name) {
-  return (node) => {
-    instance[name] = node
-  }
-}