I am facing an issue with JS hooks when there are multiple live components on the same live view.
More specifically:
I have one live view that contains two live components
each component is connected to a JS hook
each JS hook subscribes to a ping event using handleEvent
on update/2 each live component sends a ping event to its hook using push_event
The problem is that both hooks receive one ping event that is sent from the second component only; the first component’s event never reaches the client.
I have set up a minimal example that demonstrates this problem in this repo.
Any insight on this behaviour? Am I doing something wrong?
[UPDATE] Just to mention that my workaround for the moment is to use nested live views instead of components. I think that it’d be nice/interesting to understand what’s going on in the case of components though…
This was a bug that has been fixed on master, but I also think there is some confusion here on how push_event works. Events are “global” for all hooks and can be pushed from any LiveView or component and read by any hook using handleEvent on the client. In this case, we have a diff producing two ping events . In your app what will be received is both hooks receive ping-a and ping-b events. It appears you are expecting pushed events to be isolated to their components, but that’s not the case. To get that kind of behavior you can namespace your events, ie:
|> push_event("ping-#{id}", ...)
this.handleEvent(`ping-${this.dataset.id}`, ...)
I just fixed the dup event keys being eaten, but your code needs to change to behave how you want. Make sense?
@chrismccord: Makes full sense - yes, I am aware of the behaviour you are describing, it’s just that my trivial example was meant to demonstrate the “eaten” events.
Good to know that it’s now been fixed - many thanks!