From f197c5f3c3651a12ad1d92b23fc40ef4819e8f65 Mon Sep 17 00:00:00 2001
From: landluck <landl_ww@163.com>
Date: Mon, 10 Jul 2023 17:49:20 +0800
Subject: [PATCH] feat(field): expand click area support (#5479)

---
 .../test/__snapshots__/demo.spec.ts.snap      | 24 ++++++---
 .../test/__snapshots__/demo.spec.ts.snap      | 24 ++++++---
 packages/field/README.md                      |  6 ++-
 packages/field/index.wxml                     | 12 ++---
 packages/field/input.wxml                     |  1 +
 .../test/__snapshots__/demo.spec.ts.snap      | 54 ++++++++++++-------
 packages/field/textarea.wxml                  |  1 +
 .../test/__snapshots__/demo.spec.ts.snap      |  6 +++
 8 files changed, 87 insertions(+), 41 deletions(-)

diff --git a/packages/cascader/test/__snapshots__/demo.spec.ts.snap b/packages/cascader/test/__snapshots__/demo.spec.ts.snap
index 9ca8a016..0f5973dc 100644
--- a/packages/cascader/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/cascader/test/__snapshots__/demo.spec.ts.snap
@@ -29,14 +29,15 @@ exports[`should render demo and match snapshot 1`] = `
               class="van-cell__title title-class"
               style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
             >
-              <wx-view
+              <wx-label
                 class="label-class van-field__label"
+                for=""
                 slot="title"
               >
                 
     地区
   
-              </wx-view>
+              </wx-label>
             </wx-view>
             <wx-view
               class="van-cell__value value-class"
@@ -60,6 +61,7 @@ exports[`should render demo and match snapshot 1`] = `
                   disabled="{{true}}"
                   focus="{{false}}"
                   holdKeyboard="{{false}}"
+                  id=""
                   maxlength="{{-1}}"
                   password="{{false}}"
                   placeholder="请选择地区"
@@ -138,14 +140,15 @@ exports[`should render demo and match snapshot 1`] = `
               class="van-cell__title title-class"
               style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
             >
-              <wx-view
+              <wx-label
                 class="label-class van-field__label"
+                for=""
                 slot="title"
               >
                 
     地区
   
-              </wx-view>
+              </wx-label>
             </wx-view>
             <wx-view
               class="van-cell__value value-class"
@@ -169,6 +172,7 @@ exports[`should render demo and match snapshot 1`] = `
                   disabled="{{true}}"
                   focus="{{false}}"
                   holdKeyboard="{{false}}"
+                  id=""
                   maxlength="{{-1}}"
                   password="{{false}}"
                   placeholder="请选择地区"
@@ -247,14 +251,15 @@ exports[`should render demo and match snapshot 1`] = `
               class="van-cell__title title-class"
               style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
             >
-              <wx-view
+              <wx-label
                 class="label-class van-field__label"
+                for=""
                 slot="title"
               >
                 
     地区
   
-              </wx-view>
+              </wx-label>
             </wx-view>
             <wx-view
               class="van-cell__value value-class"
@@ -278,6 +283,7 @@ exports[`should render demo and match snapshot 1`] = `
                   disabled="{{true}}"
                   focus="{{false}}"
                   holdKeyboard="{{false}}"
+                  id=""
                   maxlength="{{-1}}"
                   password="{{false}}"
                   placeholder="请选择地区"
@@ -356,14 +362,15 @@ exports[`should render demo and match snapshot 1`] = `
               class="van-cell__title title-class"
               style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
             >
-              <wx-view
+              <wx-label
                 class="label-class van-field__label"
+                for=""
                 slot="title"
               >
                 
     地区
   
-              </wx-view>
+              </wx-label>
             </wx-view>
             <wx-view
               class="van-cell__value value-class"
@@ -387,6 +394,7 @@ exports[`should render demo and match snapshot 1`] = `
                   disabled="{{true}}"
                   focus="{{false}}"
                   holdKeyboard="{{false}}"
+                  id=""
                   maxlength="{{-1}}"
                   password="{{false}}"
                   placeholder="请选择地区"
diff --git a/packages/config-provider/test/__snapshots__/demo.spec.ts.snap b/packages/config-provider/test/__snapshots__/demo.spec.ts.snap
index 1dba2905..05005b9f 100644
--- a/packages/config-provider/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/config-provider/test/__snapshots__/demo.spec.ts.snap
@@ -30,14 +30,15 @@ exports[`should render demo and match snapshot 1`] = `
                   class="van-cell__title title-class"
                   style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                 >
-                  <wx-view
+                  <wx-label
                     class="label-class van-field__label"
+                    for=""
                     slot="title"
                   >
                     
     评分
   
-                  </wx-view>
+                  </wx-label>
                 </wx-view>
                 <wx-view
                   class="van-cell__value value-class"
@@ -167,6 +168,7 @@ exports[`should render demo and match snapshot 1`] = `
                       disabled="{{false}}"
                       focus="{{false}}"
                       holdKeyboard="{{false}}"
+                      id=""
                       maxlength="{{-1}}"
                       password="{{false}}"
                       placeholder=""
@@ -210,14 +212,15 @@ exports[`should render demo and match snapshot 1`] = `
                   class="van-cell__title title-class"
                   style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                 >
-                  <wx-view
+                  <wx-label
                     class="label-class van-field__label"
+                    for=""
                     slot="title"
                   >
                     
     滑块
   
-                  </wx-view>
+                  </wx-label>
                 </wx-view>
                 <wx-view
                   class="van-cell__value value-class"
@@ -282,6 +285,7 @@ exports[`should render demo and match snapshot 1`] = `
                       disabled="{{false}}"
                       focus="{{false}}"
                       holdKeyboard="{{false}}"
+                      id=""
                       maxlength="{{-1}}"
                       password="{{false}}"
                       placeholder=""
@@ -386,14 +390,15 @@ exports[`should render demo and match snapshot 1`] = `
                       class="van-cell__title title-class"
                       style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                     >
-                      <wx-view
+                      <wx-label
                         class="label-class van-field__label"
+                        for=""
                         slot="title"
                       >
                         
     评分
   
-                      </wx-view>
+                      </wx-label>
                     </wx-view>
                     <wx-view
                       class="van-cell__value value-class"
@@ -523,6 +528,7 @@ exports[`should render demo and match snapshot 1`] = `
                           disabled="{{false}}"
                           focus="{{false}}"
                           holdKeyboard="{{false}}"
+                          id=""
                           maxlength="{{-1}}"
                           password="{{false}}"
                           placeholder=""
@@ -566,14 +572,15 @@ exports[`should render demo and match snapshot 1`] = `
                       class="van-cell__title title-class"
                       style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                     >
-                      <wx-view
+                      <wx-label
                         class="label-class van-field__label"
+                        for=""
                         slot="title"
                       >
                         
     滑块
   
-                      </wx-view>
+                      </wx-label>
                     </wx-view>
                     <wx-view
                       class="van-cell__value value-class"
@@ -638,6 +645,7 @@ exports[`should render demo and match snapshot 1`] = `
                           disabled="{{false}}"
                           focus="{{false}}"
                           holdKeyboard="{{false}}"
+                          id=""
                           maxlength="{{-1}}"
                           password="{{false}}"
                           placeholder=""
diff --git a/packages/field/README.md b/packages/field/README.md
index 0ffb8b9f..04795ff5 100644
--- a/packages/field/README.md
+++ b/packages/field/README.md
@@ -240,13 +240,17 @@ Page({
 
 相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=input%20%E6%89%8B%E5%86%99%E8%BE%93%E5%85%A5&page=1&block=1&random=1567079239098)。
 
+### 如何扩大点击区域？点击 label、错误信息 都能聚焦唤起键盘呢？
+
+升级至 1.10.21 版本及以上，配置 `name` 属性即可
+
 ## API
 
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| name | 在表单内提交时的标识符 | _string_ | - |
+| name | 在表单内提交时的标识符。可以通过配置 `name` 来扩大点击区域 | _string_ | - |
 | label | 输入框左侧文本 | _string_ | - |
 | size | 单元格大小，可选值为 `large` | _string_ | - |
 | value | 当前输入的值 | _string \| number_ | - |
diff --git a/packages/field/index.wxml b/packages/field/index.wxml
index 117adb74..60189933 100644
--- a/packages/field/index.wxml
+++ b/packages/field/index.wxml
@@ -16,9 +16,9 @@
   custom-class="custom-class van-field"
 >
   <slot name="left-icon" slot="icon" />
-  <view wx:if="{{ label }}" class="label-class {{ utils.bem('field__label', { disabled }) }}" slot="title">
+  <label for="{{ name }}" wx:if="{{ label }}" class="label-class {{ utils.bem('field__label', { disabled }) }}" slot="title">
     {{ label }}
-  </view>
+  </label>
   <slot wx:else name="label" slot="title" />
   <view class="{{ utils.bem('field__body', [type]) }}">
     <view class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}" bindtap="onClickInput">
@@ -47,10 +47,10 @@
       <slot name="button" />
     </view>
   </view>
-  <view wx:if="{{ showWordLimit && maxlength }}" class="van-field__word-limit">
+  <label for="{{ name }}" wx:if="{{ showWordLimit && maxlength }}" class="van-field__word-limit">
     <view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length >= maxlength ? maxlength : value.length }}</view>/{{ maxlength }}
