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

@@ -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;

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

@@ -30,7 +30,7 @@ exports[`renders ./components/auto-complete/demo/custom.vue correctly 1`] = `
 <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">
   <!---->
   <!---->
-  <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>
+  <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>
     <!----><span class="ant-select-selection-placeholder"><!----></span>
   </div>
   <!---->

components/vc-select/Selector/Input.tsx

@@ -1,46 +1,23 @@
 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;
-  /** 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;
-}
-
-const Input = defineComponent({
-  name: 'Input',
-  inheritAttrs: false,
-  props: {
+export const inputProps = {
   inputRef: PropTypes.any,
   prefixCls: PropTypes.string,
   id: PropTypes.string,
-    inputElement: PropTypes.any,
+  inputElement: PropTypes.VueNode,
   disabled: PropTypes.looseBool,
   autofocus: PropTypes.looseBool,
   autocomplete: PropTypes.string,
@@ -51,16 +28,26 @@ const Input = defineComponent({
   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,
-  },
+  onKeydown: { type: Function as PropType<KeyboardEventHandler> },
+  onMousedown: { type: Function as PropType<MouseEventHandler> },
+  onChange: { type: Function as PropType<ChangeEventHandler> },
+  onPaste: { type: Function as PropType<ClipboardEventHandler> },
+  onCompositionstart: { type: Function as PropType<CompositionEventHandler> },
+  onCompositionend: { type: Function as PropType<CompositionEventHandler> },
+  onFocus: { type: Function as PropType<FocusEventHandler> },
+  onBlur: { type: Function as PropType<FocusEventHandler> },
+};
+
+export type InputProps = Partial<ExtractPropTypes<typeof inputProps>>;
+
+const Input = defineComponent({
+  name: 'Input',
+  inheritAttrs: false,
+  props: inputProps,
   setup(props) {
+    let blurTimeout = null;
+    const VCSelectContainerEvent = inject('VCSelectContainerEvent') as any;
+
     if (process.env.NODE_ENV === 'test') {
       onMounted(() => {
         const ins = getCurrentInstance();
@@ -71,12 +58,8 @@ const Input = defineComponent({
         }
       });
     }
-    return {
-      blurTimeout: null,
-      VCSelectContainerEvent: inject('VCSelectContainerEvent') as any,
-    };
-  },
-  render() {
+
+    return () => {
       const {
         prefixCls,
         id,
@@ -99,7 +82,8 @@ const Input = defineComponent({
         open,
         inputRef,
         attrs,
-    } = this.$props as InputProps;
+      } = props;
+
       let inputNode: any = inputElement || withDirectives((<input />) as VNode, [[antInput]]);
 
       const inputProps = inputNode.props || {};
@@ -123,7 +107,7 @@ const Input = defineComponent({
             tabindex,
             autocomplete: autocomplete || 'off',
             autofocus,
-          class: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.className),
+            class: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.class),
             style: { ...style, opacity: editable ? null : 0 },
             role: 'combobox',
             'aria-expanded': open,
@@ -168,16 +152,16 @@ const Input = defineComponent({
             },
             onPaste,
             onFocus: (...args: any[]) => {
-            clearTimeout(this.blurTimeout);
+              clearTimeout(blurTimeout);
               onOriginFocus && onOriginFocus(args[0]);
               onFocus && onFocus(args[0]);
-            this.VCSelectContainerEvent?.focus(args[0]);
+              VCSelectContainerEvent?.focus(args[0]);
             },
             onBlur: (...args: any[]) => {
-            this.blurTimeout = setTimeout(() => {
+              blurTimeout = setTimeout(() => {
                 onOriginBlur && onOriginBlur(args[0]);
                 onBlur && onBlur(args[0]);
-              this.VCSelectContainerEvent?.blur(args[0]);
+                VCSelectContainerEvent?.blur(args[0]);
               }, 100);
             },
           },
@@ -187,6 +171,7 @@ const Input = defineComponent({
         true,
       ) as VNode;
       return inputNode;
+    };
   },
 });