PopoverButton on click , always shows tab focus

[audelk]

this is in nextjs. i use the sample flyoutmenus.

[audelk]

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

[pawelek7k]

outline-none

[reinink]

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! 👍