[RAC] Focus events for collection items
- 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
Assessment
This issue has not been assessed yet.