fix select custom event bug

components/auto-complete/InputElement.vue

@@ -1,6 +1,16 @@
 <script>
 import PropTypes from '../_util/vue-types'
-import { cloneElement } from '../_util/vnode'
+import { cloneElement, cloneVNode } from '../_util/vnode'
+function chaining (...fns) {
+  return function (...args) { // eslint-disable-line
+    // eslint-disable-line
+    for (let i = 0; i < fns.length; i++) {
+      if (fns[i] && typeof fns[i] === 'function') {
+        fns[i].apply(this, args)
+      }
+    }
+  }
+}
 export default {
   props: {
     value: PropTypes.any,
@@ -21,12 +31,21 @@ export default {
   render () {
     const { $slots = {}, $listeners = {}, $props = {}, $attrs = {}} = this
     const value = $props.value === undefined ? '' : $props.value
-    return cloneElement($slots.default[0], {
+    const children = cloneVNode($slots.default[0])
+    const { componentOptions = {}} = $slots.default[0]
+    const { listeners = {}} = componentOptions
+    const newEvent = { ...listeners }
+
+    for (const [eventName, event] of Object.entries($listeners)) {
+      newEvent[eventName] = chaining(event, listeners[eventName])
+    }
+
+    return cloneElement(children, {
       domProps: {
         value,
       },
       props: $props,
-      on: $listeners,
+      on: newEvent,
       attrs: { ...$attrs, value },
       ref: 'ele',
     })

components/auto-complete/demo/custom.md

@@ -21,7 +21,7 @@ Customize Input Component
       placeholder="input here"
       class="custom"
       style="height: 50px"
-      @keydown="handleKeyPress"
+      @keypress="handleKeyPress"
     />
   </a-auto-complete>
 </template>

components/auto-complete/index.vue

@@ -56,13 +56,8 @@ export default {
       const { $slots } = this
       const children = filterEmpty($slots.default)
       const element = children.length ? children[0] : <Input />
-      const { componentOptions = {}} = element
-      const { listeners = {}} = componentOptions
-      const elementProps = {
-        on: listeners,
-      }
       return (
-        <InputElement {...elementProps}>{element}</InputElement>
+        <InputElement>{element}</InputElement>
       )
     },
 

components/vc-select/Select.vue

@@ -8,7 +8,7 @@ import warning from 'warning'
 import Option from './Option'
 import { hasProp, getSlotOptions, getPropsData, getValueByProp as getValue, getComponentFromProp, getEvents, getClass } from '../_util/props-util'
 import getTransitionProps from '../_util/getTransitionProps'
-import { cloneElement, cloneVNode } from '../_util/vnode'
+import { cloneElement } from '../_util/vnode'
 import BaseMixin from '../_util/BaseMixin'
 import {
   getPropValue,
@@ -707,9 +707,7 @@ export default {
       const inputCls = classnames(getClass(inputElement), {
         [`${props.prefixCls}-search__field`]: true,
       })
-      // const inputElement = cloneVNode(inputElement, true)
       const inputEvents = getEvents(inputElement)
-      console.log(inputElement, this.inputValue)
       // 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 || {}
@@ -734,20 +732,20 @@ export default {
               input: this.onInputChange,
               keydown: chaining(
                 this.onInputKeydown,
-                inputEvents.keydown || noop,
+                inputEvents.keydown,
                 this.$listeners.inputKeydown
               ),
               focus: chaining(
                 this.inputFocus,
-                inputEvents.focus || noop,
+                inputEvents.focus,
               ),
               blur: chaining(
                 this.inputBlur,
-                inputEvents.blur || noop,
+                inputEvents.blur,
               ),
               click: chaining(
                 this.inputClick,
-                inputEvents.click || noop,
+                inputEvents.click,
               ),
             },
           })}