keep nav open when modifier clicks

elastic · Jun 23, 2020 · ddedb8e · ddedb8e
1 parent 43f60ef
commit ddedb8e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -38,7 +38,7 @@ import { AppCategory } from '../../../../types';
 import { InternalApplicationStart } from '../../../application/types';
 import { HttpStart } from '../../../http';
 import { OnIsLockedUpdate } from './';
-import { createEuiListItem, createRecentNavLink } from './nav_link';
+import { createEuiListItem, createRecentNavLink, isModifiedEvent } from './nav_link';
 
 function getAllCategories(allCategorizedLinks: Record<string, ChromeNavLink[]>) {
   const allCategories = {} as Record<string, AppCategory | undefined>;
@@ -150,17 +150,13 @@ export function CollapsibleNav({
                 label: 'Home',
                 iconType: 'home',
                 href: homeHref,
-                onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                  closeNav();
-                  if (
-                    event.isDefaultPrevented() ||
-                    event.altKey ||
-                    event.metaKey ||
-                    event.ctrlKey
-                  ) {
+                onClick: (event) => {
+                  if (isModifiedEvent(event)) {
                     return;
                   }
+
                   event.preventDefault();
+                  closeNav();
                   navigateToApp('home');
                 },
               },
@@ -196,7 +192,13 @@ export function CollapsibleNav({
               return {
                 ...hydratedLink,
                 'data-test-subj': 'collapsibleNavAppLink--recent',
-                onClick: closeNav,
+                onClick: (event) => {
+                  if (isModifiedEvent(event)) {
+                    return;
+                  }
+
+                  closeNav();
+                },
               };
             })}
             maxWidth="none"

diff --git a/src/core/public/chrome/ui/header/nav_link.tsx b/src/core/public/chrome/ui/header/nav_link.tsx
@@ -24,9 +24,8 @@ import { ChromeNavLink, ChromeRecentlyAccessedHistoryItem, CoreStart } from '../
 import { HttpStart } from '../../../http';
 import { relativeToAbsolute } from '../../nav_links/to_nav_link';
 
-function isModifiedEvent(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
-  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
-}
+export const isModifiedEvent = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
+  event.metaKey || event.altKey || event.ctrlKey || event.shiftKey || event.defaultPrevented;
 
 interface Props {
   link: ChromeNavLink;
@@ -63,13 +62,15 @@ export function createEuiListItem({
     href,
     /* Use href and onClick to support "open in new tab" and SPA navigation in the same link */
     onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
-      onClick();
+      if (!isModifiedEvent(event)) {
+        onClick();
+      }
+
       if (
         !legacyMode && // ignore when in legacy mode
         !legacy && // ignore links to legacy apps
-        !event.defaultPrevented && // onClick prevented default
         event.button === 0 && // ignore everything but left clicks
-        !isModifiedEvent(event) // ignore clicks with modifier keys
+        !isModifiedEvent(event)
       ) {
         event.preventDefault();
         navigateToApp(id);