react-aria-components / FocusRing

[rolanday]

I'm transitioning to using RAC and only using hooks approach where needed (as per advice in separate thread). When I wrap a RAC component (e.g., a TextField) in FocusRing, I do not get same behavior as when using hooks approach. RAC examples do not mention FocusRing, and yet the components do not provide focusRingClass prop.

I like the FocurRing class concept and associated behavior (only shows ring if user navigate via keyboard) and no luck getting similar behavior as have with my hooks components. Can somebody please share guidance for how to achieve similar behavior via RAC?

Thanks!

[reidbarber]

All focusable components should have the focus-visible state available.

Button example: https://react-spectrum.adobe.com/react-aria/Button.html#styling

This means that the data-focus-visible attribute added when the element is keyboard focused. You can also use render props to access isFocusVisible, and conditionally render classes or components. This is essentially what FocusRing/useFocusRing do, so you shouldn't need to add FocusRing around any of the RAC components.

[rolanday]

Thank you for the guidance / clarification. Much appreciated!