From 3727f26c13b448baba8510147db06f57da1106a8 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Thu, 29 Oct 2020 10:29:27 -0400
Subject: [PATCH] Fix issue where sidebar controls could be keyboard-navigated
 while the sidebar was hidden

---
 css/80_app.css        |  3 +++
 modules/ui/sidebar.js | 13 +++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 74cf2d8bc..ee38b64c3 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -812,6 +812,9 @@ a.hide-toggle {
     left: -6px;
 }
 
+.sidebar.collapsed > *:not(.sidebar-resizer) {
+    display: none;
+}
 .sidebar.collapsed .sidebar-resizer {
     /* make target wider to avoid the user accidentally resizing window */
     width: 10px;
diff --git a/modules/ui/sidebar.js b/modules/ui/sidebar.js
index 8595bc9ca..78bdce1e6 100644
--- a/modules/ui/sidebar.js
+++ b/modules/ui/sidebar.js
@@ -379,7 +379,13 @@ export function uiSidebar(context) {
                 endMargin = 0;
             }
 
-            selection.transition()
+            if (!isCollapsing) {
+                // unhide the sidebar's content before it transitions onscreen
+                selection.classed('collapsed', isCollapsing);
+            }
+
+            selection
+                .transition()
                 .style(xMarginProperty, endMargin + 'px')
                 .tween('panner', function() {
                     var i = d3_interpolateNumber(startMargin, endMargin);
@@ -390,7 +396,10 @@ export function uiSidebar(context) {
                     };
                 })
                 .on('end', function() {
-                    selection.classed('collapsed', isCollapsing);
+                    if (isCollapsing) {
+                        // hide the sidebar's content after it transitions offscreen
+                        selection.classed('collapsed', isCollapsing);
+                    }
 
                     // switch back from px to %
                     if (!isCollapsing) {