Fix nav hide bug

Shopify · Jan 8, 2020 · 97bb2fa · 97bb2fa
1 parent 48c28a7
commit 97bb2fa
Show file tree

Hide file tree

Showing 3 changed files with 210 additions and 157 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -8,6 +8,7 @@
 
 ### Bug fixes
 
+- Fixed a bug where `Navigation` calls `onNavigationDismiss` on large screens when focused and the escape key is pressed ([#2607](https://github.com/Shopify/polaris-react/pull/2607))
 - Fixed issue with `Filters` component displaying an undesired margin top and bottom on the button element on Safari ([#2292](https://github.com/Shopify/polaris-react/pull/2292))
 - Doesn't render `MenuActions` if no actions are passed to an `actionGroups` item inside `Page` ([#2266](https://github.com/Shopify/polaris-react/pull/2266))
 - Fixed `PositionedOverlay` incorrectly calculating `Topbar.UserMenu` `Popover` width ([#1692](https://github.com/Shopify/polaris-react/pull/1692))

diff --git a/src/components/Frame/Frame.tsx b/src/components/Frame/Frame.tsx
@@ -391,8 +391,15 @@ class Frame extends React.PureComponent<CombinedProps, State> {
 
   private handleNavKeydown = (event: React.KeyboardEvent<HTMLElement>) => {
     const {key} = event;
+    const {
+      polaris: {
+        mediaQuery: {isNavigationCollapsed},
+      },
+      showMobileNavigation,
+    } = this.props;
 
-    if (key === 'Escape') {
+    const mobileNavShowing = isNavigationCollapsed && showMobileNavigation;
+    if (mobileNavShowing && key === 'Escape') {
       this.handleNavigationDismiss();
     }
   };