From 07e163488269e3a08099e6ea19235120be51fb33 Mon Sep 17 00:00:00 2001
From: yuhengshen <yuhengshen@qq.com>
Date: Sun, 17 Nov 2024 09:37:55 +0800
Subject: [PATCH] feat(Field): add inputmode props (#13208)

---
 packages/vant/src/field/Field.tsx |  8 ++++++--
 packages/vant/src/field/utils.ts  | 19 +++++++++----------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx
index 4511df21a..9af4aad31 100644
--- a/packages/vant/src/field/Field.tsx
+++ b/packages/vant/src/field/Field.tsx
@@ -9,6 +9,7 @@ import {
   defineComponent,
   type PropType,
   type ExtractPropTypes,
+  type HTMLAttributes,
 } from 'vue';
 
 // Utils
@@ -112,6 +113,7 @@ export const fieldSharedProps = {
     type: Boolean,
     default: null,
   },
+  inputmode: String as PropType<HTMLAttributes['inputmode']>,
 };
 
 export const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
@@ -539,10 +541,12 @@ export default defineComponent({
       };
 
       if (props.type === 'textarea') {
-        return <textarea {...inputAttrs} />;
+        return <textarea {...inputAttrs} inputmode={props.inputmode} />;
       }
 
-      return <input {...mapInputType(props.type)} {...inputAttrs} />;
+      return (
+        <input {...mapInputType(props.type, props.inputmode)} {...inputAttrs} />
+      );
     };
 
     const renderLeftIcon = () => {
diff --git a/packages/vant/src/field/utils.ts b/packages/vant/src/field/utils.ts
index 0ca1d4ef0..75b272660 100644
--- a/packages/vant/src/field/utils.ts
+++ b/packages/vant/src/field/utils.ts
@@ -91,27 +91,26 @@ export function resizeTextarea(
   }
 }
 
-export function mapInputType(type: FieldType): {
+export function mapInputType(
+  type: FieldType,
+  inputmode?: HTMLAttributes['inputmode'],
+): {
   type: InputHTMLAttributes['type'];
   inputmode?: HTMLAttributes['inputmode'];
 } {
   // type="number" is weird in iOS, and can't prevent dot in Android
   // so use inputmode to set keyboard in modern browsers
   if (type === 'number') {
-    return {
-      type: 'text',
-      inputmode: 'decimal',
-    };
+    type = 'text';
+    inputmode ??= 'decimal';
   }
 
   if (type === 'digit') {
-    return {
-      type: 'tel',
-      inputmode: 'numeric',
-    };
+    type = 'tel';
+    inputmode ??= 'numeric';
   }
 
-  return { type };
+  return { type, inputmode };
 }
 
 // get correct length of emoji