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