Integrating listbox/autocomplete with tiptap?

[zachrip]

Hey folks - I've been working on adding a mention component to my RTE. I'm using their plugin to do so. You end up with a few places to hook and render your list of options (example here). The issue I'm running into now is that while the listbox is rendering fine, I am struggling to find the correct way to handle arrow keys/focus without taking focus from tiptap.

I've put together a codesandbox, it's ugly but functional: https://codesandbox.io/p/sandbox/fthm3p - the expected outcome would be that the first item is focused automatically and arrow up/down navigate the menu, while focus is maintained in the editor itself.

[zachrip]

I've gotten a bit further on this - I'm using useListbox now with virtual selection and whatnot. The thing that is really bothering me is it feels like the opt out from the components just leaves you in a pit of despair. It's not clear to me reading the source for listbox why when using the listbox component you don't need to use item components, but once you switch to useListbox you do. The example given leads to an inversion of control that doesn't exist with the other components (ListboxItem accepts Item props AND the list item props like className). Why can't I use ListboxItem with useListbox? Why can't I create my own ListboxItem that returns an Item with an li in it?

And biggest of all, I have no idea what I'm giving up in terms of accessibility once I switch to this hook.