fix(combobox): Fixes an issue with programmatic setting of the value …

…to null.

Fixes APM-272145

apps/components-e2e/src/components/combobox/combobox.e2e.ts

@@ -20,6 +20,7 @@ import {
   comboboxInput,
   option,
   loadingIndicator,
+  resetValueButton,
 } from './combobox.po';
 
 fixture('Combobox')
@@ -126,3 +127,12 @@ test('should not reset the value when hitting continuously typing the backspace
     .expect(option.nth(2).textContent)
     .contains('Value 3');
 });
+
+test('should reset the value when setting the value programmatically to null', async (testController: TestController) => {
+  await testController
+    .expect(comboboxInput.value)
+    .eql('Value 1')
+    .click(resetValueButton)
+    .expect(comboboxInput.value)
+    .eql('');
+});

apps/components-e2e/src/components/combobox/combobox.html

@@ -13,3 +13,7 @@
     {{ option.name }}
   </dt-option>
 </dt-combobox>
+
+<button id="resetValue" (click)="_initialValue = null">
+  Set value to null
+</button>

apps/components-e2e/src/components/combobox/combobox.po.ts

@@ -27,3 +27,5 @@ export const option = comboboxOverlayPane.find('.dt-option');
 export const loadingIndicator = Selector(
   '.dt-combobox-postfix.dt-combobox-spinner',
 );
+
+export const resetValueButton = Selector('#resetValue');

apps/components-e2e/src/components/combobox/combobox.ts

@@ -53,7 +53,7 @@ function optionFilter(
 export class DtE2ECombobox {
   @ViewChild(DtCombobox) combobox: DtCombobox<any>;
 
-  _initialValue = allOptions[0];
+  _initialValue: ExampleComboboxOption | null = allOptions[0];
   _options = [...allOptions];
   _loading = false;
   _displayWith = (option: ExampleComboboxOption) => option.name;

libs/barista-components/experimental/combobox/src/combobox.ts

@@ -500,6 +500,17 @@ export class DtCombobox<T>
 
   /** Updates the selection by value using selection model and keymanager to handle the active item */
   private _setSelectionByValue(value: T, triggered: boolean = true): void {
+    // If value is being reset programmatically
+    if (value === null && this._selectionModel) {
+      // Deselect all values in the selection model
+      for (const selected of this._selectionModel.selected) {
+        this._selectionModel.deselect(selected);
+      }
+      this._writeValue();
+      this._changeDetectorRef.markForCheck();
+      return;
+    }
+
     const correspondingOption = this._selectValue(value, triggered);
 
     // Shift focus to the active item