[PM-21121] fix(select): update selected item when items input changes (#14609)

libs/components/src/select/select.component.spec.ts

@@ -0,0 +1,52 @@
+import { Component } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { mock } from "jest-mock-extended";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { SelectComponent } from "./select.component";
+import { SelectModule } from "./select.module";
+
+@Component({
+  standalone: true,
+  imports: [SelectModule, ReactiveFormsModule],
+  template: `
+    <form [formGroup]="form">
+      <bit-select formControlName="fruits"></bit-select>
+    </form>
+  `,
+})
+export class TestFormComponent {
+  form = new FormGroup({ fruits: new FormControl<"apple" | "pear" | "banana">("apple") });
+}
+
+describe("Select Component", () => {
+  let select: SelectComponent<unknown>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestFormComponent],
+      providers: [{ provide: I18nService, useValue: mock<I18nService>() }],
+    }).compileComponents();
+    const fixture = TestBed.createComponent(TestFormComponent);
+    fixture.detectChanges();
+
+    select = fixture.debugElement.query(By.directive(SelectComponent)).componentInstance;
+  });
+
+  describe("initial state", () => {
+    it("selected option should update when items input changes", () => {
+      expect(select.selectedOption?.value).toBeUndefined();
+
+      select.items = [
+        { label: "Apple", value: "apple" },
+        { label: "Pear", value: "pear" },
+        { label: "Banana", value: "banana" },
+      ];
+
+      expect(select.selectedOption?.value).toBe("apple");
+    });
+  });
+});

libs/components/src/select/select.component.ts

@@ -41,13 +41,25 @@ let nextId = 0;
 export class SelectComponent<T> implements BitFormFieldControl, ControlValueAccessor {
   @ViewChild(NgSelectComponent) select: NgSelectComponent;
 
+  private _items: Option<T>[] = [];
   /** Optional: Options can be provided using an array input or using `bit-option` */
-  @Input() items: Option<T>[] = [];
+  @Input()
+  get items(): Option<T>[] {
+    return this._items;
+  }
+  set items(next: Option<T>[]) {
+    this._items = next;
+    this._selectedOption = this.findSelectedOption(next, this.selectedValue);
+  }
+
   @Input() placeholder = this.i18nService.t("selectPlaceholder");
   @Output() closed = new EventEmitter();
 
   protected selectedValue: T;
-  protected selectedOption: Option<T>;
+  protected _selectedOption: Option<T>;
+  get selectedOption() {
+    return this._selectedOption;
+  }
   protected searchInputId = `bit-select-search-input-${nextId++}`;
 
   private notifyOnChange?: (value: T) => void;
@@ -68,7 +80,6 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
       return;
     }
     this.items = value.toArray();
-    this.selectedOption = this.findSelectedOption(this.items, this.selectedValue);
   }
 
   @HostBinding("class") protected classes = ["tw-block", "tw-w-full", "tw-h-full"];
@@ -90,7 +101,7 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
   /**Implemented as part of NG_VALUE_ACCESSOR */
   writeValue(obj: T): void {
     this.selectedValue = obj;
-    this.selectedOption = this.findSelectedOption(this.items, this.selectedValue);
+    this._selectedOption = this.findSelectedOption(this.items, this.selectedValue);
   }
 
   /**Implemented as part of NG_VALUE_ACCESSOR */