[Bug]: Input OTP `containerClassName` and `className` props should be separate things

[ahkhanjani]

Describe the bug

This is the shadcn source code:

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn("flex items-center gap-2", className)}
    {...props}
  />
))

In the original input OTP component, containerClassName and className apply to different things. Right now when passing containerClassName to shadcn's version it completely overrides container's class.

It should be modified like this:

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn("flex items-center gap-2", containerClassName)}
    {...props}
  />
))

Affected component/components

input-otp

How to reproduce

Codesandbox/StackBlitz link

https://github.com/shadcn-ui/ui

Logs

No response

System Info

-

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[ahkhanjani]

For a library that doesn't answer its issues most of the time creating an issue is way too hard. A repro link and system info shouldn't be required for a front-end, copy-paste source code library.

[Qodestackr]

Getting a bug too,

Failed to compile
./src/app/auth/reset-password/page.tsx
Error: 
  × Server actions must be async functions
    ╭─[/home/qodestackr/....telemed-ui/src/app/auth/reset-password/page.tsx:7:1]
  7 │         InputOTPSlot,
  8 │     } from "@/components/ui/input-otp"
  9 │     
 10 │ ╭─▶ export default function InputOTPDemo() {
 11 │ │       return (
 12 │ │           <InputOTP
 13 │ │               maxLength={6}
 14 │ │               render={({ slots }) => (
 15 │ │                   <>
 16 │ │                       <InputOTPGroup>
 17 │ │                           {slots.slice(0, 3).map((slot, index) => (
 18 │ │                               <InputOTPSlot key={index} {...slot} />
 19 │ │                           ))}{" "}
 20 │ │                       </InputOTPGroup>
 21 │ │                       <InputOTPSeparator />
 22 │ │                       <InputOTPGroup>
 23 │ │                           {slots.slice(3).map((slot, index) => (
 24 │ │                               <InputOTPSlot key={index + 3} {...slot} />
 25 │ │                           ))}
 26 │ │                       </InputOTPGroup>
 27 │ │                   </>
 28 │ │               )}
 29 │ │           />
 30 │ │       )
 31 │ ╰─▶ }
    ╰────
    ```
    
    
    Any Quick direct fix?

[flixlix]

@Qodestackr

This seems unrelated to the issue, but you probably have added use server; at the top of your file, which is not a correct usage of react components. https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

[guilhermerodz]

hi @ahkhanjani this is solved on the newest shadcn update