[BUG]: components/gooey-nav

[HeliceFont]

Describe the issue

The issue lies in event propagation and the component's structure. The click is being captured by the LI before reaching the link. Here's a proposed solution:

{items.map((item, index) => ( <li key={index} className={py-[0.6em] px-[1em] rounded-full relative transition-[background-color_color_box-shadow] duration-300 ease shadow-[0_0_0.5px_1.5px_transparent] text-white font-bold ${
activeIndex === index ? "active" : ""
}} > <a href={item.href} onClick={(e) => handleClick(e, index)} onKeyDown={(e) => handleKeyDown(e, index)} className="outline-none w-full h-full block cursor-pointer" > {item.label} </a> </li> ))}

The main changes are:

I removed the onClick from the

and moved it to the
I added w-full h-full block to the link so it takes up the entire li space
I moved the cursor pointer to the link instead of the li.

Reproduction Link

No response

Steps to reproduce

Validations

• I have checked other issues to see if my issue was already reported or addressed

[DavidHDev]

Is this only an issue on the Tailwind versions? Feel free to open a PR.