Prevent focus returning to trigger element after closing #708
Replies: 4 comments 3 replies
-
Did you find a workaround for this? I'm using the My current solution is to wait a 50ms before focusing the new input element but this is not an elegant solution. |
Beta Was this translation helpful? Give feedback.
-
I want to prevent focus returning to trigger element after closing for the headlessui Vue Dialog, too. @RobinMalfait Is there any Feature (via a property) planned to support this or do you suggest any workaround for this? We need to move away from the headlessui Vue Dialog (which we use because we use a payed tailwindui template) in this situation if there is no solution for this problem. And having to wait for 50ms and re-trigger focus is not an option... |
Beta Was this translation helpful? Give feedback.
-
We have also run into this issue on our end with Listboxes. Our solution for right now is to watch the <script setup>
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
import { useEventListener } from '@vueuse/core'
import WrapperComponent from '...'
const props = defineProps<{
returnFocusElement: HTMLElement | null
}>()
const buttonRef = ref<HTMLElement | null>(null)
const openClose = ({ newOpen, oldOpen }) => {
if (oldOpen === true && newOpen === false) {
useEventListener(buttonRef, 'focus' () => props.returnFocusElement.focus())
}
}
</script>
<template>
<Listbox v-slot="{ open }">
<WrapperComponent :open="open" @wrapper-update="openClose">
<ListboxButton ref="buttonref" />
...ListboxOptions etc
</WrapperComponent>
</Listbox>
</template> This seems very inelegant and error prone, with lots of things to "keep track of". Especially when it seems like a simple boolean flag check before focusing the button would solve this (look for Maybe someone who understands the library a bit better than me can comment on how simple that last bit actually would be 😬 |
Beta Was this translation helpful? Give feedback.
-
The blurring solution (#708 (reply in thread)) works in @headlessui/react@v1.6.4 but not in the latest @headlessui/react@v1.7.x. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
The Dialog, Popover and Menu components currently return focus to the 'trigger' element after closing. For most use cases this is great, but it would be nice to be able to override this behaviour.
We use a lot of Headless UI elements to open menus with actions that add new items to a list or similar behaviour. In those cases, it would be nice to not have focus return to the trigger element so we can manually focus the new element added to the list.
According to the WAI-ARIA spec it's valid to not return focus to the trigger element if makes more sense to move focus to a newly added element.
Source: https://www.w3.org/TR/wai-aria-practices/#dialog_modal
Beta Was this translation helpful? Give feedback.
All reactions