How to control the event type of the Dialog component?

[vakiz90]

The event type of the Dialog component is "click". In the DOM a button is added for <Dialog.Trigger>, however, I can't find any event triggers on that button with the dev tools. Anyway, I'd like to change the event type to "dblclick" and I'd like to ignore just one click. My use case is opening a dialog on an element that is not a button in my ui. I have a div inside <Dialog.Trigger> for that. Even more control, like not just changing the event type, but also checking for buttons pressed during the event, would be nice. Maybe there's already a way to do al this, but I haven't found...

[huntabyte]

Svelte registers all event listeners at the root.

You should be able to do something like:

<script>
	import { Dialog } from 'bits-ui'
	let open = $state(false)
</script>

<Dialog.Root bind:open>
	<Dialog.Trigger onclick={(e) => e.preventDefault()} ondblclick={() => open = true} />
</Dailog.Root>

[vakiz90]

Thank you @huntabyte

I've tried your proposal by first just adding the onclick handler on <Dialog.Trigger> and let it produce an alert or console.log. As long as the <Dialog.Trigger> is not disabled (disabled property) the dialog just opens and my custom onclick handler seems to be ignored (no alert or output in the console). When the <Dialog.Trigger> is disabled, my custom onclick handler is executed though.

So here my custom onclick handler is executed:

<Dialog.Trigger
    onclick={(e) => {
        e.preventDefault();
        alert('test')
    }}
    disabled
>
Some text
</Dialog.Trigger>

and here it isn't:

<Dialog.Trigger
    onclick={(e) => {
        e.preventDefault();
        alert('test')
    }}
>
Some text
</Dialog.Trigger>

I could work around the issue in my project today, but still, I think it won't take long until I get stuck on this "missing" functionality again...