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.
This commit is contained in:
Priyank Patel 2021-05-29 19:48:46 +00:00 committed by Tim Abbott
parent 283412a5b8
commit 94459f1425
1 changed files with 8 additions and 6 deletions

View File

@ -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);
});