From 644fbe5b00ca00960e7af75656a5109c63f72ba4 Mon Sep 17 00:00:00 2001
From: Maharshi Alpesh <maharshialpesh@gmail.com>
Date: Fri, 20 Dec 2024 00:00:52 +0530
Subject: [PATCH] fix: virtual keyboard on mobile should be based on the
 allowed keys

---
 .changeset/cyan-donkeys-swim.md                    | 5 +++++
 packages/components/input-otp/src/use-input-otp.ts | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .changeset/cyan-donkeys-swim.md

diff --git a/.changeset/cyan-donkeys-swim.md b/.changeset/cyan-donkeys-swim.md
new file mode 100644
index 0000000000..07558fd0b0
--- /dev/null
+++ b/.changeset/cyan-donkeys-swim.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/input-otp": 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 0206c4565d..a6a2a66342 100644
--- a/packages/components/input-otp/src/use-input-otp.ts
+++ b/packages/components/input-otp/src/use-input-otp.ts
@@ -223,6 +223,12 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
     [baseDomRef, slots, baseStyles, isDisabled, isInvalid, isRequired, isReadOnly, value, length],
   );
 
+  const isNumeric = (pattern: string) => {
+    const numericPattern = /(^|\W)[0-9](\W|$)/;
+
+    return numericPattern.test(pattern) && !/[^\d\^$\[\]\(\)\*\+\-\.\|]/.test(pattern);
+  };
+
   const getInputOtpProps = useCallback(
     (props: Partial<OTPInputProps> = {}) => {
       const otpProps: Omit<OTPInputProps, "render" | "children"> & {
@@ -246,6 +252,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
         pushPasswordManagerStrategy,
         pasteTransformer,
         noScriptCSSFallback,
+        inputMode: isNumeric(allowedKeys) ? "numeric" : "text",
         containerClassName: slots.wrapper?.({class: clsx(classNames?.wrapper, containerClassName)}),
         ...props,
       };