From bb58fecf28ad2d9e3fa33ef4e4e719a5729d9fc1 Mon Sep 17 00:00:00 2001 From: Daniil Fadeev Date: Tue, 19 Sep 2023 18:30:40 +0300 Subject: [PATCH] user_card_popover: Fix keyboard navigation opening manage menu. `focus_first_popover_item` was executed right after the click handler had asked to open the popover, but before the popover was mounted to the DOM, causing the popover to not work correctly when opened via the keyboard. --- web/src/popovers.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/web/src/popovers.js b/web/src/popovers.js index 38b8003432..1e8745de06 100644 --- a/web/src/popovers.js +++ b/web/src/popovers.js @@ -58,8 +58,28 @@ export function popover_items_handle_keyboard(key, $items) { if (key === "enter" && index >= 0 && index < $items.length) { $items[index].click(); if (user_card_popover.manage_menu.is_open()) { - const $items = user_card_popover.get_user_card_popover_manage_menu_items(); - focus_first_popover_item($items); + // If we just opened the little manage menu via the + // keyboard, we need to focus the first item for a + // continuation of the keyboard experience. + + // TODO: This might be cleaner to just call + // toggle_user_card_popover_manage_menu rather than + // triggering a click. + + const previously_defined_on_mount = + user_card_popover.manage_menu.instance.props.onMount; + user_card_popover.manage_menu.instance.setProps({ + onMount() { + // We're monkey patching the onMount method here to ensure we start + // focusing on the item after the popover is mounted to the DOM; + // otherwise, it won't work correctly. + if (previously_defined_on_mount) { + previously_defined_on_mount(); + } + const $items = user_card_popover.get_user_card_popover_manage_menu_items(); + focus_first_popover_item($items); + }, + }); } return; }