From 309709d4b251d909481a613f7f8c46e99f8399aa Mon Sep 17 00:00:00 2001 From: Yuhei Yasuda Date: Fri, 7 Aug 2020 19:46:30 +0900 Subject: [PATCH] =?UTF-8?q?fix(router):=20If=20users=20are=20using=20the?= =?UTF-8?q?=20Alt=20key=20when=20clicking=20the=20router=20links,=20priori?= =?UTF-8?q?tize=20browser=E2=80=99s=20default=20behavior=20(#38375)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In most browsers, clicking links with the Alt key has a special behavior, for example, Chrome downloads the target resource. As with other modifier keys, the router should stop the original navigation to avoid preventing the browser’s default behavior. When users click a link while holding the Alt key together, the browsers behave as follows. Windows 10: | Browser | Behavior | |:-----------|:--------------------------------------------| | Chrome 84 | Download the target resource | | Firefox 79 | Prevent navigation and therefore do nothing | | Edge 84 | Download the target resource | | IE 11 | No impact | macOS Catalina: | Browser | Behavior | |:-----------|:--------------------------------------------| | Chrome 84 | Download the target resource | | Firefox 79 | Prevent navigation and therefore do nothing | | Safari 13 | Download the target resource | PR Close #38375 --- goldens/public-api/router/router.d.ts | 2 +- packages/router/src/directives/router_link.ts | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/goldens/public-api/router/router.d.ts b/goldens/public-api/router/router.d.ts index 5d911194bdd1d..5eba197503099 100644 --- a/goldens/public-api/router/router.d.ts +++ b/goldens/public-api/router/router.d.ts @@ -432,7 +432,7 @@ export declare class RouterLinkWithHref implements OnChanges, OnDestroy { constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy); ngOnChanges(changes: SimpleChanges): any; ngOnDestroy(): any; - onClick(button: number, ctrlKey: boolean, metaKey: boolean, shiftKey: boolean): boolean; + onClick(button: number, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean): boolean; } export declare class RouterModule { diff --git a/packages/router/src/directives/router_link.ts b/packages/router/src/directives/router_link.ts index 8d8a2da5cb865..1bc801df4b8c8 100644 --- a/packages/router/src/directives/router_link.ts +++ b/packages/router/src/directives/router_link.ts @@ -359,9 +359,12 @@ export class RouterLinkWithHref implements OnChanges, OnDestroy { } /** @nodoc */ - @HostListener('click', ['$event.button', '$event.ctrlKey', '$event.metaKey', '$event.shiftKey']) - onClick(button: number, ctrlKey: boolean, metaKey: boolean, shiftKey: boolean): boolean { - if (button !== 0 || ctrlKey || metaKey || shiftKey) { + @HostListener( + 'click', + ['$event.button', '$event.ctrlKey', '$event.shiftKey', '$event.altKey', '$event.metaKey']) + onClick(button: number, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean): + boolean { + if (button !== 0 || ctrlKey || shiftKey || altKey || metaKey) { return true; }