-  </view>
-  <view wx:if="{{ errorMessage }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
+  </label>
+  <label for="{{ name }}"  wx:if="{{ errorMessage }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
     {{ errorMessage }}
-  </view>
+  </label>
 </van-cell>
diff --git a/packages/field/input.wxml b/packages/field/input.wxml
index efe9a08d..e39a5ee3 100644
--- a/packages/field/input.wxml
+++ b/packages/field/input.wxml
@@ -1,4 +1,5 @@
 <input
+  id="{{ name }}"
   class="{{ utils.bem('field__control', [inputAlign, { disabled, error }]) }} input-class"
   type="{{ type }}"
   focus="{{ focus }}"
diff --git a/packages/field/test/__snapshots__/demo.spec.ts.snap b/packages/field/test/__snapshots__/demo.spec.ts.snap
index ae3cdae9..f366c163 100644
--- a/packages/field/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/field/test/__snapshots__/demo.spec.ts.snap
@@ -52,6 +52,7 @@ exports[`should render demo and match snapshot 1`] = `
                       disabled="{{false}}"
                       focus="{{false}}"
                       holdKeyboard="{{false}}"
+                      id=""
                       maxlength="{{-1}}"
                       password="{{false}}"
                       placeholder="请输入用户名"
@@ -115,14 +116,15 @@ exports[`should render demo and match snapshot 1`] = `
                   class="van-cell__title title-class"
                   style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                 >
