Combobox expanding to fit overflow

[drew-thompson]

Hello! Does the Combobox component have a setting to let it automatically expand to the width of the content (if the content is greater than the default width)?  thanks! If not, what are some alternatives/when would that potentially be available?

Thank you!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Combobox + default value & autocomplete? (updated: 02/13/2024, similarity score: 86%)
• Combobox overflow question (updated: 10/23/2023, similarity score: 85%)
• Combobox Insert-after button padding - Answer (updated: 10/31/2022, similarity score: 84%)

[PixeledCode]

Hi @drew-thompson, can you share more details about the use-case of extending the width of the content popover? Figma link or screenshots of the designs will work. I will share the details with the team and come back to you.
In the meantime, you can also check the API of the combobox here: https://paste.twilio.design/components/combobox/api

[PixeledCode]

Thanks for sharing this. Can you create a Codesandbox with a similar implementation? Ideally the combobox will expand to whatever the parent container will allow it to. I think this can solved using layout

[serifluous]

Hey @drew-thompson ! I'll echo what @PixeledCode asked earlier: Can you share the customer use case in the product where you'd need Combobox to expand to fit the width of the content?

We just want to make sure a more straightforward design solution can't work instead. Like, is it possible in your page layout that, by default, the Combobox is already set to the width of the widest option? Or is there a reason the user needs to see the full option text to identify what their selection was?

[drew-thompson]

Hello! The customer was just having trouble seeing the full value that was inside of a combobox. Because the fields they select from are dynamic, we'd have to calculate the width of it and that just seemed like something better meant for the library itself.

The combobox is inline in the UI and, FWIW, here's what the behavior is currently (I added an option to the first example in the Paste docs):

[serifluous]

Got it—We put a sandbox together for how you can achieve this using code to set a reasonable width for extra long content: https://codesandbox.io/p/sandbox/x6lwdn

We decided against auto-sizing the component and instead built Combobox so it'll fill the parent container allowing it to meet all design cases. We decided not to alter this as it would cause overflow issues if we expanded this component and the implementation would then not support scroll in the parent container causing it to be cut off. We also need to take device screen width into account for mobile users. Native support for not exceeding the viewable area is built in with our current solution.

Our standard recommendation would be to keep the Combobox set to a wider width by default, or show the value in another way outside of the Combobox—but yeah, it'll be easier to point you to a better layout/interaction solution if we can see the full layout & use case. Another alternative is to use the itemToString prop to help with readable abbreviations or check string length as demonstrated in the sandbox.

Hope this helps!