From 9549aadd2676d88ef6ec25a2f8e1d24b4d8caf46 Mon Sep 17 00:00:00 2001
From: Marcus Efraimsson <marcus.efraimsson@gmail.com>
Date: Wed, 11 Apr 2018 17:49:40 +0200
Subject: [PATCH] fix so that page scrollbars can be scrolled by keyboard on
 page load

The page scrollbars are custom, not rendered on the body element and
with css property overflow set for scroll to be enabled.
For being able to scroll the page using the keyboard when a
page loads, some custom code was needed.
This fix should both work when doing a full reload of a url and when
navigating to other pages/dashboards.
For those pages having an input field that are focused on load,
scrolling by keyboard (arrow up/down) will obviously not work.
---
 public/app/core/components/scroll/page_scroll.ts | 4 ++++
 public/views/index.template.html                 | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/app/core/components/scroll/page_scroll.ts b/public/app/core/components/scroll/page_scroll.ts
index 4782ad6d060..e6db344a4d6 100644
--- a/public/app/core/components/scroll/page_scroll.ts
+++ b/public/app/core/components/scroll/page_scroll.ts
@@ -29,7 +29,11 @@ export function pageScrollbar() {
       scope.$on('$routeChangeSuccess', () => {
         lastPos = 0;
         elem[0].scrollTop = 0;
+        elem[0].focus();
       });
+
+      elem[0].tabIndex = -1;
+      elem[0].focus();
     },
   };
 }
diff --git a/public/views/index.template.html b/public/views/index.template.html
index 9f151527b88..79da1d7179c 100644
--- a/public/views/index.template.html
+++ b/public/views/index.template.html
@@ -40,7 +40,7 @@
     </div>
 
     <div class="main-view">
-      <div class="scroll-canvas">
+      <div class="scroll-canvas" page-scrollbar>
         <div ng-view></div>
 
         <footer class="footer">