diff --git a/components/auto-complete/InputElement.vue b/components/auto-complete/InputElement.vue index 6255b5fac..43c34f2e3 100644 --- a/components/auto-complete/InputElement.vue +++ b/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', }) diff --git a/components/auto-complete/demo/custom.md b/components/auto-complete/demo/custom.md index a1916f9cc..554dbcecd 100644 --- a/components/auto-complete/demo/custom.md +++ b/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> diff --git a/components/auto-complete/index.vue b/components/auto-complete/index.vue index f947dd6b1..9fb89aef1 100644 --- a/components/auto-complete/index.vue +++ b/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> ) }, diff --git a/components/vc-select/Select.vue b/components/vc-select/Select.vue index 096dfeaf6..e83316e68 100644 --- a/components/vc-select/Select.vue +++ b/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, ), }, })}