huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ensure to prevent the default behaviour of keyboard navigation

Browse Source
This commit is contained in:
Robin Malfait
2020-09-28 23:47:50 +02:00
parent 93e8b8f4ba
commit fedfc0cc1b
2 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/@headlessui-react/src/components/menu/menu.tsx
+6
View File
@@ -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
+6
View File
@@ -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