Click doesn't forward to child <a> in MenuItem while using keyboard about svelte-headlessui HOT 5 CLOSED

You can have class be a function which takes active as an argument:

<MenuItem href="/" class={({active}) => active ? 'active-class' : ''}>Link</MenuItem>

This isn't well-documented in the React docs, but you can see a preview of some docs I'm writing here: https://github.com/rgossiaux/svelte-headlessui/blob/initial-docs/src/routes/docs/general/important-concepts.svx

from svelte-headlessui.

Thanks for the great report with a REPL!

The upstream library has this same behavior, actually: https://codesandbox.io/s/frosty-jepsen-c120o Given that, this is probably a wontfix, but I'm curious what your use case is, since the first example in your REPL seems to work fine. You can still render the MenuItems as ul and wrap the individual MenuItems in <li> to get the same markup.

The reason this doesn't work is because the arrow keys focus the MenuItem components themselves, so in your second example, the <a> tags aren't focused (because they're children).

from svelte-headlessui.

Well, my particular case is to use HeadlessUI components with DaisyUi appearance. I have been able to use dropdown and menu components from DaisyUi and everything working well except keyboard navigation.

<li>
  <MenuItem href="/">Link</MenuItem>
</li>

This will solve the problem with working links by keyboard navigation but I can't show the active state with this solution. Because let:active will be accessible only in child elements of <MenuItem>.

In react HeadlessUi I would be able to make it like that:

<li>
  <Menu.Item>
    {({ active }) => (
      <a href="/" class={active ? 'active-class' : ''}>Link</a>
    )
  </Menu.Item>
</li>

And it will work perfectly because react HeadlessUi uses child <a> as the main element of MenuItem. But in svelte HeadlessUi the same approach will lead to a not working link when you press Enter.

Any ideas on how I can have fully working keyboard navigation with the ability to set active classes in svelte HeadlessUi?

from svelte-headlessui.

Fully working Codesandbox with an example which I want to reach in svelte HeadlessUi. Actually, it seems impossible with the current implementation.

from svelte-headlessui.

Thank you very much. Glad that there option to set active classes right in MenuItem. Definitely would be helpful to have this feature documented. =D

from svelte-headlessui.