perf: useInjectFormItemContext

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

@@ -4,7 +4,7 @@ exports[`renders ./components/auto-complete/demo/basic.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"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-input ant-select-selection-search-input" 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"></span>
+  <div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" type="search" autocomplete="off" class="ant-input ant-select-selection-search-input" 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"></span>
     <!----><span class="ant-select-selection-placeholder">input here</span>
   </div>
   <!---->
@@ -17,7 +17,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.vue correctly
   <div class="ant-select ant-select-lg certain-category-search ant-select-lg ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 100%;">
     <!---->
     <!---->
-    <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-select-selection-search-input ant-input-affix-wrapper"><!----><input placeholder="input here" type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-input" 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"><span class="ant-input-suffix"><!----><span role="img" aria-label="search" class="anticon anticon-search certain-category-icon"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span></span></span>
+    <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-select-selection-search-input ant-input-affix-wrapper"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" type="search" autocomplete="off" class="ant-input" 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"><span class="ant-input-suffix"><!----><span role="img" aria-label="search" class="anticon anticon-search certain-category-icon"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span></span></span>
       <!----><span class="ant-select-selection-placeholder"><!----></span>
     </div>
     <!---->
@@ -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" class="ant-input ant-select-selection-search-input" style="height: 50px;" id="rc_select_TEST_OR_SSR" autocomplete="off" 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" class="ant-input ant-select-selection-search-input" style="height: 50px;" autocomplete="off" 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>
   <!---->
@@ -42,7 +42,7 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.vue correctl
 <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"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-input ant-select-selection-search-input" 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"></span>
+  <div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" type="search" autocomplete="off" class="ant-input ant-select-selection-search-input" 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"></span>
     <!----><span class="ant-select-selection-placeholder">input here</span>
   </div>
   <!---->
@@ -54,7 +54,7 @@ exports[`renders ./components/auto-complete/demo/options.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"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-input ant-select-selection-search-input" 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"></span>
+  <div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" type="search" autocomplete="off" class="ant-input ant-select-selection-search-input" 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"></span>
     <!----><span class="ant-select-selection-placeholder">input here</span>
   </div>
   <!---->
@@ -67,7 +67,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.vue correctl
   <div class="ant-select ant-select-lg global-search ant-select-lg ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 100%;">
     <!---->
     <!---->
-    <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-search ant-select-selection-search-input ant-input-search-enter-button ant-input-search-large ant-input-group-wrapper ant-input-group-wrapper-lg"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" 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" class="ant-input ant-input-lg"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button" type="button"><!----><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>
+    <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-search ant-select-selection-search-input ant-input-search-enter-button ant-input-search-large ant-input-group-wrapper ant-input-group-wrapper-lg"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" type="search" autocomplete="off" 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" class="ant-input ant-input-lg"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button" type="button"><!----><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>
       <!----><span class="ant-select-selection-placeholder"><!----></span>
     </div>
     <!---->

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -15,7 +15,7 @@ import { commonProps, rangePickerProps } from './props';
 import type { PanelMode, RangeValue } from '../../vc-picker/interface';
 import type { RangePickerSharedProps } from '../../vc-picker/RangePicker';
 import devWarning from '../../vc-util/devWarning';
-import { useInjectFormItemContext } from 'ant-design-vue/es/form/FormItemContext';
+import { useInjectFormItemContext } from '../../form/FormItemContext';
 
 export default function generateRangePicker<DateType, ExtraProps = {}>(
   generateConfig: GenerateConfig<DateType>,

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -14,7 +14,7 @@ import classNames from '../../_util/classNames';
 import { commonProps, datePickerProps } from './props';
 
 import devWarning from '../../vc-util/devWarning';
-import { useInjectFormItemContext } from 'ant-design-vue/es/form/FormItemContext';
+import { useInjectFormItemContext } from '../../form/FormItemContext';
 
 export default function generateSinglePicker<DateType, ExtraProps = {}>(
   generateConfig: GenerateConfig<DateType>,

components/date-picker/generatePicker/props.ts

@@ -19,6 +19,7 @@ import type { VueNode } from '../../_util/type';
 
 function commonProps<DateType>() {
   return {
+    id: String,
     dropdownClassName: String,
     dropdownAlign: { type: Object as PropType<AlignType> },
     popupStyle: { type: Object as PropType<CSSProperties> },
@@ -77,6 +78,7 @@ function commonProps<DateType>() {
 }
 
 export interface CommonProps<DateType> {
+  id?: string;
   prefixCls?: string;
   dropdownClassName?: string;
   dropdownAlign?: AlignType;

components/form/FormItem.tsx

@@ -276,6 +276,7 @@ export default defineComponent({
       id: fieldId,
       onFieldBlur,
       onFieldChange,
+      clearValidate,
     });
     let registered = false;
     watch(
@@ -305,12 +306,6 @@ export default defineComponent({
     onBeforeUnmount(() => {
       formContext.removeField(eventKey);
     });
-    // const onHelpAnimEnd = (_key: string, helpShow: boolean) => {
-    //   this.helpShow = helpShow;
-    //   if (!helpShow) {
-    //     this.$forceUpdate();
-    //   }
-    // };
     const itemClassName = computed(() => ({
       [`${prefixCls.value}-item`]: true,
 
@@ -324,36 +319,6 @@ export default defineComponent({
     }));
     return () => {
       const help = props.help ?? (slots.help ? filterEmpty(slots.help()) : null);
-      // const children = flattenChildren(slots.default?.());
-      // let firstChildren = children[0];
-      // if (fieldName.value && props.autoLink && isValidElement(firstChildren)) {
-      //   const originalEvents = firstChildren.props || {};
-      //   const originalBlur = originalEvents.onBlur;
-      //   const originalChange = originalEvents.onChange;
-      //   firstChildren = cloneElement(firstChildren, {
-      //     ...(fieldId.value ? { id: fieldId.value } : undefined),
-      //     onBlur: (...args: any[]) => {
-      //       if (Array.isArray(originalChange)) {
-      //         for (let i = 0, l = originalChange.length; i < l; i++) {
-      //           originalBlur[i](...args);
-      //         }
-      //       } else if (originalBlur) {
-      //         originalBlur(...args);
-      //       }
-      //       onFieldBlur();
-      //     },
-      //     onChange: (...args: any[]) => {
-      //       if (Array.isArray(originalChange)) {
-      //         for (let i = 0, l = originalChange.length; i < l; i++) {
-      //           originalChange[i](...args);
-      //         }
-      //       } else if (originalChange) {
-      //         originalChange(...args);
-      //       }
-      //       onFieldChange();
-      //     },
-      //   });
-      // }
       return (
         <Row
           {...attrs}

components/form/FormItemContext.ts

@@ -2,9 +2,10 @@ import type { ComputedRef, InjectionKey } from 'vue';
 import { computed, inject, provide } from 'vue';
 
 export type FormItemContext = {
-  id: ComputedRef<string | number>;
+  id: ComputedRef<string>;
   onFieldBlur: () => void;
   onFieldChange: () => void;
+  clearValidate: () => void;
 };
 
 type ContextProps = FormItemContext;
@@ -20,6 +21,7 @@ export const useInjectFormItemContext = () => {
     id: computed(() => undefined),
     onFieldBlur: () => {},
     onFieldChange: () => {},
+    clearValidate: () => {},
   };
 
   // We should prevent the passing of context for children

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -141,7 +141,7 @@ exports[`renders ./components/form/demo/custom-validation.vue correctly 1`] = `
       </label></div>
     <div class="ant-col ant-col-14 ant-form-item-control">
       <div class="ant-form-item-control-input">
-        <div class="ant-form-item-control-input-content"><input type="password" autocomplete="off" id="custom-validation_pass" class="ant-input"></div>
+        <div class="ant-form-item-control-input-content"><input type="password" id="custom-validation_pass" autocomplete="off" class="ant-input"></div>
         <!---->
       </div>
       <!---->
@@ -154,7 +154,7 @@ exports[`renders ./components/form/demo/custom-validation.vue correctly 1`] = `
       </label></div>
     <div class="ant-col ant-col-14 ant-form-item-control">
       <div class="ant-form-item-control-input">
-        <div class="ant-form-item-control-input-content"><input type="password" autocomplete="off" id="custom-validation_checkPass" class="ant-input"></div>
+        <div class="ant-form-item-control-input-content"><input type="password" id="custom-validation_checkPass" autocomplete="off" class="ant-input"></div>
         <!---->
       </div>
       <!---->

components/form/demo/validation.vue

@@ -27,13 +27,12 @@ Just add the `rules` attribute for `Form` component, pass validation rules, and
       <a-input v-model:value="formState.name" />
     </a-form-item>
     <a-form-item label="Activity zone" name="region">
-      <a-select
+      <a-select v-model:value="formState.region" placeholder="please select your zone">
-        v-model:value="formState.region"
+        <a-select-option value="shanghai">Zone one</a-select-option>
-        placeholder="please select your zone"
+        <a-select-option value="beijing">Zone two</a-select-option>
-        :options="option"
+      </a-select>
-      ></a-select>
     </a-form-item>
-    <!-- <a-form-item label="Activity time" required name="date1">
+    <a-form-item label="Activity time" required name="date1">
       <a-date-picker
         v-model:value="formState.date1"
         show-time
@@ -60,7 +59,7 @@ Just add the `rules` attribute for `Form` component, pass validation rules, and
     </a-form-item>
     <a-form-item label="Activity form" name="desc">
       <a-textarea v-model:value="formState.desc" />
-    </a-form-item> -->
+    </a-form-item>
     <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
       <a-button type="primary" @click="onSubmit">Create</a-button>
       <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
@@ -132,12 +131,6 @@ export default defineComponent({
       rules,
       onSubmit,
       resetForm,
-      option: ref([
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-      ]),
     };
   },
 });

components/form/index.tsx

@@ -2,6 +2,7 @@ import type { App, Plugin } from 'vue';
 import Form, { formProps } from './Form';
 import FormItem, { formItemProps } from './FormItem';
 import useForm from './useForm';
+import { useInjectFormItemContext } from './FormItemContext';
 
 export type { FormProps } from './Form';
 export type { FormItemProps } from './FormItem';
@@ -13,10 +14,11 @@ Form.install = function (app: App) {
   return app;
 };
 
-export { FormItem, formItemProps, formProps, useForm };
+export { FormItem, formItemProps, formProps, useForm, useInjectFormItemContext };
 
 export default Form as typeof Form &
   Plugin & {
     readonly Item: typeof Form.Item;
     readonly useForm: typeof useForm;
+    readonly useInjectFormItemContext: typeof useInjectFormItemContext;
   };

components/input-number/index.tsx

@@ -9,6 +9,7 @@ import VcInputNumber from '../vc-input-number/src';
 import { defaultConfigProvider } from '../config-provider';
 import { tuple, withInstall } from '../_util/type';
 import type { EventHandler } from '../_util/EventInterface';
+import { useInjectFormItemContext } from '../form/FormItemContext';
 
 const inputNumberProps = {
   prefixCls: PropTypes.string,
@@ -40,7 +41,9 @@ const InputNumber = defineComponent({
   name: 'AInputNumber',
   inheritAttrs: false,
   props: inputNumberProps,
-  setup(props) {
+  emits: ['input', 'change', 'blur', 'update:value'],
+  setup(props, { emit }) {
+    const formItemContext = useInjectFormItemContext();
     const inputNumberRef = ref(null);
     const focus = () => {
       inputNumberRef.value.focus();
@@ -48,6 +51,13 @@ const InputNumber = defineComponent({
     const blur = () => {
       inputNumberRef.value.blur();
     };
+    const handleChange = (val: number) => {
+      emit('update:value', val);
+      emit('change', val);
+    };
+    const handleBlur = () => {
+      emit('blur');
+    };
     onMounted(() => {
       nextTick(() => {
         if (process.env.NODE_ENV === 'test') {
@@ -62,6 +72,9 @@ const InputNumber = defineComponent({
       inputNumberRef,
       focus,
       blur,
+      formItemContext,
+      handleBlur,
+      handleChange,
     };
   },
 
@@ -70,6 +83,7 @@ const InputNumber = defineComponent({
       prefixCls: customizePrefixCls,
       size,
       class: className,
+      id = this.formItemContext.id.value,
       ...others
     } = {
       ...getOptionProps(this),
@@ -94,6 +108,9 @@ const InputNumber = defineComponent({
       downHandler: downIcon,
       ...others,
       class: inputNumberClass,
+      onChange: this.handleChange,
+      onBlur: this.handleBlur,
+      id,
     };
     return <VcInputNumber {...vcInputNumberProps} ref="inputNumberRef" />;
   },

components/input/Input.tsx

@@ -178,6 +178,7 @@ export default defineComponent({
       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,
@@ -245,12 +246,7 @@ export default defineComponent({
       prefix,
       isFocused,
     };
-    return (
+
-      <ClearableLabeledInput
+    return <ClearableLabeledInput {...props} ref={this.saveClearableInput} />;
-        {...props}
-        id={props.id ?? this.formItemContext.id.value}
-        ref={this.saveClearableInput}
-      />
-    );
   },
 });

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -66,7 +66,7 @@ exports[`renders ./components/input/demo/group.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"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-input ant-select-selection-search-input" 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"></span>
+  <div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" type="search" autocomplete="off" class="ant-input ant-select-selection-search-input" 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"></span>
     <!----><span class="ant-select-selection-placeholder">Email</span>
   </div>
   <!---->

components/input/inputProps.ts

@@ -2,6 +2,7 @@ import type { PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 import type { SizeType } from '../config-provider';
 export default {
+  id: PropTypes.string,
   prefixCls: PropTypes.string,
   inputPrefixCls: PropTypes.string,
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

components/mentions/__tests__/__snapshots__/demo.test.js.snap

@@ -21,7 +21,7 @@ exports[`renders ./components/mentions/demo/form.vue correctly 1`] = `
     <div class="ant-col ant-col-18 ant-form-item-control">
       <div class="ant-form-item-control-input">
         <div class="ant-form-item-control-input-content">
-          <div class="ant-mentions"><textarea rows="1"></textarea>
+          <div class="ant-mentions"><textarea rows="1" id="coders"></textarea>
             <!---->
           </div>
         </div>
@@ -38,7 +38,7 @@ exports[`renders ./components/mentions/demo/form.vue correctly 1`] = `
     <div class="ant-col ant-col-18 ant-form-item-control">
       <div class="ant-form-item-control-input">
         <div class="ant-form-item-control-input-content">
-          <div class="ant-mentions"><textarea rows="3" placeholder="You can use @ to ref user here"></textarea>
+          <div class="ant-mentions"><textarea rows="3" placeholder="You can use @ to ref user here" id="bio"></textarea>
             <!---->
           </div>
         </div>

components/mentions/index.tsx

@@ -7,6 +7,7 @@ import VcMentions from '../vc-mentions';
 import { mentionsProps as baseMentionsProps } from '../vc-mentions/src/mentionsProps';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { flattenChildren, getOptionProps } from '../_util/props-util';
+import { useInjectFormItemContext } from '../form/FormItemContext';
 
 const { Option } = VcMentions;
 
@@ -75,6 +76,7 @@ const mentionsProps = {
   },
   notFoundContent: PropTypes.any,
   defaultValue: String,
+  id: String,
 };
 
 export type MentionsProps = Partial<ExtractPropTypes<typeof mentionsProps>>;
@@ -92,6 +94,7 @@ const Mentions = defineComponent({
     const focused = ref(false);
     const vcMentions = ref(null);
     const value = ref(props.value ?? props.defaultValue ?? '');
+    const formItemContext = useInjectFormItemContext();
     watch(
       () => props.value,
       val => {
@@ -106,6 +109,7 @@ const Mentions = defineComponent({
     const handleBlur = (e: FocusEvent) => {
       focused.value = false;
       emit('blur', e);
+      formItemContext.onFieldBlur();
     };
 
     const handleSelect = (...args: [MentionsOptionProps, string]) => {
@@ -119,6 +123,7 @@ const Mentions = defineComponent({
       }
       emit('update:value', val);
       emit('change', val);
+      formItemContext.onFieldChange();
     };
 
     const getNotFoundContent = () => {
@@ -159,7 +164,13 @@ const Mentions = defineComponent({
     });
 
     return () => {
-      const { disabled, getPopupContainer, rows = 1, ...restProps } = props;
+      const {
+        disabled,
+        getPopupContainer,
+        rows = 1,
+        id = formItemContext.id.value,
+        ...restProps
+      } = props;
       const { class: className, ...otherAttrs } = attrs;
       const otherProps = omit(restProps, ['defaultValue', 'onUpdate:value', 'prefixCls']);
 
@@ -186,6 +197,7 @@ const Mentions = defineComponent({
         onBlur: handleBlur,
         ref: vcMentions,
         value: value.value,
+        id,
       };
       return (
         <VcMentions

components/radio/Group.tsx

@@ -6,6 +6,7 @@ import { getOptionProps, filterEmpty, hasProp, getSlot } from '../_util/props-ut
 import { defaultConfigProvider } from '../config-provider';
 import { tuple } from '../_util/type';
 import type { RadioChangeEvent } from './interface';
+import { useInjectFormItemContext } from '../form/FormItemContext';
 
 export default defineComponent({
   name: 'ARadioGroup',
@@ -19,10 +20,13 @@ export default defineComponent({
     name: PropTypes.string,
     buttonStyle: PropTypes.string.def('outline'),
     onChange: PropTypes.func,
+    id: PropTypes.string,
   },
   emits: ['update:value', 'change'],
   setup() {
+    const formItemContext = useInjectFormItemContext();
     return {
+      formItemContext,
       updatingValue: false,
       configProvider: inject('configProvider', defaultConfigProvider),
       radioGroupContext: null,
@@ -65,6 +69,7 @@ export default defineComponent({
         this.updatingValue = true;
         this.$emit('update:value', value);
         this.$emit('change', ev);
+        this.formItemContext.onFieldChange();
       }
       nextTick(() => {
         this.updatingValue = false;
@@ -73,7 +78,12 @@ export default defineComponent({
   },
   render() {
     const props = getOptionProps(this);
-    const { prefixCls: customizePrefixCls, options, buttonStyle } = props;
+    const {
+      prefixCls: customizePrefixCls,
+      options,
+      buttonStyle,
+      id = this.formItemContext.id.value,
+    } = props;
     const { getPrefixCls } = this.configProvider;
     const prefixCls = getPrefixCls('radio', customizePrefixCls);
 
@@ -114,6 +124,10 @@ export default defineComponent({
       });
     }
 
-    return <div class={classString}>{children}</div>;
+    return (
+      <div class={classString} id={id}>
+        {children}
+      </div>
+    );
   },
 });

components/radio/Radio.tsx

@@ -6,6 +6,7 @@ import classNames from '../_util/classNames';
 import { getOptionProps } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
 import type { RadioChangeEvent } from './interface';
+import { useInjectFormItemContext } from '../form/FormItemContext';
 
 export const radioProps = {
   prefixCls: PropTypes.string,
@@ -30,9 +31,11 @@ export default defineComponent({
   props: radioProps,
   emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'],
   setup() {
+    const formItemContext = useInjectFormItemContext();
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
       radioGroupContext: inject('radioGroupContext', null),
+      formItemContext,
     };
   },
   methods: {
@@ -47,6 +50,7 @@ export default defineComponent({
       this.$emit('update:checked', targetChecked);
       this.$emit('update:value', targetChecked);
       this.$emit('change', event);
+      this.formItemContext.onFieldChange();
     },
     onChange2(e: RadioChangeEvent) {
       this.$emit('change', e);
@@ -59,12 +63,17 @@ export default defineComponent({
   render() {
     const { $slots, radioGroupContext: radioGroup } = this;
     const props = getOptionProps(this);
-    const { prefixCls: customizePrefixCls, ...restProps } = props;
+    const {
+      prefixCls: customizePrefixCls,
+      id = this.formItemContext.id.value,
+      ...restProps
+    } = props;
     const { getPrefixCls } = this.configProvider;
     const prefixCls = getPrefixCls('radio', customizePrefixCls);
 
     const rProps: RadioProps = {
       prefixCls,
+      id,
       ...restProps,
     };
 

components/rate/index.tsx

@@ -12,6 +12,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 
 import Star from './Star';
 import { useRef } from '../_util/hooks/useRef';
+import { useInjectFormItemContext } from '../form/FormItemContext';
 
 export const rateProps = {
   prefixCls: PropTypes.string,
@@ -25,6 +26,7 @@ export const rateProps = {
   autofocus: PropTypes.looseBool,
   tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   direction: PropTypes.string,
+  id: PropTypes.string,
 };
 
 export type RateProps = Partial<ExtractPropTypes<typeof rateProps>>;
@@ -44,6 +46,7 @@ const Rate = defineComponent({
   emits: ['hoverChange', 'update:value', 'change', 'focus', 'blur', 'keydown'],
   setup(props, { slots, attrs, emit, expose }) {
     const { prefixCls, direction } = useConfigInject('rate', props);
+    const formItemContext = useInjectFormItemContext();
     const rateRef = ref();
     const [setRef, starRefs] = useRef();
     const state = reactive({
@@ -82,6 +85,7 @@ const Rate = defineComponent({
       }
       emit('update:value', value);
       emit('change', value);
+      formItemContext.onFieldChange();
     };
 
     const onHover = (e: MouseEvent, index: number) => {
@@ -115,6 +119,7 @@ const Rate = defineComponent({
     const onBlur = () => {
       state.focused = false;
       emit('blur');
+      formItemContext.onFieldBlur();
     };
     const onKeyDown = (event: KeyboardEvent) => {
       const { keyCode } = event;
@@ -187,7 +192,7 @@ const Rate = defineComponent({
     const character = getPropsSlot(slots, props, 'character') || <StarFilled />;
 
     return () => {
-      const { count, allowHalf, disabled, tabindex } = props;
+      const { count, allowHalf, disabled, tabindex, id = formItemContext.id.value } = props;
       const { class: className, style } = attrs;
       const stars = [];
       const disabledClass = disabled ? `${prefixCls.value}-disabled` : '';
@@ -216,6 +221,7 @@ const Rate = defineComponent({
       return (
         <ul
           {...attrs}
+          id={id}
           class={rateClassName}
           style={style}
           onMouseleave={disabled ? null : onMouseLeave}

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`renders ./components/slider/demo/basic.vue correctly 1`] = `
 <div>
-  <div tabindex="-1" class="ant-slider">
+  <div id="test" tabindex="-1" class="ant-slider">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
     <div class="ant-slider-step"></div>

components/slider/index.tsx

@@ -10,6 +10,7 @@ import type { TooltipPlacement } from '../tooltip/Tooltip';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import SliderTooltip from './SliderTooltip';
 import classNames from '../_util/classNames';
+import { useInjectFormItemContext } from '../form/FormItemContext';
 
 export type SliderValue = number | [number, number];
 
@@ -39,6 +40,7 @@ type Value = [number, number] | number;
 
 const defaultTipFormatter = (value: number) => (typeof value === 'number' ? value.toString() : '');
 export const sliderProps = () => ({
+  id: String,
   prefixCls: String,
   tooltipPrefixCls: String,
   range: { type: [Boolean, Object] as PropType<boolean | SliderRange>, default: undefined },
@@ -78,11 +80,12 @@ const Slider = defineComponent({
   props: {
     ...sliderProps(),
   },
-  emits: ['update:value', 'change', 'afterChange'],
+  emits: ['update:value', 'change', 'afterChange', 'blur'],
   slots: ['mark'],
   setup(props, { attrs, slots, emit, expose }) {
     const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } =
       useConfigInject('slider', props);
+    const formItemContext = useInjectFormItemContext();
     const sliderRef = ref();
     const visibles = ref<Visibles>({});
     const toggleTooltipVisible = (index: number, visible: boolean) => {
@@ -107,6 +110,10 @@ const Slider = defineComponent({
     const handleChange = (val: SliderValue) => {
       emit('update:value', val);
       emit('change', val);
+      formItemContext.onFieldChange();
+    };
+    const handleBlur = () => {
+      emit('blur');
     };
     expose({
       focus,
@@ -140,7 +147,12 @@ const Slider = defineComponent({
       );
     };
     return () => {
-      const { tooltipPrefixCls: customizeTooltipPrefixCls, range, ...restProps } = props;
+      const {
+        tooltipPrefixCls: customizeTooltipPrefixCls,
+        range,
+        id = formItemContext.id.value,
+        ...restProps
+      } = props;
       const tooltipPrefixCls = configProvider.getPrefixCls('tooltip', customizeTooltipPrefixCls);
       const cls = classNames(attrs.class, {
         [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
@@ -181,6 +193,7 @@ const Slider = defineComponent({
       return (
         <VcSlider
           {...restProps}
+          id={id}
           step={restProps.step!}
           class={cls}
           ref={ref}
@@ -193,6 +206,7 @@ const Slider = defineComponent({
           }
           prefixCls={prefixCls.value}
           onChange={handleChange}
+          onBlur={handleBlur}
           v-slots={{ mark: slots.mark }}
         />
       );

components/switch/index.tsx

@@ -9,10 +9,12 @@ import { tuple, withInstall } from '../_util/type';
 import { getPropsSlot } from '../_util/props-util';
 import Omit from 'omit.js';
 import useConfigInject from '../_util/hooks/useConfigInject';
+import { useInjectFormItemContext } from '../form/FormItemContext';
 
 export const SwitchSizes = tuple('small', 'default');
 type CheckedType = boolean | string | number;
 const switchProps = {
+  id: PropTypes.string,
   prefixCls: PropTypes.string,
   size: PropTypes.oneOf(SwitchSizes),
   disabled: PropTypes.looseBool,
@@ -55,8 +57,9 @@ const Switch = defineComponent({
   inheritAttrs: false,
   props: switchProps,
   slots: ['checkedChildren', 'unCheckedChildren'],
-  emits: ['update:checked', 'mouseup', 'change', 'click', 'keydown'],
+  emits: ['update:checked', 'mouseup', 'change', 'click', 'keydown', 'blur'],
   setup(props, { attrs, slots, expose, emit }) {
+    const formItemContext = useInjectFormItemContext();
     onBeforeMount(() => {
       warning(
         !('defaultChecked' in attrs),
@@ -104,6 +107,11 @@ const Switch = defineComponent({
       }
       emit('update:checked', check);
       emit('change', check, e);
+      formItemContext.onFieldChange();
+    };
+
+    const handleBlur = () => {
+      emit('blur');
     };
 
     const handleClick = (e: MouseEvent) => {
@@ -147,10 +155,13 @@ const Switch = defineComponent({
             'defaultChecked',
             'checkedValue',
             'unCheckedValue',
+            'id',
           ])}
           {...attrs}
+          id={props.id ?? formItemContext.id.value}
           onKeydown={handleKeyDown}
           onClick={handleClick}
+          onBlur={handleBlur}
           onMouseup={handleMouseUp}
           type="button"
           role="switch"

components/time-picker/time-picker.tsx

@@ -11,6 +11,7 @@ import type { GenerateConfig } from '../vc-picker/generate';
 import type { PanelMode, RangeValue } from '../vc-picker/interface';
 import type { RangePickerSharedProps } from '../vc-picker/RangePicker';
 import devWarning from '../vc-util/devWarning';
+import { useInjectFormItemContext } from '../form/FormItemContext';
 
 export interface TimePickerLocale {
   placeholder?: string;
@@ -74,6 +75,7 @@ function createTimePicker<
     slot: ['addon', 'renderExtraFooter', 'suffixIcon', 'clearIcon'],
     emits: ['change', 'openChange', 'focus', 'blur', 'ok', 'update:value', 'update:open'],
     setup(props, { slots, expose, emit, attrs }) {
+      const formItemContext = useInjectFormItemContext();
       devWarning(
         !(slots.addon || props.addon),
         'TimePicker',
@@ -91,6 +93,7 @@ function createTimePicker<
       const onChange = (value: DateType | string, dateString: string) => {
         emit('update:value', value);
         emit('change', value, dateString);
+        formItemContext.onFieldChange();
       };
       const onOpenChange = (open: boolean) => {
         emit('update:open', open);
@@ -101,15 +104,18 @@ function createTimePicker<
       };
       const onBlur = () => {
         emit('blur');
+        formItemContext.onFieldBlur();
       };
       const onOk = (value: DateType) => {
         emit('ok', value);
       };
       return () => {
+        const { id = formItemContext.id.value, ...restProps } = props;
         return (
           <InternalTimePicker
             {...attrs}
-            {...props}
+            {...restProps}
+            id={id}
             dropdownClassName={props.popupClassName}
             mode={undefined}
             ref={pickerRef}
@@ -152,6 +158,9 @@ function createTimePicker<
     ],
     setup(props, { slots, expose, emit, attrs }) {
       const pickerRef = ref();
+
+      const formItemContext = useInjectFormItemContext();
+
       expose({
         focus: () => {
           pickerRef.value?.focus();
@@ -166,6 +175,7 @@ function createTimePicker<
       ) => {
         emit('update:value', values);
         emit('change', values, dateStrings);
+        formItemContext.onFieldChange();
       };
       const onOpenChange = (open: boolean) => {
         emit('update:open', open);
@@ -176,6 +186,7 @@ function createTimePicker<
       };
       const onBlur = () => {
         emit('blur');
+        formItemContext.onFieldBlur();
       };
       const onPanelChange = (
         values: RangeValue<string> | RangeValue<DateType>,
@@ -194,10 +205,12 @@ function createTimePicker<
         emit('calendarChange', values, dateStrings, info);
       };
       return () => {
+        const { id = formItemContext.id.value, ...restProps } = props;
         return (
           <InternalRangePicker
             {...attrs}
-            {...props}
+            {...restProps}
+            id={id}
             dropdownClassName={props.popupClassName}
             picker="time"
             mode={undefined}

components/transfer/index.tsx

@@ -13,6 +13,7 @@ import { withInstall } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import type { TransferListBodyProps } from './ListBody';
 import type { PaginationType } from './interface';
+import { useInjectFormItemContext } from '../form/FormItemContext';
 
 export type { TransferListProps } from './list';
 export type { TransferOperationProps } from './operation';
@@ -64,6 +65,7 @@ export interface TransferLocale {
 }
 
 export const transferProps = {
+  id: String,
   prefixCls: String,
   dataSource: { type: Array as PropType<TransferItem[]>, default: [] },
   disabled: { type: Boolean, default: undefined },
@@ -118,6 +120,7 @@ const Transfer = defineComponent({
     const sourceSelectedKeys = ref([]);
     const targetSelectedKeys = ref([]);
 
+    const formItemContext = useInjectFormItemContext();
     watch(
       () => props.selectedKeys,
       () => {
@@ -164,6 +167,7 @@ const Transfer = defineComponent({
       emit('update:targetKeys', newTargetKeys);
       handleSelectChange(oppositeDirection, []);
       emit('change', newTargetKeys, direction, newMoveKeys);
+      formItemContext.onFieldChange();
     };
 
     const moveToLeft = () => {
@@ -312,6 +316,7 @@ const Transfer = defineComponent({
         selectAllLabels = [],
         oneWay,
         pagination,
+        id = formItemContext.id.value,
       } = props;
       const { class: className, style } = attrs;
 
@@ -335,7 +340,7 @@ const Transfer = defineComponent({
       const rightTitle =
         (titles && titles[1]) ?? slots.rightTitle?.() ?? (locale.titles || ['', ''])[1];
       return (
-        <div class={cls} style={style}>
+        <div class={cls} style={style} id={id}>
           <List
             key="leftList"
             prefixCls={`${prefixCls.value}-list`}

components/tree-select/index.tsx

@@ -20,6 +20,7 @@ import renderSwitcherIcon from '../tree/utils/iconUtil';
 import type { AntTreeNodeProps } from '../tree/Tree';
 import { warning } from '../vc-util/warning';
 import { flattenChildren } from '../_util/props-util';
+import { useInjectFormItemContext } from '../form/FormItemContext';
 
 const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
   if (transitionName !== undefined) {
@@ -92,6 +93,8 @@ const TreeSelect = defineComponent({
         '`replaceFields` is deprecated, please use fieldNames instead',
       );
     });
+
+    const formItemContext = useInjectFormItemContext();
     const {
       configProvider,
       prefixCls,
@@ -131,6 +134,7 @@ const TreeSelect = defineComponent({
     const handleChange = (...args: any[]) => {
       emit('update:value', args[0]);
       emit('change', ...args);
+      formItemContext.onFieldChange();
     };
     const handleTreeExpand = (...args: any[]) => {
       emit('update:treeExpandedKeys', args[0]);
@@ -140,6 +144,10 @@ const TreeSelect = defineComponent({
       emit('update:searchValue', args[0]);
       emit('search', ...args);
     };
+    const handleBlur = () => {
+      emit('blur');
+      formItemContext.onFieldBlur();
+    };
     return () => {
       const {
         notFoundContent = slots.notFoundContent?.(),
@@ -154,6 +162,7 @@ const TreeSelect = defineComponent({
         treeLine,
         switcherIcon = slots.switcherIcon?.(),
         fieldNames = props.replaceFields,
+        id = formItemContext.id.value,
       } = props;
       // ===================== Icons =====================
       const { suffixIcon, removeIcon, clearIcon } = getIcons(
@@ -202,6 +211,7 @@ const TreeSelect = defineComponent({
           virtual={virtual.value}
           dropdownMatchSelectWidth={dropdownMatchSelectWidth.value}
           {...selectProps}
+          id={id}
           fieldNames={fieldNames}
           ref={treeSelectRef}
           prefixCls={prefixCls.value}
@@ -223,6 +233,7 @@ const TreeSelect = defineComponent({
           choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
           transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
           onChange={handleChange}
+          onBlur={handleBlur}
           onSearch={handleSearch}
           onTreeExpand={handleTreeExpand}
           v-slots={{

components/upload/Upload.tsx

@@ -14,6 +14,7 @@ import { UploadProps } from './interface';
 import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './utils';
 import { defineComponent, inject } from 'vue';
 import { getDataAndAriaProps } from '../_util/util';
+import { useInjectFormItemContext } from '../form/FormItemContext';
 
 export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed';
 export interface UploadFile<T = any> {
@@ -54,10 +55,12 @@ export default defineComponent({
     supportServerRender: true,
   }),
   setup() {
+    const formItemContext = useInjectFormItemContext();
     return {
       upload: null,
       progressTimer: null,
       configProvider: inject('configProvider', defaultConfigProvider),
+      formItemContext,
     };
   },
   // recentUploadStatus: boolean | PromiseLike<any>;
@@ -190,6 +193,7 @@ export default defineComponent({
       }
       this.$emit('update:fileList', info.fileList);
       this.$emit('change', info);
+      this.formItemContext.onFieldChange();
     },
     onFileDrop(e) {
       this.setState({
@@ -276,6 +280,7 @@ export default defineComponent({
 
     const vcUploadProps = {
       ...this.$props,
+      id: this.$props.id ?? this.formItemContext.id.value,
       prefixCls,
       beforeUpload: this.reBeforeUpload,
       onStart: this.onStart,

components/vc-input-number/src/index.jsx

@@ -158,7 +158,6 @@ export default defineComponent({
         typeof nextValue === 'number' &&
         nextValue > max
       ) {
-        this.__emit('update:value', max);
         this.__emit('change', max);
       }
       if (
@@ -167,7 +166,6 @@ export default defineComponent({
         typeof nextValue === 'number' &&
         nextValue < min
       ) {
-        this.__emit('update:value', min);
         this.__emit('change', min);
       }
     }
@@ -277,7 +275,6 @@ export default defineComponent({
       this.rawInput = this.parser(this.getValueFromEvent(e));
       this.setState({ inputValue: this.rawInput });
       const num = this.toNumber(this.rawInput); // valid number or invalid string
-      this.__emit('update:value', num);
       this.__emit('change', num);
     },
     onFocus(...args) {
@@ -374,7 +371,6 @@ export default defineComponent({
         );
       }
       if (changed) {
-        this.__emit('update:value', newValue);
         this.__emit('change', newValue);
       }
       return newValue;

components/vc-slider/src/common/createSlider.tsx

@@ -16,6 +16,7 @@ function noop() {}
 export default function createSlider(Component) {
   // const displayName = `ComponentEnhancer(${Component.displayName})`
   const propTypes = {
+    id: PropTypes.string,
     min: PropTypes.number,
     max: PropTypes.number,
     step: PropTypes.number,
@@ -292,8 +293,9 @@ export default function createSlider(Component) {
         railStyle,
         dotStyle,
         activeDotStyle,
+        id,
       } = this;
-      const { class: className, style, id } = this.$attrs;
+      const { class: className, style } = this.$attrs;
       const { tracks, handles } = this.renderSlider();
 
       const sliderClassName = classNames(prefixCls, className, {