From 6f34df60eb080085546832ac1fbb291e867a28fa Mon Sep 17 00:00:00 2001
From: David McNamara <david.mcnamara@phorest.com>
Date: Mon, 8 Nov 2021 14:33:27 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20Tidy=20up=20listbox=20bug=20fixe?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addon/components/listbox.js | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/addon/components/listbox.js b/addon/components/listbox.js
index a823af40..e85c1da3 100644
--- a/addon/components/listbox.js
+++ b/addon/components/listbox.js
@@ -8,6 +8,17 @@ const ACTIVATE_NONE = 0;
 const ACTIVATE_FIRST = 1;
 const ACTIVATE_LAST = 2;
 
+const PREVENTED_KEYDOWN_EVENTS = new Set([
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'PageUp',
+  'PageDown',
+  'Home',
+  'End',
+]);
+
 export default class ListboxComponent extends Component {
   @tracked activeOptionIndex;
   activateBehaviour = ACTIVATE_NONE;
@@ -76,16 +87,7 @@ export default class ListboxComponent extends Component {
 
   @action
   handleKeyDown(event) {
-    if (
-      [
-        'ArrowUp',
-        'ArrowDown',
-        'ArrowLeft',
-        'ArrowRight',
-        'Home',
-        'End',
-      ].indexOf(event.key) > -1
-    ) {
+    if (PREVENTED_KEYDOWN_EVENTS.has(event.key)) {
       event.preventDefault();
     }
   }
@@ -247,6 +249,11 @@ export default class ListboxComponent extends Component {
   }
 
   scrollIntoView(optionElement) {
+    // Cannot use optionElement.scrollIntoView() here because that function
+    // also scrolls the *window* by some amount. Here, we don't want to
+    // jerk the window, we just want to make the the option element visible
+    // inside its container.
+
     optionElement.parentElement.scroll(
       0,
       optionElement.offsetTop - optionElement.parentElement.offsetTop