-                  <wx-view
+                  <wx-label
                     class="label-class van-field__label"
+                    for=""
                     slot="title"
                   >
                     
     用户名
   
-                  </wx-view>
+                  </wx-label>
                 </wx-view>
                 <wx-view
                   class="van-cell__value value-class"
@@ -146,6 +148,7 @@ exports[`should render demo and match snapshot 1`] = `
                       disabled="{{false}}"
                       focus="{{false}}"
                       holdKeyboard="{{false}}"
+                      id=""
                       maxlength="{{-1}}"
                       password="{{false}}"
                       placeholder="请输入用户名"
@@ -200,14 +203,15 @@ exports[`should render demo and match snapshot 1`] = `
                   class="van-cell__title title-class"
                   style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                 >
-                  <wx-view
+                  <wx-label
                     class="label-class van-field__label"
+                    for=""
                     slot="title"
                   >
                     
     密码
   
-                  </wx-view>
+                  </wx-label>
                 </wx-view>
                 <wx-view
                   class="van-cell__value value-class"
@@ -231,6 +235,7 @@ exports[`should render demo and match snapshot 1`] = `
                       disabled="{{false}}"
                       focus="{{false}}"
                       holdKeyboard="{{false}}"
+                      id=""
                       maxlength="{{-1}}"
                       password="{{true}}"
                       placeholder="请输入密码"
@@ -301,14 +306,15 @@ exports[`should render demo and match snapshot 1`] = `
                   class="van-cell__title title-class"
                   style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                 >
