Adding links to combobox options

[vankhoawin]

Is Combobox the correct component to use for a navbar search? It's what is being currently used by the Console Zen project, but it seems that you have to click on the link within an option to open the page, rather than clicking/pressing enter on the selected option. I see that Paste's website is an Input component with the options being handled by Algolia, so I'm curious to hear the team's thoughts on the best way forward.

[SiTaggart]

Hi @vnguyen94

Yes, a Combobox is absolutely the correct component to use. It's all about the implementation, which considering the fidelity of the docs right now, is probably going to trip folks up.

For the Paste search, we are restricted by the Algolia plan we're on (free), that we have to use their JavaScript to power it. The means we can't use our Combobox. That being said, their JavaScript turns our Input into a Combobox by decorating our Input with ARIA and keyboard interactions for the Listbox, just a slightly different implementation of one.

For a Combobox to be accessible, the selection of an option should trigger the resultant action. That action can be simply setting the value of input, or additionally responding to that selected value onSelectedItemChange and performing an additional action such as page navigation.

If the action you want to perform is page navigation you are likely to want to be able to do anchor based behaviors as well, such as cmd+click to launch that page into a new tab. So you need to be clever with your implementation, so that the navigation action happens upon clicking the entire option (because it's an HTML anchor underneath to get the browser behaviours) AND perform the navigation action onSelectedItemChange.

We obviously can't comment on various product implementations of our components but we will be adding a tonne of documentation to the Combobox exploring some of these examples and approaches.