DropdownList used in combination with Combobox closes when adding elements to the list (infinite scroll impossible)

[philippe-bujeau]

Detailed description

We are implementing a Combobox with infinite scroll where we fetch the first 100 items then fetch the next ones when reaching the bottom of the DropdownList. After fetching the next 100 items we regenerate the ListItems which triggers a DropdownList.updateList(). The problem is that this function triggers a doEmitSelect() (see this line) which triggers a dropdown close. This breaks the user flow since the user has to re-open the dropdown to keep scrolling.

Is this a feature request (new component, new icon), a bug, or a general issue?

Not sure: this could be a bug or done on purpose

Is this issue related to a specific component?

DropdownList + Combobox

What did you expect to happen? What happened instead? What would you like to see changed?

I would expect the dropdown to not close when we update the list items.
If done on purpose, could we add an emitSelectedValuesOnListUpdate input to the DropdownList component so we can disable this behavior in order to implement infinite scroll?

What browser are you working in?

Chrome, Edge

What version of the Carbon Design System are you using?

5.56.3

[Akshat55]

Hi @philippe-bujeau , sorry for the late response, I was on vacation - are you extending the dropdown list / combobox to create a custom component or are you using it out of the box and trying to add this functionality?

We've actually thought about adding support for this, but couldn't get to it since upstream carbon does not have it. It would definitely improve performance for very long lists.

Could you provide us with a stackblitz or code snippets to help us replicate this behavior and debug this issue?

[YaswanthManoharan]

Hi, I think this is exactly similar to our issue too. We are using combobox with dropdown-list. When the user starts typing we are calling a external api to load emails. Each time the dropdown closes eventhough the items is getting loaded. But each time user have to click on the input field to open the dropdown. We are using

"@carbon/icons": "^10.48.2",

"@carbon/styles": "^1.72.0",
"carbon-components": "10.58.10",
"carbon-components-angular": "5.23.1",

Is this a known issue which is fixed in any patch versions of carbon or how could we resolve it? Its creating a impact in user experience.

This issue we are facing after angular 7 to 19 migration. In angular 7 it was working as expected. Any help would be appreciated