DropdownMenu.Trigger bind ref doesn't work properly?

[fedebram]

Programmatically open the DropdownMenu component via bind:ref of DropdownMenu.Trigger doesn't work as expected. When programmatically click the Trigger, the content doesn't show up. Here is an example:

<script lang="ts">
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';
	
	let triggerRef = $state<HTMLButtonElement | null>(null);

	function clickTrigger() {
		triggerRef?.click();
	}
</script>

<DropdownMenu.Root>
	<DropdownMenu.Trigger bind:ref={triggerRef}>Open</DropdownMenu.Trigger>
	<DropdownMenu.Content>
		<DropdownMenu.Group>
			<DropdownMenu.GroupHeading>My Account</DropdownMenu.GroupHeading>
			<DropdownMenu.Separator />
			<DropdownMenu.Item>Profile</DropdownMenu.Item>
			<DropdownMenu.Item>Billing</DropdownMenu.Item>
			<DropdownMenu.Item>Team</DropdownMenu.Item>
			<DropdownMenu.Item>Subscription</DropdownMenu.Item>
		</DropdownMenu.Group>
	</DropdownMenu.Content>
</DropdownMenu.Root>

I know that is possible to open the menu via binding to open prop of DropdownMenu.Root. But I'd like the possibility to do also with the trigger.
I don't know if I'm doing something wrong. Maybe there is a problem with the underlying Bits UI library?

[huntabyte]

It doesn't open on click, it opens on pointerdown 😃

[fedebram]

Thank you so much, now I understand!
Can I suggest a small modification? I'm not sure if it is needed, but:

Here on sidebar-trigger.svelte:

<script lang="ts">
	import { Button } from "$lib/components/ui/button/index.js";
	import { cn } from "$lib/utils.js";
	import PanelLeft from "@lucide/svelte/icons/panel-left";
	import type { ComponentProps } from "svelte";
	import { useSidebar } from "./context.svelte.js";

	let {
		ref = $bindable(null),
		class: className,
		onclick,
		...restProps
	}: ComponentProps<typeof Button> & {
		onclick?: (e: MouseEvent) => void;
	} = $props();

	const sidebar = useSidebar();
</script>

<Button
	type="button"
	onclick={(e) => {
		onclick?.(e);
		sidebar.toggle();
	}}
	data-sidebar="trigger"
	variant="ghost"
	size="icon"
	class={cn("h-7 w-7", className)}
	{...restProps}
>
	<PanelLeft />
	<span class="sr-only">Toggle Sidebar</span>
</Button>

It is defined with ref = $bindable(null), but the Button doesn't have the bind:ref.

<Button
	bind:ref
	type="button"
	onclick={(e) => {
		onclick?.(e);
		sidebar.toggle();
	}}
	data-sidebar="trigger"
	variant="ghost"
	size="icon"
	class={cn("h-7 w-7", className)}
	{...restProps}
>

[huntabyte]

That's definitely a bug / forgotten part!