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

src/field/test/index.spec.js

@@ -456,7 +456,7 @@ test('should render autofocus attribute to input when using autofocus prop', asy
   expect(input.element.hasAttributes('autofocus')).toBeTruthy();
 });
 
-test('should render id props correctly', async () => {
+test('should render id prop correctly', async () => {
   const wrapper = mount(Field, {
     props: {
       label: 'Label',

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