From 99ca62050d525a4227d33dc93787d2eee070c73f Mon Sep 17 00:00:00 2001 From: Tony Xiao Date: Fri, 14 Feb 2025 15:22:00 -0500 Subject: [PATCH] fix(profiling): Prevent landing page from scrolling on context menu The landing page flamegraph renders the context menu off screen initially then brings onto the screen. Make sure we wait till it's on screen before we try to focus it. --- .../profiling/hooks/useKeyboardNavigation.tsx | 29 +++++++++++++++---- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/static/app/utils/profiling/hooks/useKeyboardNavigation.tsx b/static/app/utils/profiling/hooks/useKeyboardNavigation.tsx index bf9ee30a808ef0..70b0e4f2892279 100644 --- a/static/app/utils/profiling/hooks/useKeyboardNavigation.tsx +++ b/static/app/utils/profiling/hooks/useKeyboardNavigation.tsx @@ -49,13 +49,32 @@ export function useKeyboardNavigation() { const {tabIndex, setTabIndex, onKeyDown} = useRovingTabIndex(items); + // There's no easy way to subscribe to the position of an element. + // Instead we just check if the menuRef is on screen each render. + // + // This assumes that the menuRef is positioned at (-9999, -9999) + // when it's first rendered. + const boundingRect = menuRef?.getBoundingClientRect(); + const offScreen = + !boundingRect || + (boundingRect.top < 0 && + boundingRect.bottom < 0 && + boundingRect.left < 0 && + boundingRect.right < 0); + useEffect(() => { - if (menuRef) { - if (tabIndex === null) { - menuRef.focus(); - } + // Make sure the menu is on screen before trying to focus it. + // Otherwise, it will scroll to the top of the page. This is + // because when the menuRef is first rendered, it is given a + // position at (-9999, -9999) while we try to determine its + // size so it can be properly position. + // + // This has the effect of waiting until the menuRef is correctly + // positioned before trying to focus. + if (menuRef && !offScreen && tabIndex === null) { + menuRef.focus(); } - }, [menuRef, tabIndex]); + }, [offScreen, menuRef, tabIndex]); function getMenuProps() { return {