refactor: input

components/_util/hooks/useConfigInject.ts

@@ -24,6 +24,8 @@ export default (
   virtual: ComputedRef<boolean>;
   dropdownMatchSelectWidth: ComputedRef<boolean | number>;
   getPopupContainer: ComputedRef<ConfigProviderProps['getPopupContainer']>;
+  getPrefixCls: ConfigProviderProps['getPrefixCls'];
+  autocomplete: ComputedRef<string>;
 } => {
   const configProvider = inject<UnwrapRef<ConfigProviderProps>>(
     'configProvider',
@@ -48,6 +50,7 @@ export default (
     () => props.dropdownMatchSelectWidth ?? configProvider.dropdownMatchSelectWidth,
   );
   const size = computed(() => props.size || configProvider.componentSize);
+  const autocomplete = computed(() => props.autocomplete || configProvider.input?.autocomplete);
   return {
     configProvider,
     prefixCls,
@@ -63,5 +66,7 @@ export default (
     virtual,
     dropdownMatchSelectWidth,
     rootPrefixCls,
+    getPrefixCls: configProvider.getPrefixCls,
+    autocomplete,
   };
 };

components/_util/util.ts

@@ -1,6 +1,6 @@
 import type { VueNode } from './type';
 export const isFunction = val => typeof val === 'function';
-
+export const controlDefaultValue = Symbol('controlDefaultValue') as any;
 export const isArray = Array.isArray;
 export const isString = val => typeof val === 'string';
 export const isSymbol = val => typeof val === 'symbol';

components/button/button.tsx

@@ -35,7 +35,7 @@ export default defineComponent({
   __ANT_BUTTON: true,
   props,
   slots: ['icon'],
-  emits: ['click'],
+  emits: ['click', 'mousedown'],
   setup(props, { slots, attrs, emit }) {
     const { prefixCls, autoInsertSpaceInButton, direction } = useConfigInject('btn', props);
 

components/config-provider/index.tsx

@@ -160,6 +160,9 @@ export const configProviderProps = {
   csp: {
     type: Object as PropType<CSPConfig>,
   },
+  input: {
+    type: Object as PropType<{ autocomplete: string }>,
+  },
   autoInsertSpaceInButton: PropTypes.looseBool,
   locale: {
     type: Object as PropType<Locale>,

components/input/ClearableLabeledInput.tsx

@@ -3,22 +3,23 @@ import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import { getInputClassName } from './Input';
 import PropTypes from '../_util/vue-types';
 import { cloneElement } from '../_util/vnode';
-import { getComponent } from '../_util/props-util';
+import type { PropType, VNode } from 'vue';
-import type { VNode } from 'vue';
+import { ref, defineComponent } from 'vue';
-import { defineComponent } from 'vue';
 import { tuple } from '../_util/type';
+import type { Direction, SizeType } from '../config-provider';
+import type { MouseEventHandler } from '../_util/EventInterface';
 
-export function hasPrefixSuffix(instance: any) {
+export function hasPrefixSuffix(propsAndSlots: any) {
-  return !!(
+  return !!(propsAndSlots.prefix || propsAndSlots.suffix || propsAndSlots.allowClear);
-    getComponent(instance, 'prefix') ||
+}
-    getComponent(instance, 'suffix') ||
+
-    instance.$props.allowClear
+function hasAddon(propsAndSlots: any) {
-  );
+  return !!(propsAndSlots.addonBefore || propsAndSlots.addonAfter);
 }
 
 const ClearableInputType = ['text', 'input'];
 
-const ClearableLabeledInput = defineComponent({
+export default defineComponent({
   name: 'ClearableLabeledInput',
   inheritAttrs: false,
   props: {
@@ -27,93 +28,125 @@ const ClearableLabeledInput = defineComponent({
     value: PropTypes.any,
     defaultValue: PropTypes.any,
     allowClear: PropTypes.looseBool,
-    element: PropTypes.VNodeChild,
+    element: PropTypes.any,
     handleReset: PropTypes.func,
     disabled: PropTypes.looseBool,
-    size: PropTypes.oneOf(tuple('small', 'large', 'default')),
+    direction: { type: String as PropType<Direction> },
-    suffix: PropTypes.VNodeChild,
+    size: { type: String as PropType<SizeType> },
-    prefix: PropTypes.VNodeChild,
+    suffix: PropTypes.any,
-    addonBefore: PropTypes.VNodeChild,
+    prefix: PropTypes.any,
-    addonAfter: PropTypes.VNodeChild,
+    addonBefore: PropTypes.any,
+    addonAfter: PropTypes.any,
     readonly: PropTypes.looseBool,
-    isFocused: PropTypes.looseBool,
+    focused: PropTypes.looseBool,
+    bordered: PropTypes.looseBool,
+    triggerFocus: { type: Function as PropType<() => void> },
   },
-  methods: {
+  setup(props, { slots, attrs }) {
-    renderClearIcon(prefixCls: string) {
+    const containerRef = ref();
-      const { allowClear, value, disabled, readonly, inputType, handleReset } = this.$props;
+    const onInputMouseUp: MouseEventHandler = e => {
+      if (containerRef.value?.contains(e.target as Element)) {
+        const { triggerFocus } = props;
+        triggerFocus?.();
+      }
+    };
+    const renderClearIcon = (prefixCls: string) => {
+      const { allowClear, value, disabled, readonly, handleReset } = props;
       if (!allowClear) {
         return null;
       }
-      const showClearIcon =
+      const needClear = !disabled && !readonly && value;
-        !disabled && !readonly && value !== undefined && value !== null && value !== '';
+      const className = `${prefixCls}-clear-icon`;
-      const className =
-        inputType === ClearableInputType[0]
-          ? `${prefixCls}-textarea-clear-icon`
-          : `${prefixCls}-clear-icon`;
       return (
         <CloseCircleFilled
           onClick={handleReset}
-          class={classNames(className, {
+          class={classNames(
-            [`${className}-hidden`]: !showClearIcon,
+            {
-          })}
+              [`${className}-hidden`]: !needClear,
+            },
+            className,
+          )}
           role="button"
         />
       );
-    },
+    };
 
-    renderSuffix(prefixCls: string) {
+    const renderSuffix = (prefixCls: string) => {
-      const { suffix, allowClear } = this.$props;
+      const { suffix = slots.suffix?.(), allowClear } = props;
       if (suffix || allowClear) {
         return (
           <span class={`${prefixCls}-suffix`}>
-            {this.renderClearIcon(prefixCls)}
+            {renderClearIcon(prefixCls)}
             {suffix}
           </span>
         );
       }
       return null;
-    },
+    };
 
-    renderLabeledIcon(prefixCls: string, element: VNode): VNode {
+    const renderLabeledIcon = (prefixCls: string, element: VNode) => {
-      const props = this.$props;
+      const {
-      const { style } = this.$attrs;
+        focused,
-      const suffix = this.renderSuffix(prefixCls);
+        value,
-      if (!hasPrefixSuffix(this)) {
+        prefix = slots.prefix?.(),
+        size,
+        suffix = slots.suffix?.(),
+        disabled,
+        allowClear,
+        direction,
+        readonly,
+        bordered,
+        addonAfter = slots.addonAfter,
+        addonBefore = slots.addonBefore,
+      } = props;
+      const suffixNode = renderSuffix(prefixCls);
+      if (!hasPrefixSuffix({ prefix, suffix, allowClear })) {
         return cloneElement(element, {
-          value: props.value,
+          value,
         });
       }
 
-      const prefix = props.prefix ? (
+      const prefixNode = prefix ? <span class={`${prefixCls}-prefix`}>{prefix}</span> : null;
-        <span class={`${prefixCls}-prefix`}>{props.prefix}</span>
-      ) : null;
 
-      const affixWrapperCls = classNames(this.$attrs?.class, `${prefixCls}-affix-wrapper`, {
+      const affixWrapperCls = classNames(`${prefixCls}-affix-wrapper`, {
-        [`${prefixCls}-affix-wrapper-focused`]: props.isFocused,
+        [`${prefixCls}-affix-wrapper-focused`]: focused,
-        [`${prefixCls}-affix-wrapper-disabled`]: props.disabled,
+        [`${prefixCls}-affix-wrapper-disabled`]: disabled,
-        [`${prefixCls}-affix-wrapper-sm`]: props.size === 'small',
+        [`${prefixCls}-affix-wrapper-sm`]: size === 'small',
-        [`${prefixCls}-affix-wrapper-lg`]: props.size === 'large',
+        [`${prefixCls}-affix-wrapper-lg`]: size === 'large',
-        [`${prefixCls}-affix-wrapper-input-with-clear-btn`]:
+        [`${prefixCls}-affix-wrapper-input-with-clear-btn`]: suffix && allowClear && value,
-          props.suffix && props.allowClear && this.$props.value,
+        [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
+        [`${prefixCls}-affix-wrapper-readonly`]: readonly,
+        [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
+        // className will go to addon wrapper
+        [`${attrs.class}`]: !hasAddon({ addonAfter, addonBefore }) && attrs.class,
       });
       return (
-        <span class={affixWrapperCls} style={style}>
+        <span
-          {prefix}
+          ref={containerRef}
+          class={affixWrapperCls}
+          style={attrs.style}
+          onMouseup={onInputMouseUp}
+        >
+          {prefixNode}
           {cloneElement(element, {
             style: null,
-            value: props.value,
+            value,
-            class: getInputClassName(prefixCls, props.size, props.disabled),
+            class: getInputClassName(prefixCls, bordered, size, disabled),
           })}
-          {suffix}
+          {suffixNode}
         </span>
-      ) as VNode;
+      );
-    },
+    };
 
-    renderInputWithLabel(prefixCls: string, labeledElement: VNode) {
+    const renderInputWithLabel = (prefixCls: string, labeledElement: VNode) => {
-      const { addonBefore, addonAfter, size } = this.$props;
+      const {
-      const { style, class: className } = this.$attrs;
+        addonBefore = slots.addonBefore?.(),
+        addonAfter = slots.addonAfter?.(),
+        size,
+        direction,
+      } = props;
       // Not wrap when there is not addons
-      if (!addonBefore && !addonAfter) {
+      if (!hasAddon({ addonBefore, addonAfter })) {
         return labeledElement;
       }
 
@@ -124,19 +157,24 @@ const ClearableLabeledInput = defineComponent({
       ) : null;
       const addonAfterNode = addonAfter ? <span class={addonClassName}>{addonAfter}</span> : null;
 
-      const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, {
+      const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, {
-        [wrapperClassName]: addonBefore || addonAfter,
+        [`${wrapperClassName}-rtl`]: direction === 'rtl',
       });
 
-      const mergedGroupClassName = classNames(className, `${prefixCls}-group-wrapper`, {
+      const mergedGroupClassName = classNames(
+        `${prefixCls}-group-wrapper`,
+        {
           [`${prefixCls}-group-wrapper-sm`]: size === 'small',
           [`${prefixCls}-group-wrapper-lg`]: size === 'large',
-      });
+          [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
+        },
+        attrs.class,
+      );
 
       // Need another wrapper for changing display:table to display:inline-block
       // and put style prop in wrapper
       return (
-        <span class={mergedGroupClassName} style={style}>
+        <span class={mergedGroupClassName} style={attrs.style}>
           <span class={mergedWrapperClassName}>
             {addonBeforeNode}
             {cloneElement(labeledElement, { style: null })}
@@ -144,41 +182,49 @@ const ClearableLabeledInput = defineComponent({
           </span>
         </span>
       );
-    },
+    };
 
-    renderTextAreaWithClearIcon(prefixCls: string, element: VNode) {
+    const renderTextAreaWithClearIcon = (prefixCls: string, element: VNode) => {
-      const { value, allowClear } = this.$props;
+      const {
-      const { style, class: className } = this.$attrs;
+        value,
+        allowClear,
+        direction,
+        bordered,
+        addonAfter = slots.addonAfter,
+        addonBefore = slots.addonBefore,
+      } = props;
       if (!allowClear) {
-        return cloneElement(element, { value });
+        return cloneElement(element, {
+          value,
+        });
       }
       const affixWrapperCls = classNames(
-        className,
         `${prefixCls}-affix-wrapper`,
         `${prefixCls}-affix-wrapper-textarea-with-clear-btn`,
+        {
+          [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
+          [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
+          // className will go to addon wrapper
+          [`${attrs.class}`]: !hasAddon({ addonAfter, addonBefore }) && attrs.class,
+        },
       );
       return (
-        <span class={affixWrapperCls} style={style}>
+        <span class={affixWrapperCls} style={attrs.style}>
           {cloneElement(element, {
             style: null,
             value,
           })}
-          {this.renderClearIcon(prefixCls)}
+          {renderClearIcon(prefixCls)}
         </span>
       );
-    },
+    };
 
-    renderClearableLabeledInput() {
+    return () => {
-      const { prefixCls, inputType, element } = this.$props as any;
+      const { prefixCls, inputType, element = slots.element?.() } = props;
       if (inputType === ClearableInputType[0]) {
-        return this.renderTextAreaWithClearIcon(prefixCls, element);
+        return renderTextAreaWithClearIcon(prefixCls, element);
       }
-      return this.renderInputWithLabel(prefixCls, this.renderLabeledIcon(prefixCls, element));
+      return renderInputWithLabel(prefixCls, renderLabeledIcon(prefixCls, element));
-    },
+    };
-  },
-  render() {
-    return this.renderClearableLabeledInput();
   },
 });
-
-export default ClearableLabeledInput;

components/input/Group.tsx

@@ -1,36 +1,46 @@
-import { defineComponent, inject } from 'vue';
+import type { PropType } from 'vue';
+import { computed, defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { getSlot } from '../_util/props-util';
+import type { SizeType } from '../config-provider';
-import { defaultConfigProvider } from '../config-provider';
+import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
-import { tuple } from '../_util/type';
+import useConfigInject from '../_util/hooks/useConfigInject';
 
 export default defineComponent({
   name: 'AInputGroup',
   props: {
     prefixCls: PropTypes.string,
-    size: PropTypes.oneOf(tuple('small', 'large', 'default')),
+    size: { type: String as PropType<SizeType> },
     compact: PropTypes.looseBool,
+    onMouseenter: { type: Function as PropType<MouseEventHandler> },
+    onMouseleave: { type: Function as PropType<MouseEventHandler> },
+    onFocus: { type: Function as PropType<FocusEventHandler> },
+    onBlur: { type: Function as PropType<FocusEventHandler> },
   },
-  setup() {
+  setup(props, { slots }) {
+    const { prefixCls, direction } = useConfigInject('input-group', props);
+    const cls = computed(() => {
+      const pre = prefixCls.value;
       return {
-      configProvider: inject('configProvider', defaultConfigProvider),
+        [`${pre}`]: true,
+        [`${pre}-lg`]: props.size === 'large',
+        [`${pre}-sm`]: props.size === 'small',
+        [`${pre}-compact`]: props.compact,
+        [`${pre}-rtl`]: direction.value === 'rtl',
       };
-  },
+    });
-  computed: {
+    return () => {
-    classes() {
+      const {} = props;
-      const { prefixCls: customizePrefixCls, size, compact = false, configProvider } = this as any;
+      return (
-      const getPrefixCls = configProvider.getPrefixCls;
+        <span
-      const prefixCls = getPrefixCls('input-group', customizePrefixCls);
+          class={cls.value}
-
+          onMouseenter={props.onMouseEnter}
-      return {
+          onMouseleave={props.onMouseLeave}
-        [`${prefixCls}`]: true,
+          onFocus={props.onFocus}
-        [`${prefixCls}-lg`]: size === 'large',
+          onBlur={props.onBlur}
-        [`${prefixCls}-sm`]: size === 'small',
+        >
-        [`${prefixCls}-compact`]: compact,
+          {slots.default?.()}
+        </span>
+      );
     };
   },
-  },
-  render() {
-    return <span class={this.classes}>{getSlot(this)}</span>;
-  },
 });

components/input/Input.tsx

@@ -1,13 +1,25 @@
 import type { VNode } from 'vue';
-import { defineComponent, inject, nextTick, withDirectives } from 'vue';
+import {
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  watch,
+  ref,
+  defineComponent,
+  nextTick,
+  withDirectives,
+} from 'vue';
 import antInputDirective from '../_util/antInputDirective';
 import classNames from '../_util/classNames';
+import type { InputProps } from './inputProps';
 import inputProps from './inputProps';
-import { hasProp, getComponent, getOptionProps } from '../_util/props-util';
+import type { Direction, SizeType } from '../config-provider';
-import { defaultConfigProvider } from '../config-provider';
 import ClearableLabeledInput from './ClearableLabeledInput';
 import { useInjectFormItemContext } from '../form/FormItemContext';
 import omit from '../_util/omit';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import type { ChangeEvent, FocusEventHandler } from '../_util/EventInterface';
+import { controlDefaultValue } from '../_util/util';
 
 export function fixControlledValue(value: string | number) {
   if (typeof value === 'undefined' || value === null) {
@@ -16,12 +28,38 @@ export function fixControlledValue(value: string | number) {
   return value;
 }
 
-export function resolveOnChange(target: HTMLInputElement, e: Event, onChange?: Function) {
+export function resolveOnChange(
-  if (onChange) {
+  target: HTMLInputElement,
-    const event = e as any;
+  e: Event,
+  onChange: Function,
+  targetValue?: string,
+) {
+  if (!onChange) {
+    return;
+  }
+  const event: any = e;
+  const originalInputValue = target.value;
+
   if (e.type === 'click') {
+    Object.defineProperty(event, 'target', {
+      writable: true,
+    });
+    Object.defineProperty(event, 'currentTarget', {
+      writable: true,
+    });
     // click clear icon
     //event = Object.create(e);
+    event.target = target;
+    event.currentTarget = target;
+    // change target ref value cause e.target.value should be '' when clear input
+    target.value = '';
+    onChange(event);
+    // reset target ref value
+    target.value = originalInputValue;
+    return;
+  }
+  // Trigger by composition event, this means we need force change the input value
+  if (targetValue !== undefined) {
     Object.defineProperty(event, 'target', {
       writable: true,
     });
@@ -30,128 +68,210 @@ export function resolveOnChange(target: HTMLInputElement, e: Event, onChange?: F
     });
     event.target = target;
     event.currentTarget = target;
-      const originalInputValue = target.value;
+    target.value = targetValue;
-      // change target ref value cause e.target.value should be '' when clear input
-      target.value = '';
     onChange(event);
-      // reset target ref value
-      target.value = originalInputValue;
     return;
   }
   onChange(event);
 }
-}
 
-export function getInputClassName(prefixCls: string, size: string, disabled: boolean) {
+export function getInputClassName(
+  prefixCls: string,
+  bordered: boolean,
+  size?: SizeType,
+  disabled?: boolean,
+  direction?: Direction,
+) {
   return classNames(prefixCls, {
     [`${prefixCls}-sm`]: size === 'small',
     [`${prefixCls}-lg`]: size === 'large',
     [`${prefixCls}-disabled`]: disabled,
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+    [`${prefixCls}-borderless`]: !bordered,
   });
 }
 
+export interface InputFocusOptions extends FocusOptions {
+  cursor?: 'start' | 'end' | 'all';
+}
+export function triggerFocus(
+  element?: HTMLInputElement | HTMLTextAreaElement,
+  option?: InputFocusOptions,
+) {
+  if (!element) return;
+
+  element.focus(option);
+
+  // Selection content
+  const { cursor } = option || {};
+  if (cursor) {
+    const len = element.value.length;
+
+    switch (cursor) {
+      case 'start':
+        element.setSelectionRange(0, 0);
+        break;
+
+      case 'end':
+        element.setSelectionRange(len, len);
+        break;
+
+      default:
+        element.setSelectionRange(0, len);
+    }
+  }
+}
+
 export default defineComponent({
   name: 'AInput',
   inheritAttrs: false,
   props: {
     ...inputProps,
   },
-  setup() {
+  setup(props, { slots, attrs, expose, emit }) {
+    const inputRef = ref();
+    const clearableInputRef = ref();
+    let removePasswordTimeout: any;
     const formItemContext = useInjectFormItemContext();
-    return {
+    const { direction, prefixCls, size, autocomplete } = useConfigInject('input', props);
-      configProvider: inject('configProvider', defaultConfigProvider),
+    const stateValue = ref(props.value === controlDefaultValue ? props.defaultValue : props.value);
-      removePasswordTimeout: undefined,
+    const focused = ref(false);
-      input: null,
+
-      clearableInput: null,
+    watch(
-      formItemContext,
+      () => props.value,
-    };
+      () => {
-  },
+        if (props.value !== controlDefaultValue) {
-  data() {
+          stateValue.value = props.value;
-    const props = this.$props;
-    const value = typeof props.value === 'undefined' ? props.defaultValue : props.value;
-    return {
-      stateValue: typeof value === 'undefined' ? '' : value,
-      isFocused: false,
-    };
-  },
-  watch: {
-    value(val) {
-      this.stateValue = val;
-    },
-  },
-  mounted() {
-    nextTick(() => {
-      if (process.env.NODE_ENV === 'test') {
-        if (this.autofocus) {
-          this.focus();
         }
+      },
+    );
+
+    const clearPasswordValueAttribute = () => {
+      // https://github.com/ant-design/ant-design/issues/20541
+      removePasswordTimeout = setTimeout(() => {
+        if (
+          inputRef.value?.getAttribute('type') === 'password' &&
+          inputRef.value.hasAttribute('value')
+        ) {
+          inputRef.value.removeAttribute('value');
         }
-      this.clearPasswordValueAttribute();
       });
-  },
+    };
-  beforeUnmount() {
-    if (this.removePasswordTimeout) {
-      clearTimeout(this.removePasswordTimeout);
-    }
-  },
-  methods: {
-    handleInputFocus(e: Event) {
-      this.isFocused = true;
-      this.onFocus && this.onFocus(e);
-    },
 
-    handleInputBlur(e: Event) {
+    const focus = (option?: InputFocusOptions) => {
-      this.isFocused = false;
+      triggerFocus(inputRef.value, option);
-      this.onBlur && this.onBlur(e);
+    };
-      this.formItemContext.onFieldBlur();
-    },
 
-    focus() {
+    const blur = () => {
-      this.input.focus();
+      inputRef.value?.blur();
-    },
+    };
 
-    blur() {
+    const setSelectionRange = (
-      this.input.blur();
+      start: number,
-    },
+      end: number,
-    select() {
+      direction?: 'forward' | 'backward' | 'none',
-      this.input.select();
+    ) => {
-    },
+      inputRef.value?.setSelectionRange(start, end, direction);
+    };
 
-    saveClearableInput(input: HTMLInputElement) {
+    const select = () => {
-      this.clearableInput = input;
+      inputRef.value?.select();
-    },
+    };
 
-    saveInput(input: HTMLInputElement) {
+    expose({
-      this.input = input;
+      focus,
-    },
+      blur,
+      inputRef,
+      stateValue,
+      setSelectionRange,
+      select,
+    });
 
-    setValue(value: string | number, callback?: Function) {
+    const onFocus: FocusEventHandler = e => {
-      if (this.stateValue === value) {
+      const { onFocus } = props;
+      focused.value = true;
+      onFocus?.(e);
+      nextTick(() => {
+        clearPasswordValueAttribute();
+      });
+    };
+
+    const onBlur: FocusEventHandler = e => {
+      const { onBlur } = props;
+      focused.value = false;
+      onBlur?.(e);
+      formItemContext.onFieldBlur();
+      nextTick(() => {
+        clearPasswordValueAttribute();
+      });
+    };
+
+    const triggerChange = (e: Event) => {
+      emit('update:value', (e.target as HTMLInputElement).value);
+      emit('change', e);
+      emit('input', e);
+      formItemContext.onFieldChange();
+    };
+    const instance = getCurrentInstance();
+    const setValue = (value: string | number, callback?: Function) => {
+      if (stateValue.value === value) {
         return;
       }
-      if (!hasProp(this, 'value')) {
+      if (props.value === controlDefaultValue) {
-        this.stateValue = value;
+        stateValue.value = value;
       } else {
-        (this as any).$forceUpdate();
+        instance.update();
       }
       nextTick(() => {
         callback && callback();
       });
-    },
+    };
-    triggerChange(e: Event) {
+    const handleReset = (e: MouseEvent) => {
-      this.$emit('update:value', (e.target as HTMLInputElement).value);
+      resolveOnChange(inputRef.value, e, triggerChange);
-      this.$emit('change', e);
+      setValue('', () => {
-      this.$emit('input', e);
+        focus();
-      this.formItemContext.onFieldChange();
-    },
-    handleReset(e: Event) {
-      this.setValue('', () => {
-        this.focus();
       });
-      resolveOnChange(this.input, e, this.triggerChange);
+    };
-    },
+
-    renderInput(prefixCls: string, { addonBefore, addonAfter }) {
+    const handleChange = (e: ChangeEvent) => {
-      const otherProps = omit(this.$props, [
+      const { value, composing, isComposing } = e.target as any;
+      // https://github.com/vueComponent/ant-design-vue/issues/2203
+      if (((isComposing || composing) && props.lazy) || stateValue.value === value) return;
+      const newVal = e.target.value;
+      resolveOnChange(inputRef.value, e, triggerChange);
+      setValue(newVal, () => {
+        clearPasswordValueAttribute();
+      });
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.keyCode === 13) {
+        emit('pressEnter', e);
+      }
+      emit('keydown', e);
+    };
+
+    onMounted(() => {
+      if (process.env.NODE_ENV === 'test') {
+        if (props.autofocus) {
+          focus();
+        }
+      }
+      clearPasswordValueAttribute();
+    });
+    onBeforeUnmount(() => {
+      clearTimeout(removePasswordTimeout);
+    });
+
+    const renderInput = () => {
+      const {
+        addonBefore = slots.addonBefore,
+        addonAfter = slots.addonAfter,
+        disabled,
+        bordered = true,
+        valueModifiers = {},
+      } = props;
+      const otherProps = omit(props as InputProps & { inputType: any; placeholder: string }, [
         'prefixCls',
         'onPressEnter',
         'addonBefore',
@@ -159,36 +279,29 @@ export default defineComponent({
         'prefix',
         'suffix',
         'allowClear',
+        // Input elements must be either controlled or uncontrolled,
+        // specify either the value prop, or the defaultValue prop, but not both.
         'defaultValue',
-        'lazy',
         'size',
-        'inputPrefixCls',
+        'inputType',
-        'loading',
+        'bordered',
       ]);
-      const {
+      const inputProps = {
-        handleKeyDown,
-        handleChange,
-        handleInputFocus,
-        handleInputBlur,
-        size,
-        disabled,
-        valueModifiers = {},
-        $attrs,
-      } = this;
-      const inputProps: any = {
         ...otherProps,
-        ...$attrs,
+        autocomplete: autocomplete.value,
-        id: otherProps.id ?? this.formItemContext.id.value,
-        onKeydown: handleKeyDown,
-        class: classNames(getInputClassName(prefixCls, size, disabled), {
-          [$attrs.class as string]: $attrs.class && !addonBefore && !addonAfter,
-        }),
-        ref: this.saveInput,
-        key: 'ant-input',
-        onInput: handleChange,
         onChange: handleChange,
-        onFocus: handleInputFocus,
+        onInput: handleChange,
-        onBlur: handleInputBlur,
+        onFocus,
+        onBlur,
+        onKeydown: handleKeyDown,
+        class: classNames(
+          getInputClassName(prefixCls.value, bordered, size.value, disabled, direction.value),
+          {
+            [attrs.class as string]: attrs.class && !addonBefore && !addonAfter,
+          },
+        ),
+        ref: inputRef,
+        key: 'ant-input',
       };
       if (valueModifiers.lazy) {
         delete inputProps.onInput;
@@ -198,58 +311,185 @@ export default defineComponent({
       }
       const inputNode = <input {...inputProps} />;
       return withDirectives(inputNode as VNode, [[antInputDirective]]);
-    },
-    clearPasswordValueAttribute() {
-      // https://github.com/ant-design/ant-design/issues/20541
-      this.removePasswordTimeout = setTimeout(() => {
-        if (
-          this.input &&
-          this.input.getAttribute &&
-          this.input.getAttribute('type') === 'password' &&
-          this.input.hasAttribute('value')
-        ) {
-          this.input.removeAttribute('value');
-        }
-      });
-    },
-    handleChange(e: Event) {
-      const { value, composing, isComposing } = e.target as any;
-      // https://github.com/vueComponent/ant-design-vue/issues/2203
-      if (((isComposing || composing) && this.lazy) || this.stateValue === value) return;
-      this.setValue(value, this.clearPasswordValueAttribute);
-      resolveOnChange(this.input, e, this.triggerChange);
-    },
-    handleKeyDown(e: KeyboardEvent) {
-      if (e.keyCode === 13) {
-        this.$emit('pressEnter', e);
-      }
-      this.$emit('keydown', e);
-    },
-  },
-  render() {
-    const { prefixCls: customizePrefixCls } = this.$props;
-    const { stateValue, isFocused } = this.$data;
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('input', customizePrefixCls);
-    const addonAfter = getComponent(this, 'addonAfter');
-    const addonBefore = getComponent(this, 'addonBefore');
-    const suffix = getComponent(this, 'suffix');
-    const prefix = getComponent(this, 'prefix');
-    const props: any = {
-      ...this.$attrs,
-      ...getOptionProps(this),
-      prefixCls,
-      inputType: 'input',
-      value: fixControlledValue(stateValue),
-      element: this.renderInput(prefixCls, { addonAfter, addonBefore }),
-      handleReset: this.handleReset,
-      addonAfter,
-      addonBefore,
-      suffix,
-      prefix,
-      isFocused,
     };
 
-    return <ClearableLabeledInput {...props} ref={this.saveClearableInput} />;
+    return () => {
+      const inputProps: any = {
+        ...attrs,
+        ...props,
+        prefixCls: prefixCls.value,
+        inputType: 'input',
+        value: fixControlledValue(stateValue.value),
+        handleReset,
+        focused: focused.value,
+      };
+
+      return (
+        <ClearableLabeledInput
+          {...omit(inputProps, ['element', 'valueModifiers'])}
+          ref={clearableInputRef}
+          v-slots={{ ...slots, element: renderInput }}
+        />
+      );
+    };
   },
+
+  // methods: {
+  //   handleInputFocus(e: Event) {
+  //     this.isFocused = true;
+  //     this.onFocus && this.onFocus(e);
+  //   },
+
+  //   handleInputBlur(e: Event) {
+  //     this.isFocused = false;
+  //     this.onBlur && this.onBlur(e);
+  //     this.formItemContext.onFieldBlur();
+  //   },
+
+  //   focus() {
+  //     this.input.focus();
+  //   },
+
+  //   blur() {
+  //     this.input.blur();
+  //   },
+  //   select() {
+  //     this.input.select();
+  //   },
+
+  //   saveClearableInput(input: HTMLInputElement) {
+  //     this.clearableInput = input;
+  //   },
+
+  //   saveInput(input: HTMLInputElement) {
+  //     this.input = input;
+  //   },
+
+  //   setValue(value: string | number, callback?: Function) {
+  //     if (this.stateValue === value) {
+  //       return;
+  //     }
+  //     if (!hasProp(this, 'value')) {
+  //       this.stateValue = value;
+  //     } else {
+  //       (this as any).$forceUpdate();
+  //     }
+  //     nextTick(() => {
+  //       callback && callback();
+  //     });
+  //   },
+  //   triggerChange(e: Event) {
+  //     this.$emit('update:value', (e.target as HTMLInputElement).value);
+  //     this.$emit('change', e);
+  //     this.$emit('input', e);
+  //     this.formItemContext.onFieldChange();
+  //   },
+  //   handleReset(e: Event) {
+  //     this.setValue('', () => {
+  //       this.focus();
+  //     });
+  //     resolveOnChange(this.input, e, this.triggerChange);
+  //   },
+  //   renderInput(prefixCls: string, { addonBefore, addonAfter }) {
+  //     const otherProps = omit(this.$props, [
+  //       'prefixCls',
+  //       'onPressEnter',
+  //       'addonBefore',
+  //       'addonAfter',
+  //       'prefix',
+  //       'suffix',
+  //       'allowClear',
+  //       'defaultValue',
+  //       'lazy',
+  //       'size',
+  //       'inputPrefixCls',
+  //       'loading',
+  //     ]);
+  //     const {
+  //       handleKeyDown,
+  //       handleChange,
+  //       handleInputFocus,
+  //       handleInputBlur,
+  //       size,
+  //       disabled,
+  //       valueModifiers = {},
+  //       $attrs,
+  //     } = this;
+  //     const inputProps: any = {
+  //       ...otherProps,
+  //       ...$attrs,
+  //       id: otherProps.id ?? this.formItemContext.id.value,
+  //       onKeydown: handleKeyDown,
+  //       class: classNames(getInputClassName(prefixCls, size, disabled), {
+  //         [$attrs.class as string]: $attrs.class && !addonBefore && !addonAfter,
+  //       }),
+  //       ref: this.saveInput,
+  //       key: 'ant-input',
+  //       onInput: handleChange,
+  //       onChange: handleChange,
+  //       onFocus: handleInputFocus,
+  //       onBlur: handleInputBlur,
+  //     };
+  //     if (valueModifiers.lazy) {
+  //       delete inputProps.onInput;
+  //     }
+  //     if (!inputProps.autofocus) {
+  //       delete inputProps.autofocus;
+  //     }
+  //     const inputNode = <input {...inputProps} />;
+  //     return withDirectives(inputNode as VNode, [[antInputDirective]]);
+  //   },
+  //   clearPasswordValueAttribute() {
+  //     // https://github.com/ant-design/ant-design/issues/20541
+  //     this.removePasswordTimeout = setTimeout(() => {
+  //       if (
+  //         this.input &&
+  //         this.input.getAttribute &&
+  //         this.input.getAttribute('type') === 'password' &&
+  //         this.input.hasAttribute('value')
+  //       ) {
+  //         this.input.removeAttribute('value');
+  //       }
+  //     });
+  //   },
+  //   handleChange(e: Event) {
+  //     const { value, composing, isComposing } = e.target as any;
+  //     // https://github.com/vueComponent/ant-design-vue/issues/2203
+  //     if (((isComposing || composing) && this.lazy) || this.stateValue === value) return;
+  //     this.setValue(value, this.clearPasswordValueAttribute);
+  //     resolveOnChange(this.input, e, this.triggerChange);
+  //   },
+  //   handleKeyDown(e: KeyboardEvent) {
+  //     if (e.keyCode === 13) {
+  //       this.$emit('pressEnter', e);
+  //     }
+  //     this.$emit('keydown', e);
+  //   },
+  // },
+  // render() {
+  //   const { prefixCls: customizePrefixCls } = this.$props;
+  //   const { stateValue, isFocused } = this.$data;
+  //   const getPrefixCls = this.configProvider.getPrefixCls;
+  //   const prefixCls = getPrefixCls('input', customizePrefixCls);
+  //   const addonAfter = getComponent(this, 'addonAfter');
+  //   const addonBefore = getComponent(this, 'addonBefore');
+  //   const suffix = getComponent(this, 'suffix');
+  //   const prefix = getComponent(this, 'prefix');
+  //   const props: any = {
+  //     ...this.$attrs,
+  //     ...getOptionProps(this),
+  //     prefixCls,
+  //     inputType: 'input',
+  //     value: fixControlledValue(stateValue),
+  //     element: this.renderInput(prefixCls, { addonAfter, addonBefore }),
+  //     handleReset: this.handleReset,
+  //     addonAfter,
+  //     addonBefore,
+  //     suffix,
+  //     prefix,
+  //     isFocused,
+  //   };
+
+  //   return <ClearableLabeledInput {...props} ref={this.saveClearableInput} />;
+  // },
 });

components/input/Password.tsx

@@ -1,20 +1,23 @@
 import classNames from '../_util/classNames';
-import { getComponent, getOptionProps } from '../_util/props-util';
+import { isValidElement } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import Input from './Input';
 import EyeOutlined from '@ant-design/icons-vue/EyeOutlined';
 import EyeInvisibleOutlined from '@ant-design/icons-vue/EyeInvisibleOutlined';
+import type { InputProps } from './inputProps';
 import inputProps from './inputProps';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
-import { defineComponent, inject } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
-import { defaultConfigProvider } from '../config-provider';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import omit from '../_util/omit';
 
 const ActionMap = {
   click: 'onClick',
   hover: 'onMouseover',
 };
-
+const defaultIconRender = (visible: boolean) =>
+  visible ? <EyeOutlined /> : <EyeInvisibleOutlined />;
 export default defineComponent({
   name: 'AInputPassword',
   mixins: [BaseMixin],
@@ -25,96 +28,76 @@ export default defineComponent({
     inputPrefixCls: PropTypes.string,
     action: PropTypes.string.def('click'),
     visibilityToggle: PropTypes.looseBool.def(true),
-    iconRender: PropTypes.func.def((visible: boolean) =>
+    iconRender: PropTypes.func,
-      visible ? <EyeOutlined /> : <EyeInvisibleOutlined />,
-    ),
   },
-  setup() {
+  setup(props, { slots, attrs, expose }) {
-    return {
+    const visible = ref(false);
-      input: null,
+    const onVisibleChange = () => {
-      configProvider: inject('configProvider', defaultConfigProvider),
+      const { disabled } = props;
-    };
+      if (disabled) {
-  },
-  data() {
-    return {
-      visible: false,
-    };
-  },
-  methods: {
-    saveInput(node: any) {
-      this.input = node;
-    },
-    focus() {
-      this.input.focus();
-    },
-    blur() {
-      this.input.blur();
-    },
-    onVisibleChange() {
-      if (this.disabled) {
         return;
       }
-      this.setState({
+      visible.value = !visible.value;
-        visible: !this.visible,
+    };
+    const inputRef = ref();
+    const focus = () => {
+      inputRef.value?.focus();
+    };
+    const blur = () => {
+      inputRef.value?.blur();
+    };
+    expose({
+      focus,
+      blur,
     });
-    },
+    const getIcon = (prefixCls: string) => {
-    getIcon(prefixCls) {
+      const { action, iconRender = slots.iconRender || defaultIconRender } = props;
-      const { action } = this.$props;
+      const iconTrigger = ActionMap[action!] || '';
-      const iconTrigger = ActionMap[action] || '';
+      const icon = iconRender(visible.value);
-      const iconRender = this.$slots.iconRender || this.$props.iconRender;
-      const icon = iconRender(this.visible);
       const iconProps = {
-        [iconTrigger]: this.onVisibleChange,
+        [iconTrigger]: onVisibleChange,
-        onMousedown: (e: Event) => {
+        class: `${prefixCls}-icon`,
+        key: 'passwordIcon',
+        onMousedown: (e: MouseEvent) => {
           // Prevent focused state lost
           // https://github.com/ant-design/ant-design/issues/15173
           e.preventDefault();
         },
-        onMouseup: (e: Event) => {
+        onMouseup: (e: MouseEvent) => {
-          // Prevent focused state lost
+          // Prevent caret position change
-          // https://github.com/ant-design/ant-design/pull/23633/files
+          // https://github.com/ant-design/ant-design/issues/23524
           e.preventDefault();
         },
-        class: `${prefixCls}-icon`,
-        key: 'passwordIcon',
       };
-      return cloneElement(icon, iconProps);
+      return cloneElement(isValidElement(icon) ? icon : <span>{icon}</span>, iconProps);
-    },
+    };
-  },
+    const { prefixCls, getPrefixCls } = useConfigInject('input-password', props);
-  render() {
+    const inputPrefixCls = computed(() => getPrefixCls('input', props.inputPrefixCls));
-    const {
+    const renderPassword = () => {
-      prefixCls: customizePrefixCls,
+      const { size, visibilityToggle, ...restProps } = props;
-      inputPrefixCls: customizeInputPrefixCls,
-      size,
-      suffix,
-      action,
-      visibilityToggle,
-      iconRender,
-      ...restProps
-    } = getOptionProps(this);
-    const { class: className } = this.$attrs;
 
-    const getPrefixCls = this.configProvider.getPrefixCls;
+      const suffixIcon = visibilityToggle && getIcon(prefixCls.value);
-    const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
+      const inputClassName = classNames(prefixCls.value, attrs.class, {
-    const prefixCls = getPrefixCls('input-password', customizePrefixCls);
+        [`${prefixCls.value}-${size}`]: !!size,
-
-    const suffixIcon = visibilityToggle && this.getIcon(prefixCls);
-    const inputClassName = classNames(prefixCls, className, {
-      [`${prefixCls}-${size}`]: !!size,
       });
-    const inputProps = {
+
-      ...restProps,
+      const omittedProps = {
-      prefixCls: inputPrefixCls,
+        ...omit(restProps, ['suffix', 'iconRender']),
-      size,
+        ...attrs,
-      suffix: suffixIcon,
+        type: visible.value ? 'text' : 'password',
-      prefix: getComponent(this, 'prefix'),
-      addonAfter: getComponent(this, 'addonAfter'),
-      addonBefore: getComponent(this, 'addonBefore'),
-      ...this.$attrs,
-      type: this.visible ? 'text' : 'password',
         class: inputClassName,
-      ref: 'input',
+        prefixCls: inputPrefixCls.value,
+        suffix: suffixIcon,
+      } as InputProps;
+
+      if (size) {
+        omittedProps.size = size;
+      }
+
+      return <Input ref={inputRef} {...omittedProps} v-slots={slots} />;
+    };
+    return () => {
+      return renderPassword();
     };
-    return <Input {...inputProps} ref={this.saveInput} />;
   },
 });

components/input/Search.tsx

@@ -1,187 +1,145 @@
-import { defineComponent, inject } from 'vue';
+import type { PropType } from 'vue';
+import { computed, ref, defineComponent } from 'vue';
 import classNames from '../_util/classNames';
-import isMobile from '../_util/isMobile';
 import Input from './Input';
-import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import SearchOutlined from '@ant-design/icons-vue/SearchOutlined';
 import inputProps from './inputProps';
 import Button from '../button';
 import { cloneElement } from '../_util/vnode';
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, getComponent } from '../_util/props-util';
-import { defaultConfigProvider } from '../config-provider';
 import isPlainObject from 'lodash-es/isPlainObject';
+import type { ChangeEvent, MouseEventHandler } from '../_util/EventInterface';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import omit from '../_util/omit';
+import isMobile from '../_util/isMobile';
 
 export default defineComponent({
   name: 'AInputSearch',
   inheritAttrs: false,
   props: {
     ...inputProps,
+    inputPrefixCls: PropTypes.string,
     // 不能设置默认值 https://github.com/vueComponent/ant-design-vue/issues/1916
-    enterButton: PropTypes.VNodeChild,
+    enterButton: PropTypes.any,
-    onSearch: PropTypes.func,
+    onSearch: {
+      type: Function as PropType<
+        (value: string, event?: ChangeEvent | MouseEvent | KeyboardEvent) => void
+      >,
     },
-  setup() {
+  },
-    return {
+  setup(props, { slots, attrs, expose, emit }) {
-      configProvider: inject('configProvider', defaultConfigProvider),
+    const inputRef = ref();
-      input: null,
+    const focus = () => {
+      inputRef.value?.focus();
     };
-  },
+    const blur = () => {
-  methods: {
+      inputRef.value?.blur();
-    saveInput(node: HTMLInputElement) {
+    };
-      this.input = node;
+    expose({
-    },
+      focus,
-    handleChange(e: Event) {
+      blur,
-      this.$emit('update:value', (e.target as HTMLInputElement).value);
+    });
+
+    const onChange = (e: ChangeEvent) => {
+      emit('update:value', (e.target as HTMLInputElement).value);
       if (e && e.target && e.type === 'click') {
-        this.$emit('search', (e.target as HTMLInputElement).value, e);
+        emit('search', e.target.value, e);
       }
-      this.$emit('change', e);
+      emit('change', e);
-    },
+    };
-    handleSearch(e: Event) {
+
-      if (this.loading || this.disabled) {
+    const onMousedown: MouseEventHandler = e => {
-        return;
+      if (document.activeElement === inputRef.value?.inputRef.value) {
+        e.preventDefault();
       }
-      this.$emit('search', this.input.stateValue, e);
+    };
+
+    const onSearch = (e: MouseEvent | KeyboardEvent) => {
+      emit('search', inputRef.value?.stateValue, e);
       if (!isMobile.tablet) {
-        this.input.focus();
+        inputRef.value.focus();
       }
-    },
+    };
-    focus() {
-      this.input.focus();
-    },
 
-    blur() {
+    const { prefixCls, getPrefixCls, direction, size } = useConfigInject('input-search', props);
-      this.input.blur();
+    const inputPrefixCls = computed(() => getPrefixCls('input', props.inputPrefixCls));
-    },
+    return () => {
-    renderLoading(prefixCls: string) {
+      const {
-      const { size } = this.$props;
+        disabled,
-      let enterButton = getComponent(this, 'enterButton');
+        loading,
-      // 兼容 <a-input-search enterButton />， 因enterButton类型为 any，此类写法 enterButton 为空字符串
+        addonAfter = slots.addonAfter?.(),
+        suffix = slots.suffix?.(),
+        ...restProps
+      } = props;
+      let { enterButton = slots.enterButton?.() } = props;
       enterButton = enterButton || enterButton === '';
-      if (enterButton) {
+      const searchIcon = typeof enterButton === 'boolean' ? <SearchOutlined /> : null;
-        return (
+      const btnClassName = `${prefixCls.value}-button`;
-          <Button class={`${prefixCls}-button`} type="primary" size={size} key="enterButton">
-            <LoadingOutlined />
-          </Button>
-        );
-      }
-      return <LoadingOutlined class={`${prefixCls}-icon`} key="loadingIcon" />;
-    },
-    renderSuffix(prefixCls: string) {
-      const { loading } = this;
-      const suffix = getComponent(this, 'suffix');
-      let enterButton = getComponent(this, 'enterButton');
-      // 兼容 <a-input-search enterButton />， 因enterButton类型为 any，此类写法 enterButton 为空字符串
-      enterButton = enterButton || enterButton === '';
-      if (loading && !enterButton) {
-        return [suffix, this.renderLoading(prefixCls)];
-      }
 
-      if (enterButton) return suffix;
-
-      const icon = (
-        <SearchOutlined class={`${prefixCls}-icon`} key="searchIcon" onClick={this.handleSearch} />
-      );
-
-      if (suffix) {
-        // let cloneSuffix = suffix;
-        // if (isValidElement(cloneSuffix) && !cloneSuffix.key) {
-        //   cloneSuffix = cloneElement(cloneSuffix, {
-        //     key: 'originSuffix',
-        //   });
-        // }
-        return [suffix, icon];
-      }
-
-      return icon;
-    },
-    renderAddonAfter(prefixCls: string) {
-      const { size, disabled, loading } = this;
-      const btnClassName = `${prefixCls}-button`;
-      let enterButton = getComponent(this, 'enterButton');
-      enterButton = enterButton || enterButton === '';
-      const addonAfter = getComponent(this, 'addonAfter');
-      if (loading && enterButton) {
-        return [this.renderLoading(prefixCls), addonAfter];
-      }
-      if (!enterButton) return addonAfter;
       const enterButtonAsElement = Array.isArray(enterButton) ? enterButton[0] : enterButton;
       let button: any;
       const isAntdButton =
         enterButtonAsElement.type &&
         isPlainObject(enterButtonAsElement.type) &&
         enterButtonAsElement.type.__ANT_BUTTON;
-      if (enterButtonAsElement.tagName === 'button' || isAntdButton) {
+
+      if (isAntdButton || enterButtonAsElement.tagName === 'button') {
         button = cloneElement(enterButtonAsElement, {
+          onMousedown,
+          onClick: onSearch,
           key: 'enterButton',
-          class: isAntdButton ? btnClassName : '',
+          ...(isAntdButton
-          ...(isAntdButton ? { size } : {}),
+            ? {
-          onClick: this.handleSearch,
+                class: btnClassName,
+                size: size.value,
+              }
+            : {}),
         });
       } else {
         button = (
           <Button
             class={btnClassName}
-            type="primary"
+            type={enterButton ? 'primary' : undefined}
-            size={size}
+            size={size.value}
             disabled={disabled}
             key="enterButton"
-            onClick={this.handleSearch}
+            onMousedown={onMousedown}
+            onClick={onSearch}
+            loading={loading}
+            icon={searchIcon}
           >
-            {enterButton === true || enterButton === '' ? <SearchOutlined /> : enterButton}
+            {enterButton}
           </Button>
         );
       }
       if (addonAfter) {
-        return [button, addonAfter];
+        button = [button, addonAfter];
       }
-
+      const cls = classNames(
-      return button;
+        prefixCls.value,
+        {
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+          [`${prefixCls.value}-${size.value}`]: !!size.value,
+          [`${prefixCls.value}-with-button`]: !!enterButton,
         },
-  },
+        attrs.class,
-  render() {
+      );
-    const {
+      return (
-      prefixCls: customizePrefixCls,
+        <Input
-      inputPrefixCls: customizeInputPrefixCls,
+          ref={inputRef}
-      size,
+          {...omit(restProps, ['onUpdate:value', 'onSearch'])}
-      class: className,
+          {...attrs}
-      ...restProps
+          onPressEnter={onSearch}
-    } = { ...getOptionProps(this), ...this.$attrs } as any;
+          size={size.value}
-    delete restProps.onSearch;
+          prefixCls={inputPrefixCls.value}
-    delete restProps.loading;
+          addonAfter={button}
-    delete restProps.enterButton;
+          suffix={suffix}
-    delete restProps.addonBefore;
+          onChange={onChange}
-    delete restProps['onUpdate:value'];
+          class={cls}
-    const getPrefixCls = this.configProvider.getPrefixCls;
+          disabled={disabled}
-    const prefixCls = getPrefixCls('input-search', customizePrefixCls);
+          v-slots={slots}
-    const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
+        />
-
+      );
-    let enterButton = getComponent(this, 'enterButton');
-    const addonBefore = getComponent(this, 'addonBefore');
-    enterButton = enterButton || enterButton === '';
-    let inputClassName: string;
-    if (enterButton) {
-      inputClassName = classNames(prefixCls, className, {
-        [`${prefixCls}-enter-button`]: !!enterButton,
-        [`${prefixCls}-${size}`]: !!size,
-      });
-    } else {
-      inputClassName = classNames(prefixCls, className);
-    }
-
-    const inputProps = {
-      ...restProps,
-      prefixCls: inputPrefixCls,
-      size,
-      suffix: this.renderSuffix(prefixCls),
-      prefix: getComponent(this, 'prefix'),
-      addonAfter: this.renderAddonAfter(prefixCls),
-      addonBefore,
-      class: inputClassName,
-      onPressEnter: this.handleSearch,
-      onChange: this.handleChange,
     };
-    return <Input {...inputProps} ref={this.saveInput} />;
   },
 });

components/input/inputProps.ts

@@ -1,29 +1,62 @@
-import type { PropType } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 import type { SizeType } from '../config-provider';
-export default {
+import { controlDefaultValue } from '../_util/util';
+export const inputDefaultValue = Symbol() as unknown as string;
+const inputProps = {
   id: PropTypes.string,
   prefixCls: PropTypes.string,
   inputPrefixCls: PropTypes.string,
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  value: {
+    type: [String, Number, Symbol] as PropType<string | number>,
+    default: controlDefaultValue,
+  },
   placeholder: {
     type: [String, Number] as PropType<string | number>,
   },
-  type: PropTypes.string.def('text'),
+  autocomplete: String,
+  type: {
+    type: String as PropType<
+      | 'button'
+      | 'checkbox'
+      | 'color'
+      | 'date'
+      | 'datetime-local'
+      | 'email'
+      | 'file'
+      | 'hidden'
+      | 'image'
+      | 'month'
+      | 'number'
+      | 'password'
+      | 'radio'
+      | 'range'
+      | 'reset'
+      | 'search'
+      | 'submit'
+      | 'tel'
+      | 'text'
+      | 'time'
+      | 'url'
+      | 'week'
+    >,
+    default: 'text',
+  },
   name: PropTypes.string,
   size: { type: String as PropType<SizeType> },
   disabled: PropTypes.looseBool,
   readonly: PropTypes.looseBool,
-  addonBefore: PropTypes.VNodeChild,
+  addonBefore: PropTypes.any,
-  addonAfter: PropTypes.VNodeChild,
+  addonAfter: PropTypes.any,
-  prefix: PropTypes.VNodeChild,
+  prefix: PropTypes.any,
-  suffix: PropTypes.VNodeChild,
+  suffix: PropTypes.any,
   autofocus: PropTypes.looseBool,
   allowClear: PropTypes.looseBool,
   lazy: PropTypes.looseBool.def(true),
   maxlength: PropTypes.number,
   loading: PropTypes.looseBool,
+  bordered: PropTypes.looseBool,
   onPressEnter: PropTypes.func,
   onKeydown: PropTypes.func,
   onKeyup: PropTypes.func,
@@ -34,3 +67,5 @@ export default {
   'onUpdate:value': PropTypes.func,
   valueModifiers: Object,
 };
+export default inputProps;
+export type InputProps = Partial<ExtractPropTypes<typeof inputProps>>;

components/input/style/search-input.less

@@ -6,29 +6,66 @@
 @search-prefix: ~'@{ant-prefix}-input-search';
 
 .@{search-prefix} {
-  &-icon {
+  .@{ant-prefix}-input {
-    color: @text-color-secondary;
+    &:hover,
-    cursor: pointer;
+    &:focus {
-    transition: all 0.3s;
+      border-color: @input-hover-border-color;
-    &:hover {
+
-      color: @input-icon-hover-color;
+      + .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
+        border-left-color: @input-hover-border-color;
+      }
     }
   }
 
-  &-enter-button {
+  .@{ant-prefix}-input-affix-wrapper {
-    input {
+    border-radius: 0;
-      border-right: 0;
   }
 
-    & + .@{ant-prefix}-input-group-addon,
+  // fix slight height diff in Firefox:
-    input + .@{ant-prefix}-input-group-addon {
+  // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
+  .@{ant-prefix}-input-lg {
+    line-height: @line-height-base - 0.0002;
+  }
+
+  > .@{ant-prefix}-input-group {
+    > .@{ant-prefix}-input-group-addon:last-child {
+      left: -1px;
       padding: 0;
       border: 0;
 
       .@{search-prefix}-button {
-        border-top-left-radius: 0;
+        padding-top: 0;
-        border-bottom-left-radius: 0;
+        padding-bottom: 0;
+        border-radius: 0 @border-radius-base @border-radius-base 0;
+      }
+
+      .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
+        color: @text-color-secondary;
+
+        &.@{ant-prefix}-btn-loading::before {
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
         }
       }
     }
   }
+
+  &-button {
+    height: @input-height-base;
+
+    &:hover,
+    &:focus {
+      z-index: 1;
+    }
+  }
+
+  &-large &-button {
+    height: @input-height-lg;
+  }
+
+  &-small &-button {
+    height: @input-height-sm;
+  }
+}