From 5f388fc68c7db7f852432e73386686d919d44d31 Mon Sep 17 00:00:00 2001
From: Maharshi Alpesh <maharshialpesh@gmail.com>
Date: Sun, 22 Dec 2024 19:57:48 +0530
Subject: [PATCH] fix: virtual keyboard on mobile should be based on the
 allowed keys (#4411)

* fix: virtual keyboard on mobile should be based on the allowed keys

* chore: applying junior's suggestions

* chore: add inputmode prop, update changeset

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
---
 .changeset/cyan-donkeys-swim.md                    |  6 ++++++
 packages/components/input-otp/src/use-input-otp.ts | 11 +++++++----
 packages/utilities/shared-utils/src/index.ts       |  1 +
 packages/utilities/shared-utils/src/regex.ts       |  5 +++++
 4 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/cyan-donkeys-swim.md
 create mode 100644 packages/utilities/shared-utils/src/regex.ts

diff --git a/.changeset/cyan-donkeys-swim.md b/.changeset/cyan-donkeys-swim.md
new file mode 100644
index 0000000000..fbd47f425a
--- /dev/null
+++ b/.changeset/cyan-donkeys-swim.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/input-otp": patch
+"@nextui-org/shared-utils": patch
+---
+
+Fix virtual keyboard to display the keys based on allowedKeys(#4408)
diff --git a/packages/components/input-otp/src/use-input-otp.ts b/packages/components/input-otp/src/use-input-otp.ts
index 70cd41947f..743fd0c2de 100644
--- a/packages/components/input-otp/src/use-input-otp.ts
+++ b/packages/components/input-otp/src/use-input-otp.ts
@@ -13,7 +13,7 @@ import {
 } from "@nextui-org/system";
 import {inputOtp} from "@nextui-org/theme";
 import {filterDOMProps, ReactRef, useDOMRef} from "@nextui-org/react-utils";
-import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
+import {clsx, dataAttr, objectToDeps, isPatternNumeric} from "@nextui-org/shared-utils";
 import {useCallback, useMemo} from "react";
 import {chain, mergeProps, useFormReset} from "@react-aria/utils";
 import {AriaTextFieldProps} from "@react-types/textfield";
@@ -120,6 +120,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
     containerClassName,
     noScriptCSSFallback,
     onChange,
+    inputMode,
     ...otherProps
   } = props;
 
@@ -237,15 +238,16 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
         minLength: minLength ?? length,
         textAlign,
         ref: inputRef,
-        name: name,
-        value: value,
+        name,
+        value,
         autoFocus,
         onChange: setValue,
         onBlur: chain(focusProps.onBlur, props?.onBlur),
-        onComplete: onComplete,
+        onComplete,
         pushPasswordManagerStrategy,
         pasteTransformer,
         noScriptCSSFallback,
+        inputMode: inputMode ?? (isPatternNumeric(allowedKeys) ? "numeric" : "text"),
         containerClassName: slots.wrapper?.({class: clsx(classNames?.wrapper, containerClassName)}),
         ...props,
       };
@@ -253,6 +255,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
       return otpProps;
     },
     [
+      inputMode,
       isRequired,
       isDisabled,
       isReadOnly,
diff --git a/packages/utilities/shared-utils/src/index.ts b/packages/utilities/shared-utils/src/index.ts
index b4b452ebef..eec14e1c31 100644
--- a/packages/utilities/shared-utils/src/index.ts
+++ b/packages/utilities/shared-utils/src/index.ts
@@ -8,3 +8,4 @@ export * from "./numbers";
 export * from "./console";
 export * from "./types";
 export * from "./dates";
+export * from "./regex";
diff --git a/packages/utilities/shared-utils/src/regex.ts b/packages/utilities/shared-utils/src/regex.ts
new file mode 100644
index 0000000000..ea614296f1
--- /dev/null
+++ b/packages/utilities/shared-utils/src/regex.ts
@@ -0,0 +1,5 @@
+export const isPatternNumeric = (pattern: string) => {
+  const numericPattern = /(^|\W)[0-9](\W|$)/;
+
+  return numericPattern.test(pattern) && !/[^\d\^$\[\]\(\)\*\+\-\.\|]/.test(pattern);
+};