Improve outline behavior

[zommerberg]

The outline behavior in shadcn is often problematic due to limitations in Radix. Ideally, the outline or focus ring should only appear when navigating via keyboard, not when using a mouse. However, the current implementation shows the outline even with mouse interactions, requiring an extra click to remove it.

This issue is particularly noticeable with select elements, where an outline appears on mouse selection when it should only be visible during keyboard navigation. Unfortunately, shadcn can't implement this ideal behavior due to Radix constraints.

Here's an example:

Recording.2024-07-09.134100.mp4

Ideally, it should behave like in libraries such as Catalyst UI, where the ring appears only if the component was initially focused via keyboard. In that case, the ring remains even after selecting an item. However, if the component is selected using a mouse, the ring should never appear.

Recording.2024-07-09.103219.mp4

I've raised this issue in both the shadcn and Radix repositories, but it appears to be a fundamental limitation that can't be easily resolved:

shadcn issue: shadcn-ui/ui#4223
Radix issue: radix-ui/primitives#1803

Given these circumstances, it may be preferable not to emulate this suboptimal outline behavior at all in JollyUI.

[jolbol1]

Hello, thanks for the detail on this. I think I noticed/fix a few of these instances of this myself in the last rewrite I did.

I will take another look and add it to my checking process.

Thanks!

[jolbol1]

The latest version this should be fixed. I couldn't find anywhere else besides the select that has this issue, the others used an input such as combobox, so this behaviour is correct.

Let me know if you run in to other examples.