How to prevent focus on press for CalendarCell?

[tuananhlai]

Hi, I'm working on a Calendar component for my library, and I noticed that the calendar cell is always focused when they're clicked on using a mouse. I'd like to remove this behavior.

I've tried:

1. Checking the source code to see how to remove this behavior. I didn't find any special props but it seems like the behavior is already removed by this line. (

   react-spectrum/packages/@react-aria/calendar/src/useCalendarCell.ts

   Line 167 in 8e6cefd

   preventFocusOnPress: true,

   )
2. Checking the example on useCalendar documentation. It seems like it has the same behavior. The below screen capture was done on MacOS's Firefox.

2023-08-09.21.10.18.mov

If anyone can help me with this, I'd be very much appreciated. Thank you!

[LFDanLu]

Mind expanding on your use case here? If you remove focus on click, where would focus go instead?

[tuananhlai]

Thank you for the reply. My issue is the same as this one. I don't want the CalendarCell to have an outline when I clicked on it with a mouse.

Since preventFocusOnPress prop is already passed to usePress inside useCalendarCell, I would expect that the outline does not appear. However, it's not the case with my component or the example component in useCalendar documentation.

Hope this clear up a bit about my issue. 😄

[reidbarber]

Is the issue just with the blue outline that some browsers use? If so you can add outline: none and style it yourself.

[tuananhlai]

I don't want to remove the outline entirely 🤔 . Rather, I want the CalendarCell outline behavior to match react-aria button more closely.

1. Clicked on by a mouse: outline is not shown.
2. Navigated to by keyboard: outline is shown.

[tuananhlai]

I found out that I could use useFocusVisible to hide the outline when the CalendarCell is focused by a keyboard. Thank you everyone for your help!.