[RAC] Focus events for collection items

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:

export function GridListItem({
  children,
  onFocusChange,
  ...props
}: GridListItemProps) {
  const ref = useRef<HTMLDivElement>()

  return (
    <GridListItemBase ref={ref} {...props} className={itemStyles}>
      {(renderProps) => {
        if (onFocusChange) {
          if (renderProps.isFocused !== !!ref.current?.dataset.focused) {
            onFocusChange(renderProps.isFocused)
          }
        }
        return typeof children === 'function' ? children(renderProps) : children
      }}
    </GridListItemBase>
  )
}

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