Combobox with footer on the menu

[balajimuthusubash]

Hi team,

We are using paste Combobox which displays a list of options fetched from the backend for the search query on the Combobox. We have an use-case to display only finite amount of options (say 20) on the combobox options and if there are still more results available for the backend, we are trying to show a footer message that advices the user to type more for more accurate matches.

CodeSandbox:- https://codesandbox.io/s/combobox-with-footer-in-the-menu-forked-lkoy9?file=/src/index.tsx

I have used the groupItemsBy attribute of the Combobox to display the footer message as the Group Label (as there are no other ways to display the footer in the menu dropdown that is not selectable).

The idea is to use an empty groupItemsBy option, that acts as the footer for the menu. But the empty group is still displaying an option on the menu (red box on the image below). I tried returning null from the optionTemplate for the specific option, but still renders the option in the menu.

Q1) Is there a way to prevent the last empty footer option from rendering and just the label to be visible? Or is there any other ways of adding footer to the combobox menu?

Q2) Is there a way to specify the maxHeight for the Combobox menu? Currently the max-height: 31.5rem; is set by default. Is there any option to override this?

[SiTaggart]

Hi @balajimuthusubash, thanks for your question.

Unfortunately there is no concept of a footer in a Combobox at the moment. The only thing we can support accessibly is that everything you see in a combobox is an option, so that a user can navigate to it using their keyboard (if you use your up and down arrow keys you can navigate the list and make a selection).

If it's not a valid option, a user won't be able to perceive that information.

So the reason it's trying to render an empty option, is that it expects you to pass it one. It can't be null.

An easy way round this would be to manually append your instructional option to the data and give it some identifier in the JSON. Then use the optionTemplate logic to detect that last option, and render it visually how you'd like. This way I can navigate to the option using my keyboard, read the text instructing me to type more characters and you won't see empty options in the list.

[balajimuthusubash]

Thanks Simon for the quick response.

Can you also let me know if there are ways to restrict the max-height of the Combobox menu and enforce scroll through some params to the Combobox?

One way I could think of achieving this is by overriding the max-height set from the Paste on the Combobox menu in CSS?

Q2) Is there a way to specify the maxHeight for the Combobox menu? Currently the max-height: 31.5rem; is set by default. Is there any option to override this? 

[SiTaggart]

Right now there is no way to control the max-height of the listbox.

We'd be curious to learn about the use-case, what you would be looking to achieve by setting it and the reasoning behind it, so that we might consider adding it when the component is promoted to Beta and Production.

[balajimuthusubash]

Currently we are trying to display description along with the option on the listbox.
Sandbox - https://codesandbox.io/s/combobox-with-footer-in-the-menu-forked-duygp?file=/src/index.tsx

If there are more than 10 options on the combo, the listbox covers the entire page and only then the scroll is enforced. If there is a way for us to enforce scroll after X options on the list/allow 'size' as another argument to the combobox, it would solve our use case better. This behaviour limits us from showing more option on the listbox as there is no way for us to control the height of the component and end up hiding the entire viewport as presented on the sandbox above.

[SiTaggart]

Thanks for the feedback. Is it possible that our max-height by default is just too large? That probably doesn't help.

As for providing an override, I'm unsure on whether we'd allow that. My hope is we can just fix what we currently have so that it's a bit more usage for everyone, especially if the one we set by default is just exceptionally large and not very useful.

It's really good feedback to take into the next round of design work for comboxbox though, to promote it to production. So thank you for that.