adobe / adobe/react-spectrum

[RAC] Focus events for collection items

Open
#6,460 1 comment 3 reactions 0 assignees View on GitHub
enhancement help wanted
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

`ListBoxItem`, `GridListItem`, `MenuItem`, and `Row` expose hover state via `onHoverStart`, `onHoverEnd`, and `onHoverChange`. For the sake of keyboard accessibility I generally try to have parity between hover and focus behaviors, so I was sad to find out that collection items don't also expose focus state via `onFocusStart`, `onFocusEnd`, `onFocusChange`.

I found a way to introduce my own `onFocusChange` event with the following hack:

```jsx
export function GridListItem({
children,
onFocusChange,
...props
}: GridListItemProps) {
const ref = useRef()

return (

{(renderProps) => {
if (onFocusChange) {
if (renderProps.isFocused !== !!ref.current?.dataset.focused) {
onFocusChange(renderProps.isFocused)
}
}
return typeof children === 'function' ? children(renderProps) : children
}}

)
}
```

This… works? It may fire too may times, but it gets me kind of close to what I was after. But I'd sure like to see something upstream that would allow me to take this code out 🙏

### 🤔 Expected Behavior?

N/A

### 😯 Current Behavior

N/A

### 💁 Possible Solution

_No response_

### 🔦 Context

N/A

### 💻 Examples

_No response_

### 🧢 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.