Popover component event handling

[MrVauxs]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Zag's popup elements are based on a button element which causes problems when you want to add onclick events and such, or when you want to wrap an existing button with a Tooltip.

It would be great to be able to pass event handlers to Zag's button since it cannot be removed to allow users to decide the markup themselves.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

#skeleton-next talk in Discord: https://discord.com/channels/1003691521280856084/1191790107867488316/1306346031528673290

they all rely on onOpenChange, so I think we'll need this change for all four (popover, tooltip, modal, combobox)

[endigo9740]

@Hugos68 I know you've got limited availability right now, no worries if you don't get back to this until later, but either way I could use your help. Currently in the Tooltip component for example we have this:

<button {...api.getTriggerProps()} class="{triggerBase} {triggerBackground} {triggerClasses}">
   {@render trigger?.()}
</button>

So Zag is spreading it's own attributes to the button as one would expect. And if I log the output of api.getTriggerProps() I get the following:

So there is already an onclick in place. But I can't seem to find any sort of reference in Zag to how we hook into this or what it's used for. I'd be leery of us implementing our own onclick handler on top of this, as I would expect that would be considered a duplicate and cause issues.

As far as the API Zag exposes, there doesn't appear to be anything related to the button click event. They have onOpenChange() which triggers when the popover is shown/hidden on hover, but that's not quite what's being requested here.

Just thought I'd reach out to you before I ask Zag about this. Any ideas are welcome.

[Hugos68]

Zag exposes a mergeProps function to basically merge listeners from users and zag and still have the component function, see: https://zagjs.com/overview/composition#event-composition

We can definitely support this if we want to 👍

[endigo9740]

@Hugos68 ok that actually looks fairly straight forward. I'll look to get that setup today. Thank you!

[endigo9740]

@phamduylong this would be a great candidate if you're looking for something to work on! We'll just need to implement an onclick event property for all four Svelte popover components using the merge method Hugo linked above.

[phamduylong]

On it.