[Bug]: cds-combo-box Component Fails to Refresh with Lazy Loaded Options in Reactive Form

[danielsogl]

Detailed description

I’m encountering an issue with the cds-combo-box component when used in a reactive form. Specifically, the problem arises when the available options for the combo box are loaded asynchronously from the backend. Even though the form is patched correctly, the combo box does not refresh to display the selected value once the options are set. Instead, it shows an empty value, which leads to a poor user experience.

Steps to reproduce the issue

1. Create a reactive form that includes a cds-combo-box component.
2. Patch the form with initial values before loading the options.
3. Load the available options for the combo box asynchronously from the backend.
4. Observe that the combo box does not refresh to display the selected value.

[Akshat55]

Hi @danielsogl,

Seems like the two components are getting out of sync, you can trigger change detection manually to fix this. You can do this by injecting private changeDetectorRef: ChangeDetectorRef in the component and calling detectChanges as such this.changeDetectorRef.detectChanges();.

The view can be refreshed after step 3 and it should show the value selected.

[danielsogl]

Hi, sadly this won't help. I already tried fixing it by calling the change detection manually. The combo box remains displayed as empty/unselected.

[Akshat55]

Any chance you can create a stackblitz demo to help us reproduce this? I'm currently testing in storybook and using ChangeDetectorRef seems to be working correctly.

[danielsogl]

@Akshat55 looks like the stackblitz template is broken so I created a demo project to reproduce the issue. The combobox won't show the selected item with the id 1 after the list items are set lazy when pressing the button. It will only work, if you are patching the form again and setting the selected value again: https://github.com/danielsogl/carbon-design-combobox-bug

[danielsogl]

@Akshat55 an update from my side. Looks like the issue is that the selected property is not set when setting the options list but a selected value is already passed to the component. I "resolved" the issue by wrapping the component by myself. The issue itself is still present.

[Akshat55]

@danielsogl Apologies for the late response, I got side tracked.

I took a look your code and it seems the current behavior is not supported in the combobox... And probably won't be, unless we do a breaking change. As of now, the expected behavior is the itemsList is initialized before the value is set.

In your scenario, the value is set, but the items list is empty so we can't set selected: true for an item in the list. When the items list is passed to the combobox, we don't know the value (We don't keep track of it & let angular do that).

You can continue to initialize the form item before the combobox list is set, however you will need to iterate through the combobox items list and set selected: true for the item that matches the value set before passing it to the combobox. This will result in the value showing up in the combobox filter.