In a live view, how to setup on click, to open another live view on a new tab, while user remains at the current page

On a live product dashboard, trying to render list of products.
How: using table tag and tr tags: I have ProductListItem as live component. (whose render code is given below).It is responsible for iterating over all product and display it.
The List Of products depends upon filter chosen on product dashboard.


  • Onclick of product name opens product live page on the same tab.
  • On Click of arrow icon, product live page open on a new tab.
    But user perspective remains on product list tab, which is current tab.

I tried by adding js , it does not work though.

 def render(assigns) do
      <%= for product <- @products do %>
        <tr class="product-list cursor-pointer">
            <.link href={~p"/case/#{}"}>
              <%= name(product) %>
            # here is the arrow icon 
            <a href={~p"/case/#{}"} class="open-in-new-tab">
          <td id={"date-added-#{}"}><%= date_added(product) %></td>
            <.link href={~p"/case/#{}"} target="_blank" rel="noreferrer">
              <%= settlement_date(product) %>

            <%= cond do %>
              <% @current_company_user.spops_team.industry == "insurance" -> %>
                <%= if !product.product_number do %>
                  <span style="font-style: italic; color: #b1b1b1;">Not known</span>
                <% else %>
                  <%= product.product_number %>
                <% end %>
              <% !product_ref(product) -> %>
                <span style="font-style: italic; color: #b1b1b1;">None</span>
              <% true -> %>
                <%= product_ref(product) %>
            <% end %>
          <td id={"date-of-death-#{}"}><%= date_of_death(product) %></td>
              class="text-center flex flex-row justify-center align-center items-center"
              style="width: 100%; height: 100%;"
              <% status_data = product_status_and_class(product.status) %>
              <div class={"#{status_data.class}"} style="font-size: 12px;">
                <%= status_data.status %>
            class={"#{if follow_up(product) == nil, do: "italic"}"}
            <%= if !follow_up(product)  do %>
              <span style="font-style: italic; color: #b1b1b1;">Not set</span>
            <% else %>
              <%= follow_up(product) %>
            <% end %>
          <td class="text-left">
            <div style="min-height: 40px; display: flex; flex-direction: column; justify-content: center;">
              <%= live_component(ServiceProvider.DashboardLive.AssignedTo,
                id: "assigned_to_#{}",
                company_user: product.company_user,
                current_company_user: @current_company_user,
                product: product,
                filter_by_status: @filter_by_status
              ) %>
      <% end %>

        var elements = document.querySelectorAll(".open-in-new-tab");
        elements.forEach(function(element) {
          element.addEventListener("onClick", function(e) {
  "href"), "_blank");


So this actually doesn’t apply to LiveView specifically. What you’re looking for is a link that opens to a new tab. I see you added target="_blank" to another link. You just need to do that for your arrow link as well.

<.link href={~p"/case/#{}"} target="_blank">

please go through the problem mentioned.
Dont want to switch user perspective to new tab

How about this?

Seems you are swimming upstream by wanting a simple click to open an inactive tab. The browser (rightfully) prefers the users’ preference / control. What makes you want to override the users preference?

1 Like