ensure to prevent the default behaviour of keyboard navigation

Author: RobinMalfait

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

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