search

tailwindlabs / tailwindui-issues

Bug fixes and feature request tracking for Tailwind UI.
233 stars 4 forks source link

PopoverButton on click , always shows tab focus #1607

Closed audelk closed 1 week ago

audelk commented 2 months ago

this is in nextjs. i use the sample flyoutmenus. 2024-06-272

audelk commented 2 months ago

its very annoying, as you can see,every time i click "cars" , it automatically shows the tab focus .

pawelek7k commented 2 months ago

outline-none

reinink commented 1 week ago

Hey there! Apologies for the delayed response — I'm sure you've long moved on from this, but for the benefit of others I would just reiterate what @pawelek7k suggested. If you add the outline-none class to your PopoverButton this outline will go away.

However, I'd recommend still adding a focus ring when focused using the keyboard. You can do this using the data-[focus]:ring class for this.

For example:

- <PopoverButton className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+ <PopoverButton className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900 outline-none data-[focus]:ring">

Hope that helps! 👍