From 8447f07b307e1fc51b4a21e236e7b55434153dbe Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 29 Aug 2021 08:29:05 +0800
Subject: [PATCH] feat(Field): add id prop (#9347)

---
 src/field/Field.tsx          |  4 +++-
 src/field/README.md          |  3 ++-
 src/field/README.zh-CN.md    |  3 ++-
 src/field/test/index.spec.js | 12 ++++++++++++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/field/Field.tsx b/src/field/Field.tsx
index 34e2e4e06..1b33451aa 100644
--- a/src/field/Field.tsx
+++ b/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>;
       }
     };
 
diff --git a/src/field/README.md b/src/field/README.md
index 6c86719b1..ab665ba3b 100644
--- a/src/field/README.md
+++ b/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_ | - |
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index e40c84679..50e0966bd 100644
--- a/src/field/README.zh-CN.md
+++ b/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_ | - |
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js
index 311d77fe6..28e015067 100644
--- a/src/field/test/index.spec.js
+++ b/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');
+});