How to make Anchor working with DropdownMenu.Item?

[izcream]

Describe the bug I try to make a simple dropdown menu with <A> component on solid-start

my first try code is

<DropdownMenu.Item>
  <A href="/login">Login</A>
</DropdownMenu.Item>

with this code it will not navigate to /login

the second try

<DropdownMenu.Item asChild>
  <As
      component={A}
      href="/login>Login
  </As>
</DropdownMenu.Item>

its still not navigate to /login

only this way will navigate me to /login

<DropdownMenu.Item asChild onSelect={() => navigate('/login')}>
  <As
    component={A}
    href="/login">Login
  </As>
</DropdownMenu.Item>

how to make anchor link work normally without onSelect?

ps. sorry if my issue gone wrong

• OS: Ubuntu22.04(WSL2 on windows 10)
• Browser Microsoft Edge
• Version 115.0.1901.183 (

Additional context Add any other context about the problem here.

[armandsalle]

Hey 👋 I tried to recreate the issue but it works fine for me. Can you give more informations about what you want to achieve and more code please?

My test https://codesandbox.io/p/sandbox/cold-bash-hgltfl?file=%2Fsrc%2FApp.tsx%3A6%2C24

[izcream]

i have try with native anchor element(a) like you sandbox but still no luck about it. i have use solid-start not solid-vitejs(not sure bot are same or not) below is code

both component="a" or component={A} will not navigate me to new url

only this way will navigate me to new url

dependency version information

"@kobalte/core": "^0.9.8",
"@solidjs/router": "^0.8.2",
"solid-js": "^1.7.8",
"solid-start": "^0.2.29"

[andrewrosss]

It looks like closeOnSelect might have something to do with this issue.

Specifically, if you want to include a link as one of the dropdown menu items it seems like you can do this:

<DropdownMenu.Item asChild closeOnSelect={false}> // note: closeOnSelect={false}
  <As component={A} href={"/wherever"}>
    <DropdownMenu.ItemLabel>My link</DropdownMenu.ItemLabel>
  </As>
</DropdownMenu.Item>

Here's a link to a reproduction

[Brian-Pob]

I had a similar issue using Kobalte in an Astro project and @andrewrosss 's solution worked for me. Thanks.

[syahzuan]

Encountering the same issue using Kobalte in an Astro project. Solved with @andrewrosss 's solution. Many thanks, Andrew!

[marioparaschiv]

i have try with native anchor element(a) like you sandbox but still no luck about it. i have use solid-start not solid-vitejs(not sure bot are same or not) below is code

both component="a" or component={A} will not navigate me to new url

only this way will navigate me to new url

dependency version information

"@kobalte/core": "^0.9.8",
"@solidjs/router": "^0.8.2",
"solid-js": "^1.7.8",
"solid-start": "^0.2.29"

What font is this?