Combobox: Option to Load More?

[sahibbajaj]

For a single-select Combobox here, what is the recommended way to allow the users to load more rows to the Combobox?

The About Combobox section at that link in the Paste documentation says the following:

A Combobox allows a user to select a single value from a styled listbox of options. Each option can consist of more than just text, e.g. text paired with an icon. However, an option can only be paired with non-interactive content and shouldn’t contain components like a checkbox or button.

Now to add a Load More button, we need the last option in the Combobox to be paired with an interactive element like the Load More button as displayed below, which is not what is recommended above in the Paste docs. Is there any other recommended way to load more rows?

[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.

---

For a single-select Combobox, the recommended way to allow users to load more rows is not explicitly detailed in the provided documentation sections. However, based on the information provided:

• The Combobox component does not currently support interactive elements like buttons within its list of options, as mentioned in the About Combobox section. This means that implementing a "Load More" button directly within the Combobox options list, as you described, would not align with the current design and functionality guidelines of the Paste Combobox component.

• It is mentioned in the select component with server side search - Answer section that although Combobox does not include lazy loading, there is a ticket in the backlog to add this functionality (DSYS-3530). This suggests that the functionality to load more items dynamically is recognized as a need but is not yet available.

Given this, the recommended approach to load more rows into a Combobox, adhering strictly to the current capabilities and guidelines of the Paste design system, is not clearly defined. For now, you might consider implementing an external mechanism to load more items into the Combobox's options list before it is opened or interacted with by the user. This could involve a separate UI element outside of the Combobox that, when interacted with, loads more items into the Combobox's data source.

For updates on the implementation of lazy loading or any other enhancements to the Combobox component, keep an eye on the Paste roadmap and the specific ticket mentioned (DSYS-3530).

For more detailed guidance or alternative patterns, it would be beneficial to follow the discussions and updates directly on the Paste documentation site and the GitHub discussions mentioned in the responses:

• Combobox component on Paste
• GitHub discussion on async functionality
• GitHub discussion on async functionality

Sorry, I don't have a direct solution to implement a "Load More" button within the Combobox based on the current guidelines and capabilities of the Paste design system.

I also did a search, 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:

• pagination within comboBox (updated: 10/06/2022, similarity score: 89%)
• Combobox Insert-after button padding - Answer (updated: 10/31/2022, similarity score: 88%)
• Combobox vs. Button (updated: 09/13/2023, similarity score: 86%)

[dosubot[bot]]

Hey @sahibbajaj! 👋 I'm here to help with any bugs, questions, or contributions you have. Let's tackle this challenge together!

I found a similar discussion regarding pagination within the Combobox component. Currently, the Paste design system does not support a lazy loading feature in the Combobox component, but there are plans to add this feature in the future ^[1].

As for implementing a "Load More" button, the current guidelines suggest that options in the Combobox should not contain interactive elements like buttons. Unfortunately, there isn't a documented workaround or pattern in the Paste documentation for implementing a "Load More" feature in a Combobox. However, you might consider managing the data externally and updating the Combobox items dynamically as a potential approach. This involves using the Combobox as a controlled component, where you manage its state and update the list of items based on user actions or other triggers ^[2].

To continue talking to Dosu, mention @dosu.