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

nextui-org · Dec 19, 2024 · 644fbe5 · 644fbe5
1 parent 5494fa2
commit 644fbe5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/.changeset/cyan-donkeys-swim.md 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
@@ -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,
       };