how to auto focus input otp shadcn element

[shut grove]

I added tabIndex={0} to it and now it auto focuses using a useEffect on first render but it doesn't display the cursor.. can someone tell me the right way you are supposed to do this?
<InputOTPSlot autoFocus ref={firstInputRef} index={0} />

[graceful sundial]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[bitter osprey]

try passing autoFocus to <InputOTP />

[shut grove]

that didn't work either

probabaly because of this: but I can't edit this state in the parent

{hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-2/3 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}

[bitter osprey]

what is this? could you show the full code

[shut grove]

this is the input-otp.tsx

https://github.com/shadcn-ui/ui/blob/f47bb973bebaa38cb1bda8c56076ec962516a9bb/apps/www/registry/default/ui/input-otp.tsx#L4

The reason focus does not place a cursor is because it's not actually a cursor its just a div, but I can't manipulate the fake Caret state in the parent

[bitter osprey]

I know this is shadcn

"use client";

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp";

export function InputOTPDemo() {
  return (
    <InputOTP maxLength={6} autoFocus>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
      </InputOTPGroup>
      <InputOTPSeparator />
      <InputOTPGroup>
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
  );
}

this code work out of the box

[shut grove]

... But that doesn't auto focus

[bitter osprey]

so you have to show the code on how are you rendering the input

[bitter osprey]

I don't see you are rendering input-otp here

[shut grove]

I think you misunderstand my problem

I am rendering it fine, the values update no problem, and it links to my db fine as well

the problem is I can't focus it on render, because its a fake cursor, its two divs which allow the caret to have an animation

Thats why when you focus it it only has an outline but the caret doesn't show up

and there is no way to update the state outside of the parent

[shut grove]

You're clicking on it right?

When you open the page, it doesn't do that

[bitter osprey]

?

I hit refresh

[shut grove]

wtf

bro it doesnt work for me

[bitter osprey]

like I said, this code work out of the box

[shut grove]

that is hella weird

ima keep messing with it

thanks now I know it works

[bitter osprey]

you have to pass autoFocus to <InputOTP />

[shut grove]

i did bro

[bitter osprey]

<InputOTPSlot /> is a div

[shut grove]

didnt do anything

[bitter osprey]

<InputOTP /> is the input

[shut grove]

Im using tauri so idk maybe its different

I literally copy and pasted the shadcn thing in

[bitter osprey]

well consider showing your code, otherwise I can't help

[shut grove]

its the same code you sent. Ive tried auto focus in every element

But I have another component I already made so its all good, thx for the help