From 94459f1425f7e7c2e15523cf146cc84b0f58747f Mon Sep 17 00:00:00 2001
From: Priyank Patel <priyankp390@gmail.com>
Date: Sat, 29 May 2021 19:48:46 +0000
Subject: [PATCH] dropdown_list_widget: Use e.key instead of deprecated
 e.keyCode.

We use e.key for our side of code and still pass e.keyCode and
e.which to the custom jQuery event we trigger. The event is handled
by our patched copy of outdated bootstrap and it still requires the
e.keyCode and e.which properties.

One of the places this widget is used is in the settings panel, at
Manage Organization > Organization Settings > Notifications > New
stream notifications. One of the handler is attached to the
dropdown menu items that shows up when you click the "#announce"
button. The other one is attached to the search button. The second
one triggers the custom jQuery event and passes the event data to
bootstrap unless the Up & Down arrow or Esacape is used. The first
event handler handles the Enter click on one of the items and saves
it. Verified that the widget works as expected.
---
 static/js/dropdown_list_widget.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/static/js/dropdown_list_widget.js b/static/js/dropdown_list_widget.js
index fe4ec6736f..12d335e547 100644
--- a/static/js/dropdown_list_widget.js
+++ b/static/js/dropdown_list_widget.js
@@ -64,7 +64,7 @@ export const DropdownListWidget = function ({
             function (e) {
                 const setting_elem = $(this).closest(`.${CSS.escape(widget_name)}_setting`);
                 if (e.type === "keypress") {
-                    if (e.which === 13) {
+                    if (e.key === "Enter") {
                         setting_elem.find(".dropdown-menu").dropdown("toggle");
                     } else {
                         return;
@@ -129,15 +129,17 @@ export const DropdownListWidget = function ({
         });
 
         search_input.on("keydown", (e) => {
-            if (!/(38|40|27)/.test(e.keyCode)) {
+            const {key, keyCode, which} = e;
+            if (!/(ArrowUp|ArrowDown|Escape)/.test(key)) {
                 return;
             }
             e.preventDefault();
             e.stopPropagation();
-            const custom_event = new $.Event("keydown.dropdown.data-api", {
-                keyCode: e.keyCode,
-                which: e.keyCode,
-            });
+
+            // We pass keyCode instead of key here because the outdated
+            // bootstrap library we have at static/third/ still uses the
+            // deprecated keyCode & which properties.
+            const custom_event = new $.Event("keydown.dropdown.data-api", {keyCode, which});
             dropdown_toggle.trigger(custom_event);
         });