paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 13:33:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

popovers: Focus first option in send later popover when opened with kbd.

Browse Source 
While opening the send later popover via the keyboard, we want to focus
the first text option, which is "Schedule message" at present. When the
popover is opened via mouse click, we want to keep the original behavior
of not focusing on any option.

Note: This is similar to the behavior of the message actions popover,
and hence this commit follows a similar pattern to add the focus.

Fixes: #27701.
This commit is contained in:
Sayam Samal
2023-11-15 04:00:55 +05:30
committed by Tim Abbott
parent 6f8cac8077
commit 0a487e4f92
2 changed files with 32 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/hotkey.js
View File

@@ -45,6 +45,7 @@ import * as reactions from "./reactions";
import * as recent_view_ui from "./recent_view_ui";
import * as recent_view_util from "./recent_view_util";
import * as scheduled_messages_overlay_ui from "./scheduled_messages_overlay_ui";
import * as scheduled_messages_popover from "./scheduled_messages_popover";
import * as search from "./search";
import * as settings_data from "./settings_data";
import * as sidebar_ui from "./sidebar_ui";
@@ -486,7 +487,7 @@ export function process_enter_key(e) {
// it since it is the trigger for the popover. <button> is already used
// to trigger the tooltip so it cannot be used to trigger the popover.
if (e.target.id === "send_later") {
$("#send_later i").trigger("click");
scheduled_messages_popover.toggle();
return true;
}

30
web/src/scheduled_messages_popover.js
View File

@@ -5,6 +5,7 @@ import render_send_later_popover from "../templates/popovers/send_later_popover.
import render_send_later_modal from "../templates/send_later_modal.hbs";
import render_send_later_modal_options from "../templates/send_later_modal_options.hbs";
import * as blueslip from "./blueslip";
import * as channel from "./channel";
import * as common from "./common";
import * as compose from "./compose";
@@ -19,6 +20,8 @@ import {user_settings} from "./user_settings";
export const SCHEDULING_MODAL_UPDATE_INTERVAL_IN_MILLISECONDS = 60 * 1000;
const ENTER_SENDS_SELECTION_DELAY = 600;
let send_later_popover_keyboard_toggle = false;
function set_compose_box_schedule(element) {
const selected_send_at_time = element.dataset.sendStamp / 1000;
return selected_send_at_time;
@@ -114,6 +117,28 @@ export function do_schedule_message(send_at_time) {
compose.finish(true);
}
function get_send_later_menu_items() {
const $current_schedule_popover_elem = $("[data-tippy-root] #send_later_popover");
if (!$current_schedule_popover_elem) {
blueslip.error("Trying to get menu items when schedule popover is closed.");
return undefined;
}
return $current_schedule_popover_elem.find("li:not(.divider):visible a");
}
function focus_first_send_later_popover_item() {
// It is recommended to only call this when the user opens the menu with a hotkey.
// Our popup menus act kind of funny when you mix keyboard and mouse.
const $items = get_send_later_menu_items();
popover_menus.focus_first_popover_item($items);
}
export function toggle() {
send_later_popover_keyboard_toggle = true;
$("#send_later i").trigger("click");
}
export function initialize() {
delegate("body", {
...popover_menus.default_popover_props,
@@ -136,6 +161,10 @@ export function initialize() {
popover_menus.popover_instances.send_later = instance;
},
onMount(instance) {
if (send_later_popover_keyboard_toggle) {
focus_first_send_later_popover_item();
send_later_popover_keyboard_toggle = false;
}
const $popper = $(instance.popper);
common.adjust_mac_kbd_tags(".enter_sends_choices kbd");
$popper.one("click", ".send_later_selected_send_later_time", () => {
@@ -175,6 +204,7 @@ export function initialize() {
onHidden(instance) {
instance.destroy();
popover_menus.popover_instances.send_later = undefined;
send_later_popover_keyboard_toggle = false;
},
});
}