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.

[PixeledCode]

Hi @sahibbajaj thank you for reaching out to the Paste team. Here is a demo showcasing the usage of load more inside combobox.
We are appending an additional object we use to determine what to show for the load more option and check it to determine the load functionality when selected.

You can always reach out to us again if you need feedback on general implementation or accessibility

[sahibbajaj]

Thank you for your response. There seems to be a bug with our Paste Combobox implementation when it is in the open state. Whenever we click on the load more button the scroll state of the combobox gets reset and it scrolls to the top of the screen. I have created a short video to demonstrate that. Any idea if this has been addressed or if there is any plan to address the same?

Screen.Recording.2024-10-22.at.5.02.18.PM.mov

[PixeledCode]

thanks @sahibbajaj for pointing out the issue, we are looking into it.

[krisantrobus]

Hi @sahibbajaj, I have resolved those issues in the same sandbox.

The scroll state being reset is due to items changing in the combobox list. The way React works is by re-rendering elements when the state changes (in this case the items data gets updated). The re-render is what is causing the issue. I have updated it so the scroll position is stored before the items get updated and we call the reset (to clear the load more option). This targets the active Combobox List on the page.

For the other issue where you could not dismiss the list after selecting Load More as an option I have updated the isOpen logic and is resolved.

Please note that this is a short term solution and that when we come to enhance our Combobox in future we plan to introduce this along with other features.

I hope this helps!

[sahibbajaj]

Thanks for your response and for fixing that @krisantrobus