fix(combobox): Fixes an issue with setting the value not updating the…

… input correctly.

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

@@ -38,6 +38,7 @@ import { DtCombobox } from './combobox';
 import { DtComboboxModule } from './combobox-module';
 import { CommonModule } from '@angular/common';
 import { DtIconModule } from '@dynatrace/barista-components/icon';
+import { Subject } from 'rxjs';
 
 function focusInput(input: HTMLInputElement): void {
   dispatchFakeEvent(input, 'focusin');
@@ -120,13 +121,34 @@ describe('Combobox', () => {
       overlayContainerElement.querySelectorAll('dt-option').length,
     ).toEqual(3);
   }));
+
+  it('should set the value in the input correctly if a value is set at runtime', fakeAsync(() => {
+    fixture.componentInstance.setOptions();
+    fixture.detectChanges();
+    expect(input.value).toBe('');
+    expect(input.placeholder).toBe('My placeholder');
+
+    fixture.componentInstance.value$.next({
+      name: 'Value 2',
+      value: '[value: Value 2]',
+    });
+    fixture.detectChanges();
+    expect(input.value).toBe('Value 2');
+  }));
 });
 
 /** Test component */
 @Component({
   selector: 'dt-test',
   template: `
-    <dt-combobox (opened)="openedSpy()" (closed)="closedSpy()">
+    <dt-combobox
+      (opened)="openedSpy()"
+      (closed)="closedSpy()"
+      [value]="value$ | async"
+      placeholder="My placeholder"
+      [compareWith]="compareFn"
+      [displayWith]="displayFn"
+    >
       <dt-option *ngFor="let option of options" [value]="option">
         {{ option.name }}
       </dt-option>
@@ -138,6 +160,19 @@ class TestComponent {
   openedSpy = jest.fn();
   closedSpy = jest.fn();
 
+  value$ = new Subject<{ name: string; value: string }>();
+
+  compareFn(
+    v1: { name: string; value: string },
+    v2: { name: string; value: string },
+  ): boolean {
+    return v1.value === v2.value;
+  }
+
+  displayFn(val: { name: string; value: string }): string {
+    return val.name;
+  }
+
   setOptions(): void {
     this.options = [
       { name: 'Value 1', value: '[value: Value 1]' },

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

@@ -146,6 +146,8 @@ export class DtCombobox<T> extends _DtComboboxMixinBase
   set value(newValue: T) {
     if (newValue !== this._value) {
       this._value = newValue;
+      this._setSelectionByValue(newValue);
+      this._resetInputValue();
     }
   }
   private _value: T;
@@ -254,7 +256,7 @@ export class DtCombobox<T> extends _DtComboboxMixinBase
 
   /** The currently selected option. */
   get selected(): DtOption<T> {
-    return this._selectionModel.selected[0];
+    return this._selectionModel && this._selectionModel.selected[0];
   }
 
   get focused(): boolean {
@@ -458,18 +460,20 @@ export class DtCombobox<T> extends _DtComboboxMixinBase
 
   /** Searches for an option matching the value and selects it if found */
   private _selectValue(value: T): DtOption<T> | undefined {
-    const correspondingOption = this._options.find((option: DtOption<T>) => {
-      try {
-        // Treat null as a special reset value.
-        return (
-          isDefined(option.value) && this._compareWith(option.value, value)
-        );
-      } catch (error) {
-        // Notify developers of errors in their comparator.
-        LOG.warn(error);
-        return false;
-      }
-    });
+    const correspondingOption =
+      this._options &&
+      this._options.find((option: DtOption<T>) => {
+        try {
+          // Treat null as a special reset value.
+          return (
+            isDefined(option.value) && this._compareWith(option.value, value)
+          );
+        } catch (error) {
+          // Notify developers of errors in their comparator.
+          LOG.warn(error);
+          return false;
+        }
+      });
 
     if (correspondingOption) {
       this._selectionModel.select(correspondingOption);