-                  <wx-view
+                  <wx-label
                     class="label-class van-field__label van-field__label--disabled"
+                    for=""
                     slot="title"
                   >
                     
     用户名
   
-                  </wx-view>
+                  </wx-label>
                 </wx-view>
                 <wx-view
                   class="van-cell__value value-class"
@@ -332,6 +338,7 @@ exports[`should render demo and match snapshot 1`] = `
                       disabled="{{true}}"
                       focus="{{false}}"
                       holdKeyboard="{{false}}"
+                      id=""
                       maxlength="{{-1}}"
                       password="{{false}}"
                       placeholder=""
@@ -392,14 +399,15 @@ exports[`should render demo and match snapshot 1`] = `
                   class="van-cell__title title-class"
                   style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                 >
-                  <wx-view
+                  <wx-label
                     class="label-class van-field__label"
+                    for=""
                     slot="title"
                   >
                     
     用户名
   
-                  </wx-view>
+                  </wx-label>
                 </wx-view>
                 <wx-view
                   class="van-cell__value value-class"
@@ -423,6 +431,7 @@ exports[`should render demo and match snapshot 1`] = `
                       disabled="{{false}}"
                       focus="{{false}}"
                       holdKeyboard="{{false}}"
+                      id=""
                       maxlength="{{-1}}"
                       password="{{false}}"
                       placeholder="请输入用户名"
@@ -466,14 +475,15 @@ exports[`should render demo and match snapshot 1`] = `
                   class="van-cell__title title-class"
                   style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                 >
-                  <wx-view
+                  <wx-label
                     class="label-class van-field__label"
+                    for=""
                     slot="title"
                   >
                     
     手机号
   
-                  </wx-view>
+                  </wx-label>
                 </wx-view>
                 <wx-view
                   class="van-cell__value value-class"
@@ -497,6 +507,7 @@ exports[`should render demo and match snapshot 1`] = `
                       disabled="{{false}}"
                       focus="{{false}}"
                       holdKeyboard="{{false}}"
+                      id=""
                       maxlength="{{-1}}"
                       password="{{false}}"
                       placeholder="请输入手机号"
@@ -521,13 +532,14 @@ exports[`should render demo and match snapshot 1`] = `
                       class="van-field__button"
                     />
                   </wx-view>
-                  <wx-view
+                  <wx-label
                     class="van-field__error-message"
+                    for=""
                   >
                     
     手机号格式错误
   
-                  </wx-view>
+                  </wx-label>
                 </wx-view>
               </wx-view>
             </van-cell>
@@ -564,14 +576,15 @@ exports[`should render demo and match snapshot 1`] = `
                   class="van-cell__title title-class"
                   style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                 >
-                  <wx-view
+                  <wx-label
                     class="label-class van-field__label"
+                    for=""
                     slot="title"
                   >
                     
     用户名
   
-                  </wx-view>
+                  </wx-label>
                 </wx-view>
                 <wx-view
                   class="van-cell__value value-class"
@@ -595,6 +608,7 @@ exports[`should render demo and match snapshot 1`] = `
                       disabled="{{false}}"
                       focus="{{false}}"
                       holdKeyboard="{{false}}"
+                      id=""
                       maxlength="{{-1}}"
                       password="{{false}}"
                       placeholder="请输入用户名"
