feat(cdk-experimental/combobox): glue together combobox and listbox with DI instead of a panel directive (#24637)

* feat(cdk-experimental/combobox): glue together combobox and listbox with DI instead of a panel directive

* fixup! feat(cdk-experimental/combobox): glue together combobox and listbox with DI instead of a panel directive

* fixup! feat(cdk-experimental/combobox): glue together combobox and listbox with DI instead of a panel directive

Author: mmalerba

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

@@ -9,10 +9,9 @@
 import {NgModule} from '@angular/core';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {CdkCombobox} from './combobox';
-import {CdkComboboxPanel} from './combobox-panel';
 import {CdkComboboxPopup} from './combobox-popup';
 
-const EXPORTED_DECLARATIONS = [CdkCombobox, CdkComboboxPanel, CdkComboboxPopup];
+const EXPORTED_DECLARATIONS = [CdkCombobox, CdkComboboxPopup];
 @NgModule({
   imports: [OverlayModule],
   exports: EXPORTED_DECLARATIONS,

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

@@ -6,18 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  Directive,
-  ElementRef,
-  Inject,
-  InjectionToken,
-  Input,
-  OnInit,
-  Optional,
-} from '@angular/core';
-import {AriaHasPopupValue, CdkComboboxPanel} from './combobox-panel';
-
-export const PANEL = new InjectionToken<CdkComboboxPanel>('CdkComboboxPanel');
+import {Directive, ElementRef, Inject, Input, OnInit} from '@angular/core';
+import {AriaHasPopupValue, CDK_COMBOBOX, CdkCombobox} from './combobox';
 
 let nextId = 0;
 
@@ -53,23 +43,17 @@ export class CdkComboboxPopup<T = unknown> implements OnInit {
 
   @Input() id = `cdk-combobox-popup-${nextId++}`;
 
-  @Input('parentPanel') private readonly _explicitPanel: CdkComboboxPanel;
-
   constructor(
     private readonly _elementRef: ElementRef<HTMLElement>,
-    @Optional() @Inject(PANEL) readonly _parentPanel?: CdkComboboxPanel<T>,
+    @Inject(CDK_COMBOBOX) private readonly _combobox: CdkCombobox,
   ) {}
 
   ngOnInit() {
     this.registerWithPanel();
   }
 
   registerWithPanel(): void {
-    if (this._parentPanel === null || this._parentPanel === undefined) {
-      this._explicitPanel._registerContent(this.id, this._role);
-    } else {
-      this._parentPanel._registerContent(this.id, this._role);
-    }
+    this._combobox._registerContent(this.id, this._role);
   }
 
   focusFirstElement() {

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

@@ -1,37 +1,23 @@
-import {
-  Component,
-  DebugElement,
-  Directive,
-  ElementRef,
-  Inject,
-  InjectionToken,
-  Input,
-  OnInit,
-  Optional,
-  ViewChild,
-} from '@angular/core';
+import {Component, DebugElement, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {CdkComboboxModule} from './combobox-module';
 import {CdkCombobox} from './combobox';
 import {dispatchKeyboardEvent, dispatchMouseEvent} from '../../cdk/testing/private';
-import {
-  AriaHasPopupValue,
-  CdkComboboxPanel,
-} from '@angular/cdk-experimental/combobox/combobox-panel';
 import {DOWN_ARROW, ESCAPE} from '@angular/cdk/keycodes';
+import {CdkComboboxPopup} from '@angular/cdk-experimental/combobox/combobox-popup';
 
 describe('Combobox', () => {
   describe('with a basic toggle trigger', () => {
     let fixture: ComponentFixture<ComboboxToggle>;
     let testComponent: ComboboxToggle;
 
     let combobox: DebugElement;
-    let comboboxInstance: CdkCombobox<unknown>;
+    let comboboxInstance: CdkCombobox;
     let comboboxElement: HTMLElement;
 
     let dialog: DebugElement;
-    let dialogInstance: FakeDialogContent<unknown>;
+    let dialogInstance: CdkComboboxPopup;
     let dialogElement: HTMLElement;
 
     let applyButton: DebugElement;
@@ -41,7 +27,7 @@ describe('Combobox', () => {
       waitForAsync(() => {
         TestBed.configureTestingModule({
           imports: [CdkComboboxModule],
-          declarations: [ComboboxToggle, FakeDialogContent],
+          declarations: [ComboboxToggle],
         }).compileComponents();
       }),
     );
@@ -53,7 +39,7 @@ describe('Combobox', () => {
       testComponent = fixture.debugElement.componentInstance;
 
       combobox = fixture.debugElement.query(By.directive(CdkCombobox));
-      comboboxInstance = combobox.injector.get<CdkCombobox<unknown>>(CdkCombobox);
+      comboboxInstance = combobox.injector.get<CdkCombobox>(CdkCombobox);
       comboboxElement = combobox.nativeElement;
     });
 
@@ -77,10 +63,10 @@ describe('Combobox', () => {
       dispatchMouseEvent(comboboxElement, 'click');
       fixture.detectChanges();
 
-      dialog = fixture.debugElement.query(By.directive(FakeDialogContent));
-      dialogInstance = dialog.injector.get<FakeDialogContent<unknown>>(FakeDialogContent);
+      dialog = fixture.debugElement.query(By.directive(CdkComboboxPopup));
+      dialogInstance = dialog.injector.get<CdkComboboxPopup>(CdkComboboxPopup);
 
-      expect(comboboxElement.getAttribute('aria-owns')).toBe(dialogInstance.dialogId);
+      expect(comboboxElement.getAttribute('aria-owns')).toBe(dialogInstance.id);
       expect(comboboxElement.getAttribute('aria-haspopup')).toBe('dialog');
     });
 
@@ -110,7 +96,7 @@ describe('Combobox', () => {
 
       expect(comboboxInstance.isOpen()).toBeTrue();
 
-      dialog = fixture.debugElement.query(By.directive(FakeDialogContent));
+      dialog = fixture.debugElement.query(By.directive(CdkComboboxPopup));
       dialogElement = dialog.nativeElement;
 
       expect(document.activeElement).toBe(dialogElement);
@@ -201,13 +187,13 @@ describe('Combobox', () => {
     let testComponent: ComboboxToggle;
 
     let combobox: DebugElement;
-    let comboboxInstance: CdkCombobox<unknown>;
+    let comboboxInstance: CdkCombobox;
 
     beforeEach(
       waitForAsync(() => {
         TestBed.configureTestingModule({
           imports: [CdkComboboxModule],
-          declarations: [ComboboxToggle, FakeDialogContent],
+          declarations: [ComboboxToggle],
         }).compileComponents();
       }),
     );
@@ -219,7 +205,7 @@ describe('Combobox', () => {
       testComponent = fixture.debugElement.componentInstance;
 
       combobox = fixture.debugElement.query(By.directive(CdkCombobox));
-      comboboxInstance = combobox.injector.get<CdkCombobox<unknown>>(CdkCombobox);
+      comboboxInstance = combobox.injector.get<CdkCombobox>(CdkCombobox);
     });
 
     it('should coerce single string into open action', () => {
@@ -273,14 +259,14 @@ describe('Combobox', () => {
     let testComponent: ComboboxToggle;
 
     let combobox: DebugElement;
-    let comboboxInstance: CdkCombobox<unknown>;
+    let comboboxInstance: CdkCombobox;
     let comboboxElement: HTMLElement;
 
     beforeEach(
       waitForAsync(() => {
         TestBed.configureTestingModule({
           imports: [CdkComboboxModule],
-          declarations: [ComboboxToggle, FakeDialogContent],
+          declarations: [ComboboxToggle],
         }).compileComponents();
       }),
     );
@@ -292,7 +278,7 @@ describe('Combobox', () => {
       testComponent = fixture.debugElement.componentInstance;
 
       combobox = fixture.debugElement.query(By.directive(CdkCombobox));
-      comboboxInstance = combobox.injector.get<CdkCombobox<unknown>>(CdkCombobox);
+      comboboxInstance = combobox.injector.get<CdkCombobox>(CdkCombobox);
       comboboxElement = combobox.nativeElement;
     });
 
@@ -392,17 +378,17 @@ describe('Combobox', () => {
 
 @Component({
   template: `
-  <button cdkCombobox #toggleCombobox class="example-combobox"
+  <button cdkCombobox #toggleCombobox="cdkCombobox" class="example-combobox"
           [cdkComboboxTriggerFor]="panel"
           [openActions]="actions">
     No Value
   </button>
   <div id="other-content"></div>
 
-  <ng-template cdkComboboxPanel #panel="cdkComboboxPanel">
-    <div dialogContent #dialog="dialogContent" [parentPanel]="panel">
+  <ng-template #panel>
+    <div #dialog cdkComboboxPopup>
       <input #input>
-      <button id="applyButton" (click)="panel.closePanel(input.value)">Apply</button>
+      <button id="applyButton" (click)="toggleCombobox.updateAndClose(input.value)">Apply</button>
     </div>
   </ng-template>`,
 })
@@ -411,37 +397,3 @@ class ComboboxToggle {
 
   actions: string = 'click';
 }
-
-export const PANEL = new InjectionToken<CdkComboboxPanel>('CdkComboboxPanel');
-
-let id = 0;
-
-@Directive({
-  selector: '[dialogContent]',
-  exportAs: 'dialogContent',
-  host: {
-    '[attr.role]': 'role',
-    '[id]': 'dialogId',
-    'tabIndex': '-1',
-  },
-})
-export class FakeDialogContent<V> implements OnInit {
-  dialogId = `dialog-${id++}`;
-  role = 'dialog';
-
-  @Input('parentPanel') private readonly _explicitPanel: CdkComboboxPanel;
-
-  constructor(@Optional() @Inject(PANEL) readonly _parentPanel?: CdkComboboxPanel<V>) {}
-
-  ngOnInit() {
-    this.registerWithPanel();
-  }
-
-  registerWithPanel(): void {
-    if (this._parentPanel === null || this._parentPanel === undefined) {
-      this._explicitPanel._registerContent(this.dialogId, this.role as AriaHasPopupValue);
-    } else {
-      this._parentPanel._registerContent(this.dialogId, this.role as AriaHasPopupValue);
-    }
-  }
-}