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

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

Hide file tree

Showing 2 changed files with 10 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,10 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
     [baseDomRef, slots, baseStyles, isDisabled, isInvalid, isRequired, isReadOnly, value, length],
   );
 
+  const isNumeric = (pattern: string) => {
+    return pattern === "/^\\d+$/";
+  };
+
   const getInputOtpProps = useCallback(
     (props: Partial<OTPInputProps> = {}) => {
       const otpProps: Omit<OTPInputProps, "render" | "children"> & {
@@ -246,6 +250,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
         pushPasswordManagerStrategy,
         pasteTransformer,
         noScriptCSSFallback,
+        inputMode: isNumeric(allowedKeys) ? "numeric" : "text",
         containerClassName: slots.wrapper?.({class: clsx(classNames?.wrapper, containerClassName)}),
         ...props,
       };