adobe / adobe/react-spectrum

Focusable and FocusRing components are not composable

Open
#8,009 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

Focusable and FocusRing components are not composable. FocusRing has no effect on the element made focusable using Focusable component.

### 🤔 Expected Behavior?

focusClass and focusRingClass should be applied to the div element when it's focused

```jsx


{children}

```

### 😯 Current Behavior

Classes don't get applied

### 💁 Possible Solution

FocusRing applies classes to the immediate child and in this case immediate child is Focusable component. So the simplest solution is make Focusable pass the `className` prop through. Another solution is to add render props to the FocusRing component

### 🔦 Context

It's not a big issue as it can be worked around with `useFocusRing` hook, but would be nice to be able to keep app's code as declarative as possible.

### 🖥️ Steps to Reproduce

Here is the reproduction sandbox https://codesandbox.io/p/sandbox/charming-bell-m677n4.
You can see that classes are not applied when `Focus me!` element is focused.

### Version

react-aria: "^3.38.1", react-aria-components: "^1.7.1"

### What browsers are you seeing the problem on?

Other

### If other, please specify.

All

### What operating system are you using?

MacOS Ventura 13.5.2

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.