feat(Search): id prop add default value (#9884)

packages/vant/src/search/README.md

@@ -122,7 +122,7 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt
 | label | Left side label | _string_ | - |
 | name `v3.2.3` | As the identifier when submitting the form | _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_ | - |
+| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | `van-search-n-input` |
 | background | Background color of field | _string_ | `#f2f2f2` |
 | maxlength | Max length of value | _number \| string_ | - |
 | placeholder | Placeholder | _string_ | - |

packages/vant/src/search/README.zh-CN.md

@@ -134,7 +134,7 @@ export default {
 | label | 搜索框左侧文本 | _string_ | - |
 | name `v3.2.3` | 名称，作为提交表单时的标识符 | _string_ | - |
 | shape | 搜索框形状，可选值为 `round` | _string_ | `square` |
-| id `v3.2.2` | 搜索框 id，同时会设置 label 的 for 属性 | _string_ | - |
+| id `v3.2.2` | 搜索框 id，同时会设置 label 的 for 属性 | _string_ | `van-search-n-input` |
 | background | 搜索框外部背景色 | _string_ | `#f2f2f2` |
 | maxlength | 输入的最大字符数 | _number \| string_ | - |
 | placeholder | 占位提示文字 | _string_ | - |

packages/vant/src/search/Search.tsx

@@ -12,6 +12,7 @@ import {
 import { fieldSharedProps } from '../field/Field';
 
 // Composables
+import { useId } from '../composables/use-id';
 import { useExpose } from '../composables/use-expose';
 
 // Components
@@ -42,6 +43,7 @@ export default defineComponent({
   emits: ['search', 'cancel', 'update:modelValue'],
 
   setup(props, { emit, slots, attrs }) {
+    const id = useId();
     const filedRef = ref<FieldInstance>();
 
     const onCancel = () => {
@@ -59,10 +61,12 @@ export default defineComponent({
       }
     };
 
+    const getInputId = () => props.id || `${id}-input`;
+
     const renderLabel = () => {
       if (slots.label || props.label) {
         return (
-          <label class={bem('label')} for={props.id}>
+          <label class={bem('label')} for={getInputId()}>
             {slots.label ? slots.label() : props.label}
           </label>
         );
@@ -93,7 +97,9 @@ export default defineComponent({
     >;
 
     const renderField = () => {
-      const fieldAttrs = extend({}, attrs, pick(props, fieldPropNames));
+      const fieldAttrs = extend({}, attrs, pick(props, fieldPropNames), {
+        id: getInputId(),
+      });
 
       const onInput = (value: string) => emit('update:modelValue', value);
 

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

@@ -12,7 +12,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
-                   id="van-field-input"
+                   id="van-search-input"
                    class="van-field__control"
                    placeholder="Placeholder"
             >
@@ -34,7 +34,7 @@ exports[`should render demo and match snapshot 1`] = `
           <div class="van-cell__value van-cell__value--alone van-field__value">
             <div class="van-field__body">
               <input type="search"
-                     id="van-field-input"
+                     id="van-search-input"
                      class="van-field__control"
                      placeholder="Placeholder"
               >
@@ -62,7 +62,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
-                   id="van-field-input"
+                   id="van-search-input"
                    class="van-field__control van-field__control--center"
                    placeholder="Placeholder"
             >
@@ -83,7 +83,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
-                   id="van-field-input"
+                   id="van-search-input"
                    class="van-field__control"
                    disabled
                    placeholder="Placeholder"
@@ -107,7 +107,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
-                   id="van-field-input"
+                   id="van-search-input"
                    class="van-field__control"
                    placeholder="Placeholder"
             >
@@ -120,7 +120,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">
-      <label class="van-search__label">
+      <label class="van-search__label"
+             for="van-search-input"
+      >
         Address
       </label>
       <div class="van-cell van-cell--borderless van-field van-search__field">
@@ -131,7 +133,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
-                   id="van-field-input"
+                   id="van-search-input"
                    class="van-field__control"
                    placeholder="Placeholder"
             >

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

@@ -10,7 +10,9 @@ exports[`should render action text when using action-text prop 1`] = `
 `;
 
 exports[`should render label slot correctly 1`] = `
-<label class="van-search__label">
+<label class="van-search__label"
+       for="van-search-input"
+>
   Custom Label
 </label>
 `;
@@ -34,7 +36,7 @@ exports[`should render left slot correctly 1`] = `
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
           <input type="search"
-                 id="van-field-input"
+                 id="van-search-input"
                  class="van-field__control"
           >
         </div>