From 8080adb4de36ceb481ac200ec9aae21c4985008d Mon Sep 17 00:00:00 2001 From: Yuhei Yasuda Date: Sat, 8 Aug 2020 22:10:48 +0900 Subject: [PATCH] fix: should not transition states when alt-clicked 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 | --- src/directives/stateDirectives.ts | 2 +- test/stateDirectivesSpec.ts | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/directives/stateDirectives.ts b/src/directives/stateDirectives.ts index 5e6a8cf35..07540e813 100644 --- a/src/directives/stateDirectives.ts +++ b/src/directives/stateDirectives.ts @@ -95,7 +95,7 @@ function clickHook( const button = e.which || e.button, target = getDef(); - if (!(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || el.attr('target'))) { + if (!(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || el.attr('target'))) { // HACK: This is to allow ng-clicks to be processed before the transition is initiated: const transition = $timeout(function () { if (!el.attr('disabled')) { diff --git a/test/stateDirectivesSpec.ts b/test/stateDirectivesSpec.ts index 54e26b482..84d77c957 100644 --- a/test/stateDirectivesSpec.ts +++ b/test/stateDirectivesSpec.ts @@ -232,6 +232,18 @@ describe('uiStateRef', function () { expect(obj($stateParams)).toEqual({}); })); + it('should not transition states when alt-clicked', inject(function ($state, $stateParams, $q) { + expect($state.$current.name).toEqual('top'); + expect(obj($stateParams)).toEqual({}); + + triggerClick(el, { altKey: true }); + timeoutFlush(); + $q.flush(); + + expect($state.current.name).toEqual('top'); + expect(obj($stateParams)).toEqual({}); + })); + it('should not transition states when middle-clicked', inject(function ($state, $stateParams, $q) { expect($state.$current.name).toEqual('top'); expect(obj($stateParams)).toEqual({});