Issue with `client:click`

[eager anchor]

Hi @glad oxide. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

I'm sorry, but the knowledge sources do not provide a built-in or recommended way to forward the initial click event to the component when using a custom client:click directive in Astro. The example implementation for client:click in the documentation simply hydrates the component on the first click, but does not attempt to replay or forward that initial click event to the now-hydrated component. This results in the behavior you described: the first click hydrates, and the second click triggers the modal logic — the original click is not passed through to the component after hydration.

There is no mention in the official documentation of a solution or pattern for capturing and replaying the initial event to the component after hydration. The documentation only shows how to hydrate on the first click, not how to forward the event itself to the component logic after hydration is complete. You can review the example implementation here: addClientDirective option.

If you need this behavior, you may need to implement a more advanced custom directive that captures the event, hydrates the component, and then re-dispatches the event to the hydrated element. However, the knowledge sources do not provide guidance or examples for this approach.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: