diff --git a/web/src/hotkey.js b/web/src/hotkey.js index 7c5bf28519..28389059b1 100644 --- a/web/src/hotkey.js +++ b/web/src/hotkey.js @@ -642,7 +642,8 @@ export function process_hotkey(e, hotkey) { return emoji_picker.navigate(event_name); } - if (overlays.is_modal_open()) { + // `list_util` will process the event in send later modal. + if (overlays.is_modal_open() && overlays.active_modal() !== "#send_later_modal") { return false; } diff --git a/web/src/list_util.ts b/web/src/list_util.ts index 59ec3ef8b4..3397100955 100644 --- a/web/src/list_util.ts +++ b/web/src/list_util.ts @@ -1,6 +1,11 @@ import $ from "jquery"; -const list_selectors = ["#stream_filters", "#global_filters", "#user_presences"]; +const list_selectors = [ + "#stream_filters", + "#global_filters", + "#user_presences", + "#send_later_options", +]; export function inside_list(e: JQuery.KeyDownEvent | JQuery.KeyPressEvent): boolean { const $target = $(e.target); diff --git a/web/src/popover_menus.js b/web/src/popover_menus.js index e1811bd99e..191d8bea12 100644 --- a/web/src/popover_menus.js +++ b/web/src/popover_menus.js @@ -258,11 +258,20 @@ export function open_send_later_menu(instance) { ); const $send_later_modal = $("#send_later_modal"); - $send_later_modal.on("keydown", (e) => { - if (e.key === "Enter") { - e.target.click(); - } + + // Upon the first keydown event, we focus on the first element in the list, + // enabling keyboard navigation that is handled by `hotkey.js` and `list_util.ts`. + $send_later_modal.one("keydown", () => { + const $options = $send_later_modal.find("a"); + $options[0].focus(); + + $send_later_modal.on("keydown", (e) => { + if (e.key === "Enter") { + e.target.click(); + } + }); }); + $send_later_modal.on("click", ".send_later_custom", (e) => { const $send_later_modal_content = $send_later_modal.find(".modal__content"); const current_time = new Date(); @@ -297,6 +306,11 @@ export function open_send_later_menu(instance) { }, ); }, + on_shown() { + // When shown, we should give the modal focus to correctly handle keyboard events. + const $send_later_modal_overlay = $("#send_later_modal .modal__overlay"); + $send_later_modal_overlay.trigger("focus"); + }, on_hide() { clearInterval(instance._interval); }, diff --git a/web/tests/hotkey.test.js b/web/tests/hotkey.test.js index febe78d232..035f823f55 100644 --- a/web/tests/hotkey.test.js +++ b/web/tests/hotkey.test.js @@ -60,6 +60,7 @@ const overlays = mock_esm("../src/overlays", { scheduled_messages_open: () => false, info_overlay_open: () => false, is_modal_open: () => false, + active_modal: () => undefined, is_overlay_or_modal_open: () => overlays.is_modal_open() || overlays.is_active(), }); const popovers = mock_esm("../src/popovers", {