flathub-infra
Cannot open apps links in new tab
What happen:
- Open the demo site and navigate to the apps list
- Try to open an app in a new tab - eg by right clicking on a tile and selecting open in new tab or by holding Ctrl and clicking the mouse
- Notice that one is unable to open the app in a new tab, a Ctrl+click actually opens in the existing tab
What I expected to happen: At step 3 to be able to open an app in a new tab
Scenario: A user is browsing the web frontend and notices multiple apps that seem interesting and they potentially want to install, so that they don't forget or have to search the list again they want to open each interesting app in a new tab. Then once they have found all the apps that are interesting to them they want to view each tab to decide if they want to install the app.
Currently this scenario is tricky as the user has to click on app A, view the page determine if they want it. Then select back, find where they were in the list and then find the next interesting app etc. This causes lots of switching between pages for the user.
This seems to be a problem in Angular Router. I have to investigate the different workarounds proposed here https://github.com/angular/angular/issues/5908
Thanks for testing my webapp!
I don't know Angular at all, but from what I know of HTML and JS, something like this would usually be done with a regular <a href="..."> link, and a Javascript event handler which calls event.preventDefault(). That way you get the fast update through Javascript if possible, and a regular browser navigation if not. It also means that the HTML is semantically meaningful, so tools like screenreaders work, and you get things like right click -> copy link for free.
The proposed workarounds on that Angular issue seem to revolve around adding more Javascript to handle different click events, which feels like the wrong solution.
This can be closed now (or when the site is redeployed, if that's how you manage issues).
Sorry to dig this up, but CTRL+Click still opens in the existing tab. Looking at @takluyver's first PR that makes sense, since the click handler does not check if ctrl is pressed. Would something like this modification work?
Before:
(click)="onAppDetails(app); $event.preventDefault()">
After:
(click)="$event.ctrlKey ? $window.open('/apps/details/{{app.flatpakAppId}}' : onAppDetails(app); $event.preventDefault()"
Rather than trying to emulate the browser behaviour you expect, I suspect it's better to do nothing if a relevant modifier key is used. Ctrl-Click might not mean the same on all browsers/platforms, or the meaning might be customisable.
If event.preventDefault() isn't called, then the browser should handle the 'clicked on link' event as normal, whatever that means.
See your point in the general sense. We risk having to end up copying more and more built-in behavior and more exceptions for different platforms. For example: currently SHIFT+click does not open in a new window either.
However, currently $event.preventDefault() is called, so we are still override the behavior on all platforms anyway. It's just that the behavior is to do nothing.
Right, my suggestion is that it should call both onAppDetails(app) and $event.preventDefault() in the 'normal' click case (primary button, no modifier keys), but in other cases, call neither and lets the browser do what it wants to do.
There must be lots of sites that want those semantics, so presumably there's some convenient way of specifying it.
This is still not fixed (or at least not deployed), and should be re-opened.
I think the fix is deployed, but possibly incomplete - I can open links in a new tab with middle click, or from the context menu, but ctrl+click behaves like a normal click action.
(I'm not a maintainer here, so it's not up to me whether to reopen this issue or create a new one)
The RouterLinkWithHref directive specifically checks for ctrl+click and does nothing: https://github.com/angular/angular/blob/11.2.7/packages/router/src/directives/router_link.ts#L375-L380
To fix this, I added my own directive that extends RouterLinkWithHref making it open in a new window with ctrl+click:
import { Directive } from '@angular/core';
import { RouterLinkWithHref } from '@angular/router';
@Directive({
selector: 'a[routerLink],area[routerLink]'
})
export class CtrlClickRouterLinkDirective extends RouterLinkWithHref {
onClick(button: number, ctrlKey: boolean): boolean {
if (ctrlKey && button === 0) {
window.open(this.urlTree.toString(), '_blank');
}
return true;
}
}
