From 01730931c057232eeac3ade40e911998c3d1ce74 Mon Sep 17 00:00:00 2001 From: Calum Smith Date: Thu, 12 Oct 2023 13:07:03 -0400 Subject: [PATCH] =?UTF-8?q?Don=E2=80=99t=20scroll=20menus=20in=20response?= =?UTF-8?q?=20to=20hover?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit By default, when a menu item is focused, browsers will scroll it into view. Sometimes even into the centre of the view. This is good when using a keyboard, because the focused item is automatically visible, but when it was focused in response to mouse movement, it has the effect of moving the item out from underneath the pointer. Fixes radix-ui/primitives#1566 --- .yarn/versions/54d1ffa8.yml | 8 ++++++++ packages/react/menu/src/Menu.tsx | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 .yarn/versions/54d1ffa8.yml diff --git a/.yarn/versions/54d1ffa8.yml b/.yarn/versions/54d1ffa8.yml new file mode 100644 index 0000000000..c8c9f2f10b --- /dev/null +++ b/.yarn/versions/54d1ffa8.yml @@ -0,0 +1,8 @@ +releases: + "@radix-ui/react-context-menu": patch + "@radix-ui/react-dropdown-menu": patch + "@radix-ui/react-menu": patch + "@radix-ui/react-menubar": patch + +declined: + - primitives diff --git a/packages/react/menu/src/Menu.tsx b/packages/react/menu/src/Menu.tsx index d92913113c..731eb81225 100644 --- a/packages/react/menu/src/Menu.tsx +++ b/packages/react/menu/src/Menu.tsx @@ -729,7 +729,7 @@ const MenuItemImpl = React.forwardRef( contentContext.onItemEnter(event); if (!event.defaultPrevented) { const item = event.currentTarget; - item.focus(); + item.focus({ preventScroll: true }); } } })