Handle user input before hooks mounted

Phoenix Forum Questions / Help
,
1

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?

1 Like
2

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

3

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.

4

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).

5

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

6

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.

7

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

8

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.

9

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.

1 Like
10

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.

1 Like