@@ -657,14 +671,15 @@ exports[`should render demo and match snapshot 1`] = `
                   class="van-cell__title title-class"
                   style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                 >
-                  <wx-view
+                  <wx-label
                     class="label-class van-field__label"
+                    for=""
                     slot="title"
                   >
                     
     留言
   
-                  </wx-view>
+                  </wx-label>
                 </wx-view>
                 <wx-view
                   class="van-cell__value value-class"
@@ -688,6 +703,7 @@ exports[`should render demo and match snapshot 1`] = `
                       fixed="{{false}}"
                       focus="{{false}}"
                       holdKeyboard="{{false}}"
+                      id=""
                       maxlength="{{-1}}"
                       placeholder="请输入留言"
                       placeholderClass="van-field__placeholder"
@@ -751,14 +767,15 @@ exports[`should render demo and match snapshot 1`] = `
                   class="van-cell__title title-class"
                   style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
                 >
-                  <wx-view
+                  <wx-label
                     class="label-class van-field__label"
+                    for=""
                     slot="title"
                   >
                     
     短信验证码
   
-                  </wx-view>
+                  </wx-label>
                 </wx-view>
                 <wx-view
                   class="van-cell__value value-class"
@@ -782,6 +799,7 @@ exports[`should render demo and match snapshot 1`] = `
                       disabled="{{false}}"
                       focus="{{false}}"
                       holdKeyboard="{{false}}"
+                      id=""
                       maxlength="{{-1}}"
                       password="{{false}}"
                       placeholder="请输入短信验证码"
diff --git a/packages/field/textarea.wxml b/packages/field/textarea.wxml
index 5015a51d..d42c1849 100644
--- a/packages/field/textarea.wxml
+++ b/packages/field/textarea.wxml
@@ -1,4 +1,5 @@
 <textarea
+  id="{{ name }}"
   class="{{ utils.bem('field__control', [inputAlign, type, { disabled, error }]) }} input-class"
   fixed="{{ fixed }}"
   focus="{{ focus }}"
diff --git a/packages/search/test/__snapshots__/demo.spec.ts.snap b/packages/search/test/__snapshots__/demo.spec.ts.snap
index 43e76405..55e28fc3 100644
--- a/packages/search/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/search/test/__snapshots__/demo.spec.ts.snap
@@ -77,6 +77,7 @@ exports[`should render demo and match snapshot 1`] = `
                         disabled="{{false}}"
                         focus="{{false}}"
                         holdKeyboard="{{false}}"
+                        id=""
                         maxlength="{{-1}}"
                         password="{{false}}"
                         placeholder="请输入搜索关键词"
@@ -187,6 +188,7 @@ exports[`should render demo and match snapshot 1`] = `
                         disabled="{{false}}"
                         focus="{{false}}"
                         holdKeyboard="{{false}}"
+                        id=""
                         maxlength="{{-1}}"
                         password="{{false}}"
                         placeholder="请输入搜索关键词"
@@ -305,6 +307,7 @@ exports[`should render demo and match snapshot 1`] = `
                         disabled="{{false}}"
                         focus="{{false}}"
                         holdKeyboard="{{false}}"
+                        id=""
                         maxlength="{{-1}}"
                         password="{{false}}"
                         placeholder="请输入搜索关键词"
@@ -411,6 +414,7 @@ exports[`should render demo and match snapshot 1`] = `
                         disabled="{{true}}"
                         focus="{{false}}"
                         holdKeyboard="{{false}}"
+                        id=""
                         maxlength="{{-1}}"
                         password="{{false}}"
                         placeholder="请输入搜索关键词"
@@ -517,6 +521,7 @@ exports[`should render demo and match snapshot 1`] = `
                         disabled="{{false}}"
                         focus="{{false}}"
                         holdKeyboard="{{false}}"
+                        id=""
                         maxlength="{{-1}}"
                         password="{{false}}"
                         placeholder="请输入搜索关键词"
@@ -630,6 +635,7 @@ exports[`should render demo and match snapshot 1`] = `
                         disabled="{{false}}"
                         focus="{{false}}"
                         holdKeyboard="{{false}}"
+                        id=""
                         maxlength="{{-1}}"
                         password="{{false}}"
                         placeholder="请输入搜索关键词"