feat(Search): add id prop (#9349)

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 prop 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');
+});

src/search/README.md

@@ -120,6 +120,7 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt
 | --- | --- | --- | --- |
 | label | Left side label | _string_ | - |
 | shape | Shape of field, can be set to `round` | _string_ | `square` |
+| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | - |
 | background | Background color of field | _string_ | `#f2f2f2` |
 | maxlength | Max length of value | _number \| string_ | - |
 | placeholder | Placeholder | _string_ | - |

src/search/README.zh-CN.md

@@ -132,6 +132,7 @@ export default {
 | --- | --- | --- | --- |
 | label | 搜索框左侧文本 | _string_ | - |
 | shape | 搜索框形状，可选值为 `round` | _string_ | `square` |
+| id `v3.2.2` | 搜索框 id，同时会设置 label 的 for 属性 | _string_ | - |
 | background | 搜索框外部背景色 | _string_ | `#f2f2f2` |
 | maxlength | 输入的最大字符数 | _number \| string_ | - |
 | placeholder | 占位提示文字 | _string_ | - |

src/search/Search.tsx

@@ -67,9 +67,9 @@ export default defineComponent({
     const renderLabel = () => {
       if (slots.label || props.label) {
         return (
-          <div class={bem('label')}>
+          <label class={bem('label')} for={props.id}>
             {slots.label ? slots.label() : props.label}
-          </div>
+          </label>
         );
       }
     };

src/search/test/__snapshots__/demo.spec.ts.snap

@@ -115,9 +115,9 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-search van-search--show-action">
     <div class="van-search__content van-search__content--square">
-      <div class="van-search__label">
+      <label class="van-search__label">
         Address
-      </div>
+      </label>
       <div class="van-cell van-cell--borderless van-field van-search__field">
         <div class="van-field__left-icon">
           <i class="van-badge__wrapper van-icon van-icon-search">

src/search/test/__snapshots__/index.spec.ts.snap

@@ -10,9 +10,9 @@ exports[`should render action text when using action-text prop 1`] = `
 `;
 
 exports[`should render label slot correctly 1`] = `
-<div class="van-search__label">
+<label class="van-search__label">
   Custom Label
-</div>
+</label>
 `;
 
 exports[`should render left icon when using left-icon prop 1`] = `

src/search/test/index.spec.ts

@@ -138,3 +138,15 @@ test('should call input.blur when vm.blur is called', () => {
   (wrapper.vm as SearchInstance).blur();
   expect(onBlur).toHaveBeenCalledTimes(1);
 });
+
+test('should render id prop correctly', async () => {
+  const wrapper = mount(Search, {
+    props: {
+      label: 'Label',
+      id: 'my-id',
+    },
+  });
+
+  expect(wrapper.find('input').attributes('id')).toEqual('my-id');
+  expect(wrapper.find('label').attributes('for')).toEqual('my-id');
+});