How to use interaction based react-aria hooks with react-aria-components?

[mikBighne98]

Hey,
I'm working on a notion style slash command menu for a rich text editor using Popover and ListBox components.

While opening the popover and controlling the selected item state with up/down keys when the popover is open is straightforward, I'm having trouble changing selection based on hovering over ListBoxItem component using the useHover hook. The useHover hook is not registering hover events on the list items.

function AriaListBoxItem(props: ListBoxItemProps ) {
  let { hoverProps } = useHover({ onHoverStart() {
    console.log(`hovered on item ${props.id}`);
    },
  })

  return (
    <ListBoxItem {...hoverProps} {...props} />
  );
}

Is this because of the use of the same hook under the hood, or is there another reason? If there is any other better way then do lemme know 😄.

Thanks!

[reidbarber]

Hover event handlers (onHoverStart, onHoverChange, onHoverEnd) were added to ListboxItem via #5777 (and other collection items via #6255). Those will be part of the upcoming release, or you can use them now in the nightlies. You won't need to use useHover when that becomes available since it is used under the hood.

[mikBighne98]

Awesome!! Thanks for the heads-up 👍

[upender7270]

is this released?

[snowystinger]

What are you having an issue with in the latest release? Can you provide a codesandbox or stackblitz demonstrating the issue?

[upender7270]

I just want to use the onHoverStart and onHoverEnd events to display the menu on hover on listBox item

[snowystinger]

Can you provide a codesandbox or stackblitz demonstrating the issue?

In general, we don't recommend showing/hiding anything on hover, this is not accessible to keyboard users or touch users or assistive technologies. Nobody but a mouse user can activate hover.