Handle user input before hooks mounted

fteschke

I use this pattern to handle user input before JS has loaded / hooks have mounted:

<button onclick="this.$clicked = true" phx-hook="MyHook" phx-click={JS.dispatch('clicked')} />

// my_hook.js
mounted() {
  this.el.addEventListener('clicked', () => { ... })

  if (this.el.$clicked) {
    this.js().exec(this.el.getAttribute('phx-click'))
  }
}

This works quite well. But I would prefer a global solution rather than extending each relevant hook.

Ideally:

// app.js
document.querySelectorAll('[onclick="this.$clicked = true]').forEach(el => {
  if (el.$clicked) {
    window.liveSocket.execJS(el, el.getAttribute('phx-click'))
  }
})

However, there is a timing problem.
If phx-click dispatches an event that the hook needs to handle, the hook must have been mounted (attached it’s event listener) first.

So I want to delay my app.js code until all hooks have been mounted.
Is there any way to do this (I was hoping for a phx:all-hooks-mounted event)?
Or is there an entirely different approach to achieving this?

9 comments

/phoenix #hooks

1 441 9

2025-09-05 05:43:13 UTC

Showing Posts 1 to 9

Show Best Posts
Show All (oldest first)
Show All (newest first)

LostKobrakai

You could probably do phx-mounted={JS.dispatch("maybe-clicked")}

Post #1

fteschke

Afaict phx-mounted is executed for element A before hook for element B has mounted.
So I can’t use this as a global indicator of “all hooks have mounted”.
Instead, I would have to determine if an element is within a hook, and whether that hook has already been mounted.
I reckon that’s possible, just way more fiddly than I would like. And again, probably have to instrument each hook, or at least HTML where hook is referenced, individually.

Post #2

fteschke

Maybe a mutation observer on all [phx-hook] elements, and wait until el.phxPrivate.mounted == true? Although I doubt the observer triggers for non-HTML attributes (phxPrivate).

Post #3

LostKobrakai

Why do you need that? You’re already sending individual clicks to the server.

Post #4

fteschke

Sorry, I’m not talking about sending the clicks to the server. I should have been clearer about this.
This is about client-side handling only.
E.g. user clicks dropdown button or sidebar toggle button before JS bundle has loaded.

Post #5

LostKobrakai

I still do not see why that would require some global tracking.

Post #6

dimitarvp

You could just disable the whole thing until LiveView is fully ready on the page. From then on it’s business as usual.

Not the most elegant solution but I’ve very rarely stumbled upon users who would nervously click on the page 0.5s after they typed an URL.

Post #7

fteschke

Agreed, disabling the interactive elements would work. Best without any visual style changes (suppress any button ‘disabled’ styles) to avoid flickering on page load.

Similar line of thought: Optimize page load times (small JS bundle, chunk splitting, …, check caching).

Even so, if any one has thoughts in case above is not enough, please let me know.

Post #8

fteschke

I want to handle click events that occurred before the JS bundle loaded.
Such events may be handled by JS hooks.
For the event to be properly handled, the respective hook may have to be mounted and have registered its event listeners.

So before I can “retry” the phx-click handler for each element that was early clicked, I need to make sure that any hook that may be listening to events dispatched from that phx-click has been mounted.
I can solve this problem per element/hook by knowing which elements and hooks are related.
But I would rather have a global solution that doesn’t require this level of knowledge. In that case I think the easiest solution is to wait until all hooks have mounted before “retrying” the phx-click handlers.

Post #9

— All posts loaded —