Uploaded image for project: 'ListenBrainz'
  1. ListenBrainz
  2. LB-925

Support control/cmd click on react links to open links in a new tab

XMLWordPrintable

      In LB-864 and https://github.com/metabrainz/listenbrainz-server/pull/1575 we updated some react links to add an href property. This allows for us to see the link url when hovering over it, and to open in a new tab with middle-click or copy link -> paste.

      A control-click is dealt with as an actual dom event, and because of the e.preventDefault(), this event is cancelled.

      One solution to this would be to check in the event if the control key has been held down:

      onClick={(e) => {
        if (!e.ctrlKey) {
          e.preventDefault();
          this.changePage(nextPage);
        }
      }}
      

      This allows the event to trigger as normal in the case of ctrl-click (and it leaves the current page alone), and lets react re-render the page in case of a normal click.

      What I'm not sure of is if e.ctrlKey is enough to determine this usecase across all OS/Browser combos. At the very least I tested it in Linux (ctrl) and macos (cmd) with the same code and it worked as I expected.

            Unassigned Unassigned
            alastairp Alastair Porter
            Votes:
            1 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved:

                Version Package