kkentzo

kkentzo

JS hooks do not receive the expected events from their corresponding live components

Hello!

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?

Marked As Solved

chrismccord

chrismccord

Creator of Phoenix

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?

Also Liked

Matsa59

Matsa59

Effectively I observe the same behaviour that sounds like a bug.

Don’t use live view in live view for that simple case, instead you can :

# in the livecomponent
  def update(%{id: id, counter: counter}, socket) do
    send(self(), {:ping, id})

    {:ok, socket |> assign(id: id, counter: counter)}
  end

The send/2 will send a message to parent live view. So simply handle it like the following code:

# in the live view
  def handle_info({:ping, id}, socket) do
    {:noreply, push_event(socket, "ping", %{id: id})}
  end
benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe
kkentzo

kkentzo

@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!

Where Next?

Popular in Questions Top

nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New

Other popular topics Top

aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

We're in Beta

About us Mission Statement