Hover State for InputOTPSlot

[joshpalmeroc]

Im trying to change the border color on hover for each InputOTPSlot but for some reason it doesn't work. In my code I have it as "hover:tw-border-hover". I noticed if i go within the browser console and find the specific div and force the state to hover it works just not when i actually mouse over it. I'm thinking maybe it was an intentional design choice or for ada reasons?

const inputOTPSlotVariants = cva(
	'tw-rounded-lg tw-relative tw-flex tw-items-center tw-justify-center tw-border tw-border-primary tw-transition-all tw-font-semibold tw-text-primary hover:tw-border-hover',
	{
		variants: {
			inputSize: {
				lg: 'tw-size-[72px] tw-text-4xl/[48px]',
				md: 'tw-size-[52px] tw-text-[32px]/10',
				sm: 'tw-size-10 tw-text-2xl',
			},
		},
		defaultVariants: {
			inputSize: 'lg',
		},
	}
);

const InputOTPSlot = React.forwardRef<
	React.ElementRef<'div'>,
	React.ComponentPropsWithoutRef<'div'> & { index: number }
>(({ index, className, ...props }, ref) => {
	const { inputSize } = useInputOTPContext();
	const inputOTPContext = React.useContext(OTPInputContext);
	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];

	return (
		<div
			ref={ref}
			className={cn(
				inputOTPSlotVariants({ inputSize }),
				isActive && 'tw-z-10 tw-ring-action-primary tw-ring-1 tw-ring-offset-2',
				className
			)}
			{...props}
		>
			{char}
			{hasFakeCaret && (
				<div className='tw-pointer-events-none tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center'>
					<div className='tw-h-4 tw-w-px tw-animate-caret-blink tw-bg-overlay tw-duration-1000' />
				</div>
			)}
		</div>
	);
});
InputOTPSlot.displayName = 'InputOTPSlot';

[H7ioo]

I guess this is the issue:
You are not hovering over the slot you are hovering over the input. Basically the input is absolute over the slots so when you click over the slot or over the slot you are actually just hovering and clicking over the input.
There are input and other divs which represent the slots.

Workaround:

      const containerRect = e.currentTarget.getBoundingClientRect()
      const clickX = e.clientX - containerRect.left
      const slotWidth = containerRect.width / props.maxLength!
      const clickedSlotIndex = Math.floor(clickX / slotWidth)

Get the client rect and detect which slot is being hovered over. This code snippet is for reference, but you need to configure it based on the mouse hover event.

Add the event to the OTPInput.