Right click new tab for phx-click

Phoenix Forum Questions / Help
,
1

I have a table where each row is clickable

          <tr phx-click={"[[\"navigate\",{\"href\":\"/battle/#{log.match_id}\",\"replace\":false}]]"}>

However when I right click the row I cannot see the option to open in new tab. How can I modify this?

2

Hi!
For that feature you need to replace in phx-click with good old <.link> helper:
https://hexdocs.pm/phoenix_live_view/live-navigation.html

1 Like
3

Don’t use links for table rows, html tables are finicky so it’s best to use on table elements. Instead build a menu with the options you want. Then add a reference to the menu as a contextmenu to what ever you wish to right click. Respond to the contextmenu event.

Edit: this method currently has poor browser support which is a shame. I came across this pattern many years ago and assumed the support would be better now. everything above is supported. The menu’s related <menuitem> element has been removed from the html spec Sorry

2 Likes
4

Does this work if I want to use it with a whole row?

5

No, neither the <table>, <tbody>, or <tr> elements accept nested anchors. Note <tr> permitted parents section, it can’t be the child of an anchor either.

6

You can try this:

<tr><td><span><%= live_redirect "Battle - #{log.match_id}", to: "battle/#{log.match_id}" %></span></td></tr>

7

This won’t make the whole row clickable just the first cell. There’s already an in-spec way to achieve what you want and you should use that since it’s web standard. If you want a hack however put an anchor in the first cell and apply an absolutely positioned pseudo element to it so that it takes up the whole row. But then you lose the ability to copy/paste or apply any other effects to the row because the first cell anchor now spans the entire row

8

OK that works and able to set it for one column at least.

New question:
How do I make it so it opens new tab on left click?

9

For that you need to change live_redirect to link:

<tr><td><span><%= link "Battle - #{log.match_id}", to: "battle/#{log.match_id}" , target: "_blank", rel: "noreferrer noopener" %></span></td></tr>

10

Both of these functions are deprected in the latest versions of their libraries.

Phoenix.Component — Phoenix LiveView v1.0.0-rc.6 provides a function component, which composes better in heex over those plain functions.

1 Like