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.

[LFDanLu]

The hook docs are a bit outdated unfortunately, I think you are running into an issue between the old collections implementation (against which useListBox docs are written against) and the new collections implementation which React Aria Components uses. I think the experience you are trying to create will be much easier with Autocomplete and the changes we are exploring to filtering in #8695. We'll need to make some changes to have Autocomplete work with the listbox being in a separate popover, but I'm hoping the finalized API would allow you to specify a separate filter text that the Autocomplete should apply to the listbox which keeping your textarea input controlled to what the user is typing

[zachrip]

Thanks for your response, and sorry if I came off ungrateful, dropping down into the hooks can just be really challenging especially because when you go to the component implementations they're really nothing like you'd expect based on the examples.

That said, I did end up hand rolling my own using active descendant and whatnot. If autocomplete can support my use case of the editor being the input then I'll definitely take a look. I don't love rolling this myself because it's hard to get right sometimes.

[LFDanLu]

No worries, you're fine! Definitely understand that getting the hooks to all work nicely together is quite challenging, that part of the docs is something we want to revisit as we work on their next iteration.

[tleunen]

@LFDanLu Hey Daniel, would you say that the right way to build something like a mention list described above is by using the Autocomplete component? Wrapping the whole RTE with the autocomplete and using a custom filter function based on the trigger character?

[LFDanLu]

@tleunen yes, I would say that is the easiest approach but there may be several obstacles that may prevent you from accomplishing this as is with the current Autocomplete component/hooks, namely handling the dropdown open state. The current Autocomplete wasn't tested or built with a collection that would be conditionally rendered so it may not work 100% for this use case/may have some problem areas. We have another member of an adjacent team looking into this very use case so stay tuned!