fix(#112): use correct keyboard type for otp input

Author: zgeoff

lint-staged.config.js

@@ -7,7 +7,7 @@ export default {
   'projects/**/*.{ts,tsx}': [
     'yarn codegen:styles',
     (files) => `yarn nx affected --target=typecheck --files=${files.join(',')}`,
-    (files) => `yarn test run ${files.join(' ')}`,
+    'yarn test run --changed',
   ],
   'projects/**/*.{js,ts,jsx,tsx,json}': (files) => [
     `yarn format --files ${files.join(',')}`,

projects/app-web/app/routes/account_verify-2fa/route.tsx

@@ -250,6 +250,7 @@ export function AccountVerify2FARoute(props: Route.ComponentProps) {
                 ...getInputProps(fields.code, { type: 'text' }),
                 autoComplete: 'one-time-code',
                 autoFocus: true,
+                mode: 'numeric',
               }}
             />
             <input {...getInputProps(fields.target, { type: 'hidden' })} />

projects/app-web/app/routes/verify-otp/route.tsx

@@ -188,6 +188,20 @@ const INSTRUCTION_BY_TYPE: Record<VerificationType, string> = {
     'To enable two-factor authentication, please enter your six digit code from your authenticator app',
 };
 
+const OTP_INPUT_MODE_BY_TYPE: Record<
+  VerificationType,
+  'alphanumeric' | 'numeric'
+> = {
+  [VerificationType.ChangeEmail]: 'numeric',
+  [VerificationType.ChangeEmailConfirmation]: 'alphanumeric',
+  [VerificationType.ChangePassword]: 'numeric',
+  [VerificationType.Onboarding]: 'alphanumeric',
+  [VerificationType.ResetPassword]: 'alphanumeric',
+  [VerificationType.TwoFactorAuth]: 'numeric',
+  [VerificationType.TwoFactorAuthDisable]: 'numeric',
+  [VerificationType.TwoFactorAuthSetup]: 'numeric',
+};
+
 const pageInfo = css({
   marginBottom: '8',
   textAlign: 'center',
@@ -240,6 +254,8 @@ export function VerifyOTPRoute(props: Route.ComponentProps) {
     ? INSTRUCTION_BY_TYPE[type]
     : 'Please enter your verification code';
 
+  const otpInputMode = type ? OTP_INPUT_MODE_BY_TYPE[type] : 'numeric';
+
   return (
     <>
       <section className={pageInfo}>
@@ -258,6 +274,7 @@ export function VerifyOTPRoute(props: Route.ComponentProps) {
             ...getInputProps(fields[QueryParam.Code], { type: 'text' }),
             autoComplete: 'one-time-code',
             autoFocus: true,
+            mode: otpInputMode,
           }}
         />
         <input

projects/lib-design-system/src/components/otp-field/otp-field.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { Field } from '@base-ui-components/react/field';
 import { css, cx } from '@vers/styled-system/css';
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
+import { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
 import { InputOTP } from './input-otp.tsx';
 
 interface Props {
   className?: string;
   errors: Array<string>;
-  inputProps: React.ComponentProps<typeof Field.Control>;
+  inputProps: React.ComponentProps<typeof Field.Control> & {
+    mode?: 'alphanumeric' | 'numeric';
+  };
 }
 
 const container = css({
@@ -49,15 +51,24 @@ export function OTPField(props: Props) {
             controlProps.onChange?.(event);
           };
 
+          const pattern =
+            props.inputProps.mode === 'alphanumeric'
+              ? REGEXP_ONLY_DIGITS_AND_CHARS
+              : REGEXP_ONLY_DIGITS;
+
+          const inputMode =
+            props.inputProps.mode === 'alphanumeric' ? 'text' : 'numeric';
+
           return (
             <InputOTP
               {...controlProps}
               autoCapitalize="off"
               autoComplete="off"
               autoCorrect="off"
               data-testid="otp-input"
+              inputMode={inputMode}
               maxLength={6}
-              pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+              pattern={pattern}
               spellCheck={false}
               value={controlProps.value as string}
               onChange={onChange}