Bug: Popover components interfere with keyboard navigation on <a> elements contained within <PopoverButton> components

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.5.0

What browser are you using?

Firefox latest Chrome latest

Reproduction URL

https://github.com/sps-nathan-alden-sr/tailwindui-popover-bug

Run yarn, then yarn serve to start the app.

Describe your issue

It seems that popover components interfere with the proper function of rendered <a> elements that are contained within <PopoverButton> components. In the GIF below, you can see how I tab to the links and press ENTER, which is detected by the event handler, but no navigation actually occurs. Clicking the links works as expected, as demonstrated at the very end of the animation.

The component in question is https://github.com/sps-nathan-alden-sr/tailwindui-popover-bug/blob/master/src/components/TopNavComponent.vue.

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

I was also to reproduce it locally in a test and wrote a fix for it. I tested it on your repo and it works with normal a and router-link components.

This should be fixed by #1153, and will be available in the next release.

You can already try it using npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

[sps-nathan-alden-sr]

Yeah, I tried regular <a> elements, as well, thinking it might’ve been <router-link> magic. That’s why I think it must have something to do with event bubbling. Maybe the event is being canceled by a parent element?