How to make the container of an embedded liveview clickable?

Phoenix Forum Questions / Help
,
1

I want to make either the container of an embedded liveview clickable (or an surrounding div container)

<div class="mt-6 p-4 hover:bg-green-700 hover:opacity-60 z-10" phx-click={show_modal("show-eventlog")}>
  <%= live_render(@socket, Backend.PointOfSale.ShortStatisticsLive,
    id: "stats",
    session: %{"max_a" => @max_a, "max_b" => @max_b},
    container: {:div, class: "hover:border-pink-700 border-4 border-transparent"}
  ) %>
</div>

Gives me:

clickable
clickable865×223 4.38 KB

While the green border (of the parent div is clickable, the grey liveview isn’t. I would prefer just to be able to click at the grey liveview area (or make the parent div transparent covering the liveview and handling the phx-click event).

Am I missing something obvious?

2

I was in a hurry to get this ready for a presentation.
Not very firm in frontend design and javascript I did the following (which works so far):

  • Surrounded the live_render with a container
  • Added a phx-hook and a data attribute to show the modal on click
  • With the live view being the only (and therefore first ) child of the div container I added a click handler
  • The click handler grabs the data attribute of the parent and does a liveview.exexJS

HEEX:

<div id="ClickHandlerAdded" phx-hook="AddClickHandlerToChild" data-action-click={show_modal("show-eventlog")}>
  <%= live_render(@socket, Backend.PointOfSale.ShortStatisticsLive,
    id: "stats",
    session: %{"max_a" => @max_a, "max_b" => @max_b},
    container: {:div, class: "hover:border-pink-700 border-4 border-transparent"}
  ) %>
</div>

Hook:

export default {
    mounted() {
        this.el.firstElementChild.addEventListener('click', e => {
            let el = document.getElementById("show-eventlog")
            if (el) {
                liveSocket.execJS(this.el, this.el.getAttribute("data-action-click"))
            }
            // this.pushEvent("push-event-to-server-if-needed");
        });
    }
};

There are likely better way to handle this.

The documentation only names classes and id as a parameter to container:
I haven’t investigated further.
https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#live_render/3-containers