diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx index 02c0bed..88037c4 100644 --- a/packages/@headlessui-react/src/components/menu/menu.tsx +++ b/packages/@headlessui-react/src/components/menu/menu.tsx @@ -398,6 +398,7 @@ const Items = forwardRefWithAs(function Items< // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12 case Key.Enter: + event.preventDefault() dispatch({ type: ActionTypes.CloseMenu }) if (state.activeItemIndex !== null) { const { id } = state.items[state.activeItemIndex] @@ -407,20 +408,25 @@ const Items = forwardRefWithAs(function Items< break case Key.ArrowDown: + event.preventDefault() return dispatch({ type: ActionTypes.GoToItem, focus: Focus.NextItem }) case Key.ArrowUp: + event.preventDefault() return dispatch({ type: ActionTypes.GoToItem, focus: Focus.PreviousItem }) case Key.Home: case Key.PageUp: + event.preventDefault() return dispatch({ type: ActionTypes.GoToItem, focus: Focus.FirstItem }) case Key.End: case Key.PageDown: + event.preventDefault() return dispatch({ type: ActionTypes.GoToItem, focus: Focus.LastItem }) case Key.Escape: + event.preventDefault() dispatch({ type: ActionTypes.CloseMenu }) d.nextFrame(() => state.buttonRef.current?.focus()) break diff --git a/packages/@headlessui-vue/src/components/menu/menu.ts b/packages/@headlessui-vue/src/components/menu/menu.ts index 5d5aa85..14f817e 100644 --- a/packages/@headlessui-vue/src/components/menu/menu.ts +++ b/packages/@headlessui-vue/src/components/menu/menu.ts @@ -336,6 +336,7 @@ export const MenuItems = defineComponent({ // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12 case Key.Enter: + event.preventDefault() api.closeMenu() if (api.activeItemIndex.value !== null) { const { id } = api.items.value[api.activeItemIndex.value] @@ -345,20 +346,25 @@ export const MenuItems = defineComponent({ break case Key.ArrowDown: + event.preventDefault() return api.goToItem(Focus.NextItem) case Key.ArrowUp: + event.preventDefault() return api.goToItem(Focus.PreviousItem) case Key.Home: case Key.PageUp: + event.preventDefault() return api.goToItem(Focus.FirstItem) case Key.End: case Key.PageDown: + event.preventDefault() return api.goToItem(Focus.LastItem) case Key.Escape: + event.preventDefault() api.closeMenu() nextTick(() => api.buttonRef.value?.focus()) break