shadcn InputOTPGroup组件光标不闪烁及自动聚焦异常问题

问题分析 #

你遇到的两个核心问题：

• OTP输入框无光标闪烁动画：动画配置已添加，但未正确应用到输入元素上
• 自动聚焦后无法输入：ref未指向真实的input DOM元素，导致focus()调用无效

解决方案 #

1. 修复自动聚焦失效问题 #

InputOTPSlot是shadcn封装的组件，直接将useRef绑定到组件上无法获取内部的<input>元素，因此调用focus()不会生效。推荐两种修复方式：

方式一：使用InputOTP的全局ref

直接给InputOTP组件添加ref，利用其内置的focus()方法快速聚焦第一个输入框：

// 在组件内定义ref
const otpInputRef = useRef(null);

// 更新useEffect逻辑
useEffect(() => {
  if (showOtpInput && otpInputRef.current) {
    otpInputRef.current.focus();
  }
}, [showOtpInput]);

// 给InputOTP绑定ref
<InputOTP 
  ref={otpInputRef}
  maxLength={4} 
  value={otp} 
  onChange={handleOtpChange}
>
  <InputOTPGroup>
    {/* 保持你的slot代码不变 */}
  </InputOTPGroup>
</InputOTP>

方式二：获取真实input元素

如果需要单独控制第一个slot，可通过ref获取组件内部的input DOM：

// 保持你的firstOtpInputRef定义不变
useEffect(() => {
  if (showOtpInput && firstOtpInputRef.current) {
    // 找到内部的input元素
    const realInput = firstOtpInputRef.current.querySelector('input');
    realInput?.focus();
  }
}, [showOtpInput]);

2. 修复光标闪烁动画 #

你的tailwind配置已经正确添加了caret-blink动画，只需将动画类应用到每个InputOTPSlot，同时确保光标颜色可见：

<InputOTPSlot
  index={0}
  ref={firstOtpInputRef}
  className="text-3xl h-16 w-16 border border-black text-black focus:border-black focus:ring-1 focus:ring-black font-extrabold animate-caret-blink caret-black"
/>
<InputOTPSlot
  index={1}
  className="text-3xl h-16 w-16 border border-black text-black focus:border-black focus:ring-1 focus:ring-black font-extrabold animate-caret-blink caret-black"
/>
{/* 其他slot同理添加animate-caret-blink和caret-black */}

关键检查项 #

• 确认tailwindcss-animate插件已正确安装（你的配置已包含plugins: [require("tailwindcss-animate")]，无需额外操作）
• 避免设置caret-transparent或光标颜色与背景色一致的属性，否则光标会隐藏
• 确保组件渲染完成后再调用focus()（依赖showOtpInput状态作为触发条件，逻辑正确）

内容的提问来源于stack exchange，提问作者aviral kaushal