keyboard navigation with anchor tags in menus

[sdf9s8d76f]

<Transition
    show={$menu.expanded}
    enter="transition ease-out duration-100"
    enterFrom="transform opacity-0 scale-95"
    enterTo="transform opacity-100 scale-100"
    leave="transition ease-in duration-75"
    leaveFrom="transform opacity-100 scale-100"
    leaveTo="transform opacity-0 scale-95"
>
    <div
        use:menu.items
        class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-surface py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
    >
        {#each USERMENU_ELEMENTS as item}
            {@const active = $menu.active === item.name}
            <a
                use:menu.item
                href={item.href}
                class={classNames(
                    active ? 'bg-primary' : '',
                    'flex items-center w-full text-left px-3 py-1 text-sm leading-6 text-white select-none'
                )}
                ><svelte:component
                    this={item.icon}
                    class="h-4 w-4 shrink-0 mr-2 focus:outline-none"
                    aria-hidden="true"
                    focusable="false"
                    tabindex="-1"
                />
                {item.name}
            </a>
        {/each}
    </div>
</Transition>

hey, so I have a menu which works perfectly fine except the navigation doesn't work when pressing enter but instead the menu is just closed. when using the mouse and clicking the item it works fine.

(Im using version 10.7.0)

[CaptainCodeman]

I think a couple of things are preventing this - preventDefault on the key handler and the anchor tags not being focused (using roving tab index).

I'll probably need a rethink some pieces to fix this properly but might be able to add a quick fix by checking for the item being an anchor element.