Dropdown menu item highlighted when it shouldn't be

[brucegl]

Hi,

In this piece of code

	<DropdownMenu.Root>
		<DropdownMenu.Trigger asChild let:builder>
			<Button class="rounded-full border-0 px-2" builders={[builder]} variant="outline">
				<DotsVertical />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content class="w-56">
			<DropdownMenu.Group>
				<DropdownMenu.Item>
					<Avatar class="mr-2" />
					Profile
				</DropdownMenu.Item>
				<DropdownMenu.Item data-highlighted>
					<LockClosed class="mr-2" />
					Security
				</DropdownMenu.Item>
				<form method="post" action="?/logout" use:enhance bind:this={form}>
					<DropdownMenu.Item on:click={() => form.submit()}>
						<Exit class="mr-2" />
						<input type="submit" value="Sign out" />
					</DropdownMenu.Item>
				</form>
			</DropdownMenu.Group>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

both the Security and Sign out dropdown items are highlighted when I only want the Security one to be. I know I'm using HTML form and input elements, but that's because I haven't got my head around the shadcn-svelte Form and Input components yet (but I will do!)

Thanks in the meantime!

[devjume]

I have totally same problem.

I identified that the problem is caused by <button> or <input> element inside <DropdownMenu.Item>.
But I don't know what causes this. I am trying to find solution atm.

[devjume]

I found solution! stackoverflow.com/questions/20962020/ Everyday learning something new :)

Add tabindex='-1' attribute to the <button> or <input> element.
Example:

<form method="POST" action="/?/logout">
  <DropdownMenu.Item>
    <button type="submit" tabindex='-1'>Logout</button>
  </DropdownMenu.Item>
</form>

If you inspect elements in the dropdown by using browser inspect tool it shows that other <DropdownMenu.Item> elements also have this.

[brucegl]

Thanks @devjume, that worked for me. My menu items cannot be navigated to using TAB, so that's ok.