Combobox in Modal: Entire length of combobox options are "hidden" within modal

[ghostling]

Our use case for Combobox in Modal will contain more than 10 items, i.e. list of countries. This is the suggested usecase under select vs combobox docs. However, when the Combobox lives in a Modal, the options are kind of hidden within the space of the modal, so it's hard to see all the options. User would need to scroll down within the modal. In contrast, the Select component displays the options over the modal.

Not sure if this is the intended behavior or a bug...

See demo: https://codesandbox.io/s/paste-combobox-modal-hd3gy-hd3gy

[crubio]

I found a way around this using Paste Select, but seems its not intended for fairly large lists (over 100 items).

Is Combobox recommended in cases like this instead of Select?

[SiTaggart]

Firstly, let me just say that I love, love, love that you created a Sandbox to demonstrate the issue @ghostling 🙇 I want to see more of this at Twilio, thank you! 🎉

Not sure if this is the intended behavior or a bug...

So the unfortunate answer is it's kinda of both. We knew it would be a limitation of the current implementation, we even have a ticket in the backlog already to investigate using something like popper to try and pull it out of its container. But I'm not sure it's a guarantee we'll be able to solve it, but I'm hopeful that something like position: fixed should be able to help us here. (That's the kinda of a bug part)

We reasoned that, as it follows current behaviour of our selects / custom comboboxes in console, it wouldn't be too much of a big deal until we get time to look at it. (That's the kinda intended part)

The advantage our Select component has is that it's obviously a native browser control, and they don't have the same constraints as custom controls do with regards to how they show inside scrolled container.

As for

but seems its not intended for fairly large lists

Yes, that's an accurate assumption. An autocomplete Combobox would be a much better experience as I could filter the list of countries as I type. You'll just have to live with the options being cut off for now, until we get to looking at the ticket.

The advantage being that if we do solve it, your experience will get the update pretty seemlessly by upgrading the package version once it's released. So it's not ideal, but I'd recommend sticking with the combobox for now.

[ghostling]

No problem, the Paste Codesandbox template makes it super easy to put a demo together.

Thanks for the detailed answer! We'll continue to use Combobox for the time being.

[charleneyjh1]

Hi @SiTaggart ! Our team faced the exact same issue. You mentioned you have a ticket in backlog to investigate this issue. I wanted to check-in the status of that. Thank you!

[SiTaggart]

I am not sure where it went. I certainly can't find it, so I created a new one instead. As you may have guessed by now, we haven't gotten any closer to prioritizing this just yet,

https://issues.corp.twilio.com/browse/DSYS-2794

[shleewhite]

Hi @ghostling and @charleneyjh1!

We have recently published a fix for this issue. Please upgrade either @twilio-paste/combobox to 13.0.3 or @twilio-paste/core to 17.0.5.

Let me know if you continue to have issues! Thank you again for letting us know about this bug.