Nested phx-clicks / is there a way to stop event propagation of a toggle?

Phoenix Forum Questions / Help
1

I have a table row that should open an edit modal for the item shown in the row. I added a phx-click for this. Sadly, inside the row, I now need to add a toggle that also listens on phx-click. Is there a way to stop event propagation of the toggle? Currently, it fires both. Meaning: it changes the toggle state and then opens the modal of the table row.

1 Like
2

Instead of addressing it at the event propagation level, it might make more sense to update the template by splitting each table row into two seperate sections, one for the toggle and the other for the rest of the row, and then adding phx-click to each section.

2 Likes
3

another option is adding a phx-value or some other attribute to then use to filter the event with. but this is dirty and would lean towards what @codeandpeace said or even splitting into complete separate components (and then use phx-target).

2 Likes
4

Yes, I currently work around that with adding a click handler on all table cells. Sadly, the design adds some gaps and borders which are not clickable and create some dead zones in the table row :sweat_smile:. A stop event propagation version of phx-click would be really nice to have for this. But for not it is “good enough”.

5

Is there a good solution for nested phx-click? I have a settings icon nested in a large play button. Whenever I click the inner settings icon, it “plays” too, which is not the ideal behavior.

Ideally, clicking the inner settings button will not trigger the “play” event which the settings icon is nested in.

6

Not sure on the phoenix side, but you can cheat using postitioning I think

I test the below and I have a large button that opens and closes my user menu, and a small button on top of it that can open and close a left nav. The buttons are independent and don’t trigger one another.

<div class="btn-container">
  <.button type="button" class="btn1" phx-click{JS.show(show_user_menu())}>
  </.button>

  <.button type="button" class="btn2" phx-click={JS.show(show_leftnav)}>
  </.button>
</div>

.btn-container{
    position: relative;
    top: 0;
    left: 0;
    height: 5rem;
    width: 10rem;
    margin-top: 10rem;
    background-color: blue;
    z-index: 1;
}

.btn1 {
    height: 100%;
    width: 100%;
    background-color: orange;
}

.btn2 {
    position: absolute;
    top: 1rem;
    left: 2rem;
    height: 2rem;
    width: 2rem;
    background-color: red;
    z-index: 2;
}
7

Ah I see what you did there. Thanks for the suggestion! :slight_smile: