Skip to content

Commit 414e7a1

Browse files
buqiyuanbuqiyuan
authored
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
1 parent c863385 commit 414e7a1

File tree

3 files changed

+155
-166
lines changed

3 files changed

+155
-166
lines changed

‎components/_util/EventInterface.ts

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
export type FocusEventHandler = (e: FocusEvent) => void;
22
export type MouseEventHandler = (e: MouseEvent) => void;
33
export type KeyboardEventHandler = (e: KeyboardEvent) => void;
4+
export type CompositionEventHandler = (e: CompositionEvent) => void;
5+
export type ClipboardEventHandler = (e: ClipboardEvent) => void;
6+
export type ChangeEventHandler = (e: ChangeEvent) => void;
7+
48
export type ChangeEvent = Event & {
59
target: {
610
value?: string | undefined;

‎components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ exports[`renders ./components/auto-complete/demo/custom.vue correctly 1`] = `
3030
<div style="width: 200px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search">
3131
<!---->
3232
<!---->
33-
<div class="ant-select-selector"><span class="ant-select-selection-search"><textarea placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-input ant-select-selection-search-input" style="height: 50px;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"></textarea></span>
33+
<div class="ant-select-selector"><span class="ant-select-selection-search"><textarea placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-input ant-select-selection-search-input custom" style="height: 50px;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"></textarea></span>
3434
<!----><span class="ant-select-selection-placeholder"><!----></span>
3535
</div>
3636
<!---->

‎components/vc-select/Selector/Input.tsx

+150-165
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,53 @@
11
import { cloneElement } from '../../_util/vnode';
2-
import type { VNode } from 'vue';
2+
import type { ExtractPropTypes, PropType, VNode } from 'vue';
33
import { defineComponent, getCurrentInstance, inject, onMounted, withDirectives } from 'vue';
44
import PropTypes from '../../_util/vue-types';
5-
import type { RefObject } from '../../_util/createRef';
65
import antInput from '../../_util/antInputDirective';
76
import classNames from '../../_util/classNames';
8-
import type { EventHandler } from '../../_util/EventInterface';
9-
import type { VueNode } from '../../_util/type';
7+
import type {
8+
FocusEventHandler,
9+
KeyboardEventHandler,
10+
MouseEventHandler,
11+
ChangeEventHandler,
12+
CompositionEventHandler,
13+
ClipboardEventHandler,
14+
} from '../../_util/EventInterface';
1015

11-
interface InputProps {
12-
prefixCls: string;
13-
id: string;
14-
inputElement: VueNode;
15-
disabled: boolean;
16-
autofocus: boolean;
17-
autocomplete: string;
18-
editable: boolean;
19-
activeDescendantId?: string;
20-
value: string;
21-
open: boolean;
22-
tabindex: number | string;
16+
export const inputProps = {
17+
inputRef: PropTypes.any,
18+
prefixCls: PropTypes.string,
19+
id: PropTypes.string,
20+
inputElement: PropTypes.VueNode,
21+
disabled: PropTypes.looseBool,
22+
autofocus: PropTypes.looseBool,
23+
autocomplete: PropTypes.string,
24+
editable: PropTypes.looseBool,
25+
activeDescendantId: PropTypes.string,
26+
value: PropTypes.string,
27+
open: PropTypes.looseBool,
28+
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
2329
/** Pass accessibility props to input */
24-
attrs: object;
25-
inputRef: RefObject;
26-
onKeydown: EventHandler;
27-
onMousedown: EventHandler;
28-
onChange: EventHandler;
29-
onPaste: EventHandler;
30-
onCompositionstart: EventHandler;
31-
onCompositionend: EventHandler;
32-
onFocus: EventHandler;
33-
onBlur: EventHandler;
34-
}
30+
attrs: PropTypes.object,
31+
onKeydown: { type: Function as PropType<KeyboardEventHandler> },
32+
onMousedown: { type: Function as PropType<MouseEventHandler> },
33+
onChange: { type: Function as PropType<ChangeEventHandler> },
34+
onPaste: { type: Function as PropType<ClipboardEventHandler> },
35+
onCompositionstart: { type: Function as PropType<CompositionEventHandler> },
36+
onCompositionend: { type: Function as PropType<CompositionEventHandler> },
37+
onFocus: { type: Function as PropType<FocusEventHandler> },
38+
onBlur: { type: Function as PropType<FocusEventHandler> },
39+
};
40+
41+
export type InputProps = Partial<ExtractPropTypes<typeof inputProps>>;
3542

3643
const Input = defineComponent({
3744
name: 'Input',
3845
inheritAttrs: false,
39-
props: {
40-
inputRef: PropTypes.any,
41-
prefixCls: PropTypes.string,
42-
id: PropTypes.string,
43-
inputElement: PropTypes.any,
44-
disabled: PropTypes.looseBool,
45-
autofocus: PropTypes.looseBool,
46-
autocomplete: PropTypes.string,
47-
editable: PropTypes.looseBool,
48-
activeDescendantId: PropTypes.string,
49-
value: PropTypes.string,
50-
open: PropTypes.looseBool,
51-
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
52-
/** Pass accessibility props to input */
53-
attrs: PropTypes.object,
54-
onKeydown: PropTypes.func,
55-
onMousedown: PropTypes.func,
56-
onChange: PropTypes.func,
57-
onPaste: PropTypes.func,
58-
onCompositionstart: PropTypes.func,
59-
onCompositionend: PropTypes.func,
60-
onFocus: PropTypes.func,
61-
onBlur: PropTypes.func,
62-
},
46+
props: inputProps,
6347
setup(props) {
48+
let blurTimeout = null;
49+
const VCSelectContainerEvent = inject('VCSelectContainerEvent') as any;
50+
6451
if (process.env.NODE_ENV === 'test') {
6552
onMounted(() => {
6653
const ins = getCurrentInstance();
@@ -71,122 +58,120 @@ const Input = defineComponent({
7158
}
7259
});
7360
}
74-
return {
75-
blurTimeout: null,
76-
VCSelectContainerEvent: inject('VCSelectContainerEvent') as any,
77-
};
78-
},
79-
render() {
80-
const {
81-
prefixCls,
82-
id,
83-
inputElement,
84-
disabled,
85-
tabindex,
86-
autofocus,
87-
autocomplete,
88-
editable,
89-
activeDescendantId,
90-
value,
91-
onKeydown,
92-
onMousedown,
93-
onChange,
94-
onPaste,
95-
onCompositionstart,
96-
onCompositionend,
97-
onFocus,
98-
onBlur,
99-
open,
100-
inputRef,
101-
attrs,
102-
} = this.$props as InputProps;
103-
let inputNode: any = inputElement || withDirectives((<input />) as VNode, [[antInput]]);
10461

105-
const inputProps = inputNode.props || {};
106-
const {
107-
onKeydown: onOriginKeyDown,
108-
onInput: onOriginInput,
109-
onFocus: onOriginFocus,
110-
onBlur: onOriginBlur,
111-
onMousedown: onOriginMouseDown,
112-
onCompositionstart: onOriginCompositionStart,
113-
onCompositionend: onOriginCompositionEnd,
114-
style,
115-
} = inputProps;
116-
inputNode = cloneElement(
117-
inputNode,
118-
Object.assign(
119-
{
120-
id,
121-
ref: inputRef,
122-
disabled,
123-
tabindex,
124-
autocomplete: autocomplete || 'off',
125-
autofocus,
126-
class: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.className),
127-
style: { ...style, opacity: editable ? null : 0 },
128-
role: 'combobox',
129-
'aria-expanded': open,
130-
'aria-haspopup': 'listbox',
131-
'aria-owns': `${id}_list`,
132-
'aria-autocomplete': 'list',
133-
'aria-controls': `${id}_list`,
134-
'aria-activedescendant': activeDescendantId,
135-
...attrs,
136-
value: editable ? value : '',
137-
readonly: !editable,
138-
unselectable: !editable ? 'on' : null,
139-
onKeydown: (event: KeyboardEvent) => {
140-
onKeydown(event);
141-
if (onOriginKeyDown) {
142-
onOriginKeyDown(event);
143-
}
144-
},
145-
onMousedown: (event: MouseEvent) => {
146-
onMousedown(event);
147-
if (onOriginMouseDown) {
148-
onOriginMouseDown(event);
149-
}
150-
},
151-
onInput: (event: Event) => {
152-
onChange(event);
153-
if (onOriginInput) {
154-
onOriginInput(event);
155-
}
156-
},
157-
onCompositionstart(event: CompositionEvent) {
158-
onCompositionstart(event);
159-
if (onOriginCompositionStart) {
160-
onOriginCompositionStart(event);
161-
}
162-
},
163-
onCompositionend(event: CompositionEvent) {
164-
onCompositionend(event);
165-
if (onOriginCompositionEnd) {
166-
onOriginCompositionEnd(event);
167-
}
168-
},
169-
onPaste,
170-
onFocus: (...args: any[]) => {
171-
clearTimeout(this.blurTimeout);
172-
onOriginFocus && onOriginFocus(args[0]);
173-
onFocus && onFocus(args[0]);
174-
this.VCSelectContainerEvent?.focus(args[0]);
175-
},
176-
onBlur: (...args: any[]) => {
177-
this.blurTimeout = setTimeout(() => {
178-
onOriginBlur && onOriginBlur(args[0]);
179-
onBlur && onBlur(args[0]);
180-
this.VCSelectContainerEvent?.blur(args[0]);
181-
}, 100);
62+
return () => {
63+
const {
64+
prefixCls,
65+
id,
66+
inputElement,
67+
disabled,
68+
tabindex,
69+
autofocus,
70+
autocomplete,
71+
editable,
72+
activeDescendantId,
73+
value,
74+
onKeydown,
75+
onMousedown,
76+
onChange,
77+
onPaste,
78+
onCompositionstart,
79+
onCompositionend,
80+
onFocus,
81+
onBlur,
82+
open,
83+
inputRef,
84+
attrs,
85+
} = props;
86+
87+
let inputNode: any = inputElement || withDirectives((<input />) as VNode, [[antInput]]);
88+
89+
const inputProps = inputNode.props || {};
90+
const {
91+
onKeydown: onOriginKeyDown,
92+
onInput: onOriginInput,
93+
onFocus: onOriginFocus,
94+
onBlur: onOriginBlur,
95+
onMousedown: onOriginMouseDown,
96+
onCompositionstart: onOriginCompositionStart,
97+
onCompositionend: onOriginCompositionEnd,
98+
style,
99+
} = inputProps;
100+
inputNode = cloneElement(
101+
inputNode,
102+
Object.assign(
103+
{
104+
id,
105+
ref: inputRef,
106+
disabled,
107+
tabindex,
108+
autocomplete: autocomplete || 'off',
109+
autofocus,
110+
class: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.class),
111+
style: { ...style, opacity: editable ? null : 0 },
112+
role: 'combobox',
113+
'aria-expanded': open,
114+
'aria-haspopup': 'listbox',
115+
'aria-owns': `${id}_list`,
116+
'aria-autocomplete': 'list',
117+
'aria-controls': `${id}_list`,
118+
'aria-activedescendant': activeDescendantId,
119+
...attrs,
120+
value: editable ? value : '',
121+
readonly: !editable,
122+
unselectable: !editable ? 'on' : null,
123+
onKeydown: (event: KeyboardEvent) => {
124+
onKeydown(event);
125+
if (onOriginKeyDown) {
126+
onOriginKeyDown(event);
127+
}
128+
},
129+
onMousedown: (event: MouseEvent) => {
130+
onMousedown(event);
131+
if (onOriginMouseDown) {
132+
onOriginMouseDown(event);
133+
}
134+
},
135+
onInput: (event: Event) => {
136+
onChange(event);
137+
if (onOriginInput) {
138+
onOriginInput(event);
139+
}
140+
},
141+
onCompositionstart(event: CompositionEvent) {
142+
onCompositionstart(event);
143+
if (onOriginCompositionStart) {
144+
onOriginCompositionStart(event);
145+
}
146+
},
147+
onCompositionend(event: CompositionEvent) {
148+
onCompositionend(event);
149+
if (onOriginCompositionEnd) {
150+
onOriginCompositionEnd(event);
151+
}
152+
},
153+
onPaste,
154+
onFocus: (...args: any[]) => {
155+
clearTimeout(blurTimeout);
156+
onOriginFocus && onOriginFocus(args[0]);
157+
onFocus && onFocus(args[0]);
158+
VCSelectContainerEvent?.focus(args[0]);
159+
},
160+
onBlur: (...args: any[]) => {
161+
blurTimeout = setTimeout(() => {
162+
onOriginBlur && onOriginBlur(args[0]);
163+
onBlur && onBlur(args[0]);
164+
VCSelectContainerEvent?.blur(args[0]);
165+
}, 100);
166+
},
182167
},
183-
},
184-
inputNode.type === 'textarea' ? {} : { type: 'search' },
185-
),
186-
true,
187-
true,
188-
) as VNode;
189-
return inputNode;
168+
inputNode.type === 'textarea' ? {} : { type: 'search' },
169+
),
170+
true,
171+
true,
172+
) as VNode;
173+
return inputNode;
174+
};
190175
},
191176
});
192177

0 commit comments

Comments
 (0)