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

@@ -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)

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,22 +238,24 @@ 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,
       };
 
       return otpProps;
     },
     [
+      inputMode,
       isRequired,
       isDisabled,
       isReadOnly,

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";

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);
+};