feat(elements): Add autoSubmit prop to OTP input (#2837)

* chore(elements): Update otp-playground to use step

* feat(elements): Add autoSubmit prop to OTP input

* chore(elements): Bump version

Author: LekoArts

.changeset/cyan-pumpkins-try.md

@@ -0,0 +1,2 @@
+---
+---

packages/elements/examples/nextjs/app/otp-playground/page.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import { Field, Input, Label } from '@clerk/elements/common';
-import { SignIn, Start } from '@clerk/elements/sign-in';
+import { SignIn, Step } from '@clerk/elements/sign-in';
 import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
 
 export default function Page() {
   return (
     <SignIn path='/otp-playground'>
-      <Start>
+      <Step name='start'>
         <div className='h-dvh flex items-center justify-center bg-neutral-800'>
           <Field name='code'>
             <Label className='sr-only'>Label</Label>
@@ -48,7 +48,7 @@ export default function Page() {
             />
           </Field>
         </div>
-      </Start>
+      </Step>
     </SignIn>
   );
 }

packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx

@@ -104,6 +104,7 @@ export default function SignInPage() {
               <CustomField
                 label='Email Code'
                 name='code'
+                autoSubmit
               />
 
               <CustomSubmit>Verify</CustomSubmit>

packages/elements/examples/nextjs/components/form.tsx

@@ -33,40 +33,42 @@ function OTPInputSegment({ value, status }: any) {
   );
 }
 
-export const CustomField = React.forwardRef<typeof Input, { name: string; label: string; required?: boolean }>(
-  function CustomField({ name, label, required = false }, forwardedRef) {
-    const inputProps =
-      name === 'code'
-        ? {
-            render: OTPInputSegment,
-            className: 'flex gap-3',
-            required,
-          }
-        : {
-            className: 'bg-tertiary rounded-sm px-2 py-1 border border-foreground data-[invalid]:border-red-500',
-            ref: forwardedRef,
-            required,
-          };
+export const CustomField = React.forwardRef<
+  typeof Input,
+  { name: string; label: string; required?: boolean; autoSubmit?: boolean }
+>(function CustomField({ name, label, required = false, autoSubmit = false }, forwardedRef) {
+  const inputProps =
+    name === 'code'
+      ? {
+          render: OTPInputSegment,
+          className: 'flex gap-3',
+          required,
+          autoSubmit,
+        }
+      : {
+          className: 'bg-tertiary rounded-sm px-2 py-1 border border-foreground data-[invalid]:border-red-500',
+          ref: forwardedRef,
+          required,
+        };
 
-    return (
-      <ElementsField
-        name={name}
-        className='flex flex-col gap-4'
-      >
-        <div className='flex gap-4 justify-between items-center'>
-          <Label>{label}</Label>
-          <Input
-            name={name}
-            {...inputProps}
-          />
-        </div>
+  return (
+    <ElementsField
+      name={name}
+      className='flex flex-col gap-4'
+    >
+      <div className='flex gap-4 justify-between items-center'>
+        <Label>{label}</Label>
+        <Input
+          name={name}
+          {...inputProps}
+        />
+      </div>
 
-        <FieldError className='block text-red-400 font-mono' />
-        <FieldState>{({ state }) => <pre className='opacity-60 text-xs'>Field state: {state}</pre>}</FieldState>
-      </ElementsField>
-    );
-  },
-);
+      <FieldError className='block text-red-400 font-mono' />
+      <FieldState>{({ state }) => <pre className='opacity-60 text-xs'>Field state: {state}</pre>}</FieldState>
+    </ElementsField>
+  );
+});
 
 type CustomSubmitElement = React.ElementRef<typeof ElementsSubmit>;
 

packages/elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clerk/elements",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Clerk Elements",
   "keywords": [
     "clerk",

packages/elements/src/react/common/form/otp.tsx

@@ -9,6 +9,7 @@ export type OTPInputProps = Exclude<
 > & {
   render?: (props: { value: string; status: 'cursor' | 'selected' | 'none'; index: number }) => React.ReactNode;
   length?: number;
+  autoSubmit?: boolean;
 };
 
 type SelectionRange = readonly [start: number, end: number];
@@ -44,7 +45,7 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(functi
  */
 const OTPInputSegmented = React.forwardRef<HTMLInputElement, Required<Pick<OTPInputProps, 'render'>> & OTPInputProps>(
   function OTPInput(props, ref) {
-    const { className, render, length = OTP_LENGTH_DEFAULT, ...rest } = props;
+    const { className, render, length = OTP_LENGTH_DEFAULT, autoSubmit = false, ...rest } = props;
 
     const innerRef = React.useRef<HTMLInputElement>(null);
     const [selectionRange, setSelectionRange] = React.useState<SelectionRange>(props.autoFocus ? ZERO : OUTSIDE);
@@ -60,6 +61,13 @@ const OTPInputSegmented = React.forwardRef<HTMLInputElement, Required<Pick<OTPIn
       setSelectionRange(cur => selectionRangeUpdater(cur, innerRef));
     }, [props.value]);
 
+    // Fire the requestSubmit callback when the input has the required length and autoSubmit is enabled
+    React.useEffect(() => {
+      if (String(props.value).length === length && autoSubmit) {
+        innerRef.current?.form?.requestSubmit();
+      }
+    }, [props.value, length, autoSubmit]);
+
     return (
       <div
         style={
@@ -86,16 +94,7 @@ const OTPInputSegmented = React.forwardRef<HTMLInputElement, Required<Pick<OTPIn
             setSelectionRange(cur => selectionRangeUpdater(cur, innerRef));
             rest?.onSelect?.(event);
           }}
-          style={{
-            display: 'block',
-            cursor: 'default',
-            background: 'none',
-            outline: 'none',
-            appearance: 'none',
-            color: 'transparent',
-            position: 'absolute',
-            inset: 0,
-          }}
+          style={inputStyle}
         />
         <div
           className={className}
@@ -106,7 +105,7 @@ const OTPInputSegmented = React.forwardRef<HTMLInputElement, Required<Pick<OTPIn
           }}
         >
           {Array.from({ length }).map((_, i) => (
-            <React.Fragment key={i}>
+            <React.Fragment key={`otp-segment-${i}`}>
               {render({
                 value: String(props.value)[i] || '',
                 status:
@@ -152,3 +151,14 @@ function selectionRangeUpdater(cur: SelectionRange, inputRef: React.RefObject<HT
 
   return updated;
 }
+
+const inputStyle = {
+  display: 'block',
+  cursor: 'default',
+  background: 'none',
+  outline: 'none',
+  appearance: 'none',
+  color: 'transparent',
+  position: 'absolute',
+  inset: 0,
+} satisfies React.CSSProperties;