From 414e7a1c56455017dbc3780ce7b1b4abd0f1c4d7 Mon Sep 17 00:00:00 2001 From: bqy_fe <1743369777@qq.com> Date: Sun, 20 Mar 2022 10:50:57 +0800 Subject: [PATCH] fix: autocomplete custom children class not work * refactor(v3/vc-selector/input): use composition api * fix: change input props className to class * revert with cloneElement * fix: auto-complete demo custom test --- components/_util/EventInterface.ts | 4 + .../__tests__/__snapshots__/demo.test.js.snap | 2 +- components/vc-select/Selector/Input.tsx | 315 +++++++++--------- 3 files changed, 155 insertions(+), 166 deletions(-) diff --git a/components/_util/EventInterface.ts b/components/_util/EventInterface.ts index 7d6f193c98..f8990a0466 100644 --- a/components/_util/EventInterface.ts +++ b/components/_util/EventInterface.ts @@ -1,6 +1,10 @@ export type FocusEventHandler = (e: FocusEvent) => void; export type MouseEventHandler = (e: MouseEvent) => void; export type KeyboardEventHandler = (e: KeyboardEvent) => void; +export type CompositionEventHandler = (e: CompositionEvent) => void; +export type ClipboardEventHandler = (e: ClipboardEvent) => void; +export type ChangeEventHandler = (e: ChangeEvent) => void; + export type ChangeEvent = Event & { target: { value?: string | undefined; diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap index 878cf2ec9b..144a17df31 100644 --- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap +++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap @@ -30,7 +30,7 @@ exports[`renders ./components/auto-complete/demo/custom.vue correctly 1`] = `
-
+
diff --git a/components/vc-select/Selector/Input.tsx b/components/vc-select/Selector/Input.tsx index d60a2519bd..bad13eb671 100644 --- a/components/vc-select/Selector/Input.tsx +++ b/components/vc-select/Selector/Input.tsx @@ -1,66 +1,53 @@ import { cloneElement } from '../../_util/vnode'; -import type { VNode } from 'vue'; +import type { ExtractPropTypes, PropType, VNode } from 'vue'; import { defineComponent, getCurrentInstance, inject, onMounted, withDirectives } from 'vue'; import PropTypes from '../../_util/vue-types'; -import type { RefObject } from '../../_util/createRef'; import antInput from '../../_util/antInputDirective'; import classNames from '../../_util/classNames'; -import type { EventHandler } from '../../_util/EventInterface'; -import type { VueNode } from '../../_util/type'; +import type { + FocusEventHandler, + KeyboardEventHandler, + MouseEventHandler, + ChangeEventHandler, + CompositionEventHandler, + ClipboardEventHandler, +} from '../../_util/EventInterface'; -interface InputProps { - prefixCls: string; - id: string; - inputElement: VueNode; - disabled: boolean; - autofocus: boolean; - autocomplete: string; - editable: boolean; - activeDescendantId?: string; - value: string; - open: boolean; - tabindex: number | string; +export const inputProps = { + inputRef: PropTypes.any, + prefixCls: PropTypes.string, + id: PropTypes.string, + inputElement: PropTypes.VueNode, + disabled: PropTypes.looseBool, + autofocus: PropTypes.looseBool, + autocomplete: PropTypes.string, + editable: PropTypes.looseBool, + activeDescendantId: PropTypes.string, + value: PropTypes.string, + open: PropTypes.looseBool, + tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** Pass accessibility props to input */ - attrs: object; - inputRef: RefObject; - onKeydown: EventHandler; - onMousedown: EventHandler; - onChange: EventHandler; - onPaste: EventHandler; - onCompositionstart: EventHandler; - onCompositionend: EventHandler; - onFocus: EventHandler; - onBlur: EventHandler; -} + attrs: PropTypes.object, + onKeydown: { type: Function as PropType }, + onMousedown: { type: Function as PropType }, + onChange: { type: Function as PropType }, + onPaste: { type: Function as PropType }, + onCompositionstart: { type: Function as PropType }, + onCompositionend: { type: Function as PropType }, + onFocus: { type: Function as PropType }, + onBlur: { type: Function as PropType }, +}; + +export type InputProps = Partial>; const Input = defineComponent({ name: 'Input', inheritAttrs: false, - props: { - inputRef: PropTypes.any, - prefixCls: PropTypes.string, - id: PropTypes.string, - inputElement: PropTypes.any, - disabled: PropTypes.looseBool, - autofocus: PropTypes.looseBool, - autocomplete: PropTypes.string, - editable: PropTypes.looseBool, - activeDescendantId: PropTypes.string, - value: PropTypes.string, - open: PropTypes.looseBool, - tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** Pass accessibility props to input */ - attrs: PropTypes.object, - onKeydown: PropTypes.func, - onMousedown: PropTypes.func, - onChange: PropTypes.func, - onPaste: PropTypes.func, - onCompositionstart: PropTypes.func, - onCompositionend: PropTypes.func, - onFocus: PropTypes.func, - onBlur: PropTypes.func, - }, + props: inputProps, setup(props) { + let blurTimeout = null; + const VCSelectContainerEvent = inject('VCSelectContainerEvent') as any; + if (process.env.NODE_ENV === 'test') { onMounted(() => { const ins = getCurrentInstance(); @@ -71,122 +58,120 @@ const Input = defineComponent({ } }); } - return { - blurTimeout: null, - VCSelectContainerEvent: inject('VCSelectContainerEvent') as any, - }; - }, - render() { - const { - prefixCls, - id, - inputElement, - disabled, - tabindex, - autofocus, - autocomplete, - editable, - activeDescendantId, - value, - onKeydown, - onMousedown, - onChange, - onPaste, - onCompositionstart, - onCompositionend, - onFocus, - onBlur, - open, - inputRef, - attrs, - } = this.$props as InputProps; - let inputNode: any = inputElement || withDirectives(() as VNode, [[antInput]]); - const inputProps = inputNode.props || {}; - const { - onKeydown: onOriginKeyDown, - onInput: onOriginInput, - onFocus: onOriginFocus, - onBlur: onOriginBlur, - onMousedown: onOriginMouseDown, - onCompositionstart: onOriginCompositionStart, - onCompositionend: onOriginCompositionEnd, - style, - } = inputProps; - inputNode = cloneElement( - inputNode, - Object.assign( - { - id, - ref: inputRef, - disabled, - tabindex, - autocomplete: autocomplete || 'off', - autofocus, - class: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.className), - style: { ...style, opacity: editable ? null : 0 }, - role: 'combobox', - 'aria-expanded': open, - 'aria-haspopup': 'listbox', - 'aria-owns': `${id}_list`, - 'aria-autocomplete': 'list', - 'aria-controls': `${id}_list`, - 'aria-activedescendant': activeDescendantId, - ...attrs, - value: editable ? value : '', - readonly: !editable, - unselectable: !editable ? 'on' : null, - onKeydown: (event: KeyboardEvent) => { - onKeydown(event); - if (onOriginKeyDown) { - onOriginKeyDown(event); - } - }, - onMousedown: (event: MouseEvent) => { - onMousedown(event); - if (onOriginMouseDown) { - onOriginMouseDown(event); - } - }, - onInput: (event: Event) => { - onChange(event); - if (onOriginInput) { - onOriginInput(event); - } - }, - onCompositionstart(event: CompositionEvent) { - onCompositionstart(event); - if (onOriginCompositionStart) { - onOriginCompositionStart(event); - } - }, - onCompositionend(event: CompositionEvent) { - onCompositionend(event); - if (onOriginCompositionEnd) { - onOriginCompositionEnd(event); - } - }, - onPaste, - onFocus: (...args: any[]) => { - clearTimeout(this.blurTimeout); - onOriginFocus && onOriginFocus(args[0]); - onFocus && onFocus(args[0]); - this.VCSelectContainerEvent?.focus(args[0]); - }, - onBlur: (...args: any[]) => { - this.blurTimeout = setTimeout(() => { - onOriginBlur && onOriginBlur(args[0]); - onBlur && onBlur(args[0]); - this.VCSelectContainerEvent?.blur(args[0]); - }, 100); + return () => { + const { + prefixCls, + id, + inputElement, + disabled, + tabindex, + autofocus, + autocomplete, + editable, + activeDescendantId, + value, + onKeydown, + onMousedown, + onChange, + onPaste, + onCompositionstart, + onCompositionend, + onFocus, + onBlur, + open, + inputRef, + attrs, + } = props; + + let inputNode: any = inputElement || withDirectives(() as VNode, [[antInput]]); + + const inputProps = inputNode.props || {}; + const { + onKeydown: onOriginKeyDown, + onInput: onOriginInput, + onFocus: onOriginFocus, + onBlur: onOriginBlur, + onMousedown: onOriginMouseDown, + onCompositionstart: onOriginCompositionStart, + onCompositionend: onOriginCompositionEnd, + style, + } = inputProps; + inputNode = cloneElement( + inputNode, + Object.assign( + { + id, + ref: inputRef, + disabled, + tabindex, + autocomplete: autocomplete || 'off', + autofocus, + class: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.class), + style: { ...style, opacity: editable ? null : 0 }, + role: 'combobox', + 'aria-expanded': open, + 'aria-haspopup': 'listbox', + 'aria-owns': `${id}_list`, + 'aria-autocomplete': 'list', + 'aria-controls': `${id}_list`, + 'aria-activedescendant': activeDescendantId, + ...attrs, + value: editable ? value : '', + readonly: !editable, + unselectable: !editable ? 'on' : null, + onKeydown: (event: KeyboardEvent) => { + onKeydown(event); + if (onOriginKeyDown) { + onOriginKeyDown(event); + } + }, + onMousedown: (event: MouseEvent) => { + onMousedown(event); + if (onOriginMouseDown) { + onOriginMouseDown(event); + } + }, + onInput: (event: Event) => { + onChange(event); + if (onOriginInput) { + onOriginInput(event); + } + }, + onCompositionstart(event: CompositionEvent) { + onCompositionstart(event); + if (onOriginCompositionStart) { + onOriginCompositionStart(event); + } + }, + onCompositionend(event: CompositionEvent) { + onCompositionend(event); + if (onOriginCompositionEnd) { + onOriginCompositionEnd(event); + } + }, + onPaste, + onFocus: (...args: any[]) => { + clearTimeout(blurTimeout); + onOriginFocus && onOriginFocus(args[0]); + onFocus && onFocus(args[0]); + VCSelectContainerEvent?.focus(args[0]); + }, + onBlur: (...args: any[]) => { + blurTimeout = setTimeout(() => { + onOriginBlur && onOriginBlur(args[0]); + onBlur && onBlur(args[0]); + VCSelectContainerEvent?.blur(args[0]); + }, 100); + }, }, - }, - inputNode.type === 'textarea' ? {} : { type: 'search' }, - ), - true, - true, - ) as VNode; - return inputNode; + inputNode.type === 'textarea' ? {} : { type: 'search' }, + ), + true, + true, + ) as VNode; + return inputNode; + }; }, });