feat(Field): add id prop (#9347)

src/field/Field.tsx

@@ -60,6 +60,7 @@ const [name, bem] = createNamespace('field');
 
 // provide to Search component to inherit
 export const fieldSharedProps = {
+  id: String,
   formatter: Function as PropType<(value: string) => string>,
   leftIcon: String,
   rightIcon: String,
@@ -401,6 +402,7 @@ export default defineComponent({
       }
 
       const inputAttrs = {
+        id: props.id,
         ref: inputRef,
         name: props.name,
         rows: props.rows !== undefined ? +props.rows : undefined,
@@ -493,7 +495,7 @@ export default defineComponent({
         return [slots.label(), colon];
       }
       if (props.label) {
-        return <label>{props.label + colon}</label>;
+        return <label for={props.id}>{props.label + colon}</label>;
       }
     };
 

src/field/README.md

@@ -249,7 +249,8 @@ Use `input-align` prop to align the input value.
 | --- | --- | --- | --- |
 | v-model | Field value | _number \| string_ | - |
 | label | Field label | _string_ | - |
-| name | Name | _string_ | - |
+| name | Field name | _string_ | - |
+| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | - |
 | type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | _string_ | `text` |
 | size | Size，can be set to `large` | _string_ | - |
 | maxlength | Max length of value | _number \| string_ | - |

src/field/README.zh-CN.md

@@ -268,7 +268,8 @@ export default {
 | --- | --- | --- | --- |
 | v-model | 当前输入的值 | _number \| string_ | - |
 | label | 输入框左侧文本 | _string_ | - |
-| name | 名称，提交表单的标识符 | _string_ | - |
+| name | 名称，作为提交表单时的标识符 | _string_ | - |
+| id `v3.2.2` | 输入框 id，同时会设置 label 的 for 属性 | _string_ | - |
 | type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | _string_ | `text` |
 | size | 大小，可选值为 `large` | _string_ | - |
 | maxlength | 输入的最大字符数 | _number \| string_ | - |

src/field/test/index.spec.js

@@ -455,3 +455,15 @@ test('should render autofocus attribute to input when using autofocus prop', asy
   const input = wrapper.find('input');
   expect(input.element.hasAttributes('autofocus')).toBeTruthy();
 });
+
+test('should render id props correctly', async () => {
+  const wrapper = mount(Field, {
+    props: {
+      label: 'Label',
+      id: 'my-id',
+    },
+  });
+
+  expect(wrapper.find('input').attributes('id')).toEqual('my-id');
+  expect(wrapper.find('label').attributes('for')).toEqual('my-id');
+});