fixup! test(cdk-experimental/combobox): add unit tests

Author: wagnermaciel

src/cdk-experimental/combobox/combobox.spec.ts

@@ -13,7 +13,6 @@ import {
   ElementRef,
   inject,
   input,
-  model,
   signal,
   WritableSignal,
 } from '@angular/core';
@@ -54,9 +53,6 @@ export class CdkCombobox<V> {
   /** Whether the combobox is focused. */
   readonly isFocused = signal(false);
 
-  /** The values of the current selected items. */
-  value = model<V | undefined>(undefined);
-
   /** The function used to filter the options in the popup based on the input text. */
   filter = input<(inputText: string, itemText: string) => boolean>((inputText, itemText) =>
     itemText.toLowerCase().includes(inputText.toLowerCase()),
@@ -69,33 +65,22 @@ export class CdkCombobox<V> {
   readonly pattern = new ComboboxPattern<any, V>({
     ...this,
     inputEl: signal(undefined),
-    containerEl: signal(undefined),
+    containerEl: () => this._elementRef.nativeElement,
     popupControls: () => this.popup()?.controls(),
   });
 
   constructor() {
-    (this.pattern.inputs.containerEl as WritableSignal<HTMLElement>).set(
-      this._elementRef.nativeElement,
-    );
-
     afterRenderEffect(() => {
-      this._deferredContentAware?.contentVisible.set(this.pattern.isFocused());
+      if (!this._deferredContentAware?.contentVisible() && this.pattern.isFocused()) {
+        this._deferredContentAware?.contentVisible.set(true);
+      }
     });
 
     afterRenderEffect(() => {
       if (!this._hasBeenFocused() && this.pattern.isFocused()) {
         this._hasBeenFocused.set(true);
       }
     });
-
-    afterRenderEffect(() => {
-      if (!this._hasBeenFocused()) {
-        if (this.value() !== undefined) {
-          this._deferredContentAware?.contentVisible.set(false);
-          this.pattern.setDefaultState();
-        }
-      }
-    });
   }
 }
 

src/cdk-experimental/combobox/combobox.ts

@@ -158,6 +158,8 @@ export class CdkListbox<V> {
       }
     });
 
+    // Ensure that if the active item is removed from
+    // the list, the listbox updates it's focus state.
     afterRenderEffect(() => {
       const items = inputs.items();
       const activeItem = untracked(() => inputs.activeItem());
@@ -167,13 +169,13 @@ export class CdkListbox<V> {
       }
     });
 
+    // Ensure that the value is always in sync with the available options.
     afterRenderEffect(() => {
       const items = inputs.items();
       const value = untracked(() => this.value());
 
       if (items && value.some(v => !items.some(i => i.value() === v))) {
         this.value.set(value.filter(v => items.some(i => i.value() === v)));
-        this._popup?.combobox?.pattern?.inputs.value.set(this.value()[0]);
       }
     });
   }

src/cdk-experimental/listbox/listbox.ts

@@ -183,7 +183,6 @@ export class CdkTree<V> {
 
       if (items && value.some(v => !items.some(i => i.value() === v))) {
         this.value.set(value.filter(v => items.some(i => i.value() === v)));
-        this._popup?.combobox?.pattern?.inputs.value.set(this.value()[0]);
       }
     });
   }