From 9d96266da0cdc0100530049dc84da5044687b70c Mon Sep 17 00:00:00 2001 From: niels Date: Thu, 11 Jun 2020 13:08:07 -0400 Subject: [PATCH 01/27] build: Added required files to listbox directory. --- src/cdk-experimental/listbox/listbox-directives.spec.ts | 0 src/cdk-experimental/listbox/listbox-directives.ts | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/cdk-experimental/listbox/listbox-directives.spec.ts create mode 100644 src/cdk-experimental/listbox/listbox-directives.ts diff --git a/src/cdk-experimental/listbox/listbox-directives.spec.ts b/src/cdk-experimental/listbox/listbox-directives.spec.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/cdk-experimental/listbox/listbox-directives.ts b/src/cdk-experimental/listbox/listbox-directives.ts new file mode 100644 index 000000000000..e69de29bb2d1 From 381a91d31caf0b1a9b32ac310a9a3b8b505e9885 Mon Sep 17 00:00:00 2001 From: niels Date: Thu, 11 Jun 2020 15:36:56 -0400 Subject: [PATCH 02/27] build: added listbox option directive and renamed listbox directive files. --- .../{listbox-directives.spec.ts => listbox-directive.spec.ts} | 0 .../listbox/{listbox-directives.ts => listbox-directive.ts} | 0 src/cdk-experimental/listbox/listbox-option-directive.spec.ts | 0 src/cdk-experimental/listbox/listbox-option-directive.ts | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename src/cdk-experimental/listbox/{listbox-directives.spec.ts => listbox-directive.spec.ts} (100%) rename src/cdk-experimental/listbox/{listbox-directives.ts => listbox-directive.ts} (100%) create mode 100644 src/cdk-experimental/listbox/listbox-option-directive.spec.ts create mode 100644 src/cdk-experimental/listbox/listbox-option-directive.ts diff --git a/src/cdk-experimental/listbox/listbox-directives.spec.ts b/src/cdk-experimental/listbox/listbox-directive.spec.ts similarity index 100% rename from src/cdk-experimental/listbox/listbox-directives.spec.ts rename to src/cdk-experimental/listbox/listbox-directive.spec.ts diff --git a/src/cdk-experimental/listbox/listbox-directives.ts b/src/cdk-experimental/listbox/listbox-directive.ts similarity index 100% rename from src/cdk-experimental/listbox/listbox-directives.ts rename to src/cdk-experimental/listbox/listbox-directive.ts diff --git a/src/cdk-experimental/listbox/listbox-option-directive.spec.ts b/src/cdk-experimental/listbox/listbox-option-directive.spec.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/cdk-experimental/listbox/listbox-option-directive.ts b/src/cdk-experimental/listbox/listbox-option-directive.ts new file mode 100644 index 000000000000..e69de29bb2d1 From 4a2fc63f95e957997021993e45f9236e8f174831 Mon Sep 17 00:00:00 2001 From: niels Date: Thu, 11 Jun 2020 13:08:07 -0400 Subject: [PATCH 03/27] build: Added required files to listbox directory. --- src/cdk-experimental/listbox/listbox-directives.spec.ts | 0 src/cdk-experimental/listbox/listbox-directives.ts | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/cdk-experimental/listbox/listbox-directives.spec.ts create mode 100644 src/cdk-experimental/listbox/listbox-directives.ts diff --git a/src/cdk-experimental/listbox/listbox-directives.spec.ts b/src/cdk-experimental/listbox/listbox-directives.spec.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/cdk-experimental/listbox/listbox-directives.ts b/src/cdk-experimental/listbox/listbox-directives.ts new file mode 100644 index 000000000000..e69de29bb2d1 From b3f282b1f2783c12535fa7fb4d6876369269cb40 Mon Sep 17 00:00:00 2001 From: niels Date: Thu, 11 Jun 2020 15:36:56 -0400 Subject: [PATCH 04/27] build: added listbox option directive and renamed listbox directive files. --- src/cdk-experimental/listbox/listbox-directives.spec.ts | 0 src/cdk-experimental/listbox/listbox-directives.ts | 0 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/cdk-experimental/listbox/listbox-directives.spec.ts delete mode 100644 src/cdk-experimental/listbox/listbox-directives.ts diff --git a/src/cdk-experimental/listbox/listbox-directives.spec.ts b/src/cdk-experimental/listbox/listbox-directives.spec.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/src/cdk-experimental/listbox/listbox-directives.ts b/src/cdk-experimental/listbox/listbox-directives.ts deleted file mode 100644 index e69de29bb2d1..000000000000 From a5b70043c6e8e32c4fb32360f4ea2c3e9a2455bf Mon Sep 17 00:00:00 2001 From: niels Date: Thu, 11 Jun 2020 13:08:07 -0400 Subject: [PATCH 05/27] build: Added required files to listbox directory. --- src/cdk-experimental/listbox/listbox-directives.spec.ts | 0 src/cdk-experimental/listbox/listbox-directives.ts | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/cdk-experimental/listbox/listbox-directives.spec.ts create mode 100644 src/cdk-experimental/listbox/listbox-directives.ts diff --git a/src/cdk-experimental/listbox/listbox-directives.spec.ts b/src/cdk-experimental/listbox/listbox-directives.spec.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/cdk-experimental/listbox/listbox-directives.ts b/src/cdk-experimental/listbox/listbox-directives.ts new file mode 100644 index 000000000000..e69de29bb2d1 From 0ae5554185fb502013612a86f1132a631854e471 Mon Sep 17 00:00:00 2001 From: niels Date: Thu, 11 Jun 2020 15:36:56 -0400 Subject: [PATCH 06/27] build: added listbox option directive and renamed listbox directive files. --- src/cdk-experimental/listbox/listbox-directives.spec.ts | 0 src/cdk-experimental/listbox/listbox-directives.ts | 0 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/cdk-experimental/listbox/listbox-directives.spec.ts delete mode 100644 src/cdk-experimental/listbox/listbox-directives.ts diff --git a/src/cdk-experimental/listbox/listbox-directives.spec.ts b/src/cdk-experimental/listbox/listbox-directives.spec.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/src/cdk-experimental/listbox/listbox-directives.ts b/src/cdk-experimental/listbox/listbox-directives.ts deleted file mode 100644 index e69de29bb2d1..000000000000 From e13d3285039c10238421a940c3d67f5d7137879e Mon Sep 17 00:00:00 2001 From: niels Date: Thu, 11 Jun 2020 13:08:07 -0400 Subject: [PATCH 07/27] build: Added required files to listbox directory. --- src/cdk-experimental/listbox/listbox-directives.spec.ts | 0 src/cdk-experimental/listbox/listbox-directives.ts | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/cdk-experimental/listbox/listbox-directives.spec.ts create mode 100644 src/cdk-experimental/listbox/listbox-directives.ts diff --git a/src/cdk-experimental/listbox/listbox-directives.spec.ts b/src/cdk-experimental/listbox/listbox-directives.spec.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/cdk-experimental/listbox/listbox-directives.ts b/src/cdk-experimental/listbox/listbox-directives.ts new file mode 100644 index 000000000000..e69de29bb2d1 From c5abfd5a8996c664edc6d4f46ca3fd114cd82961 Mon Sep 17 00:00:00 2001 From: niels Date: Thu, 11 Jun 2020 15:36:56 -0400 Subject: [PATCH 08/27] build: added listbox option directive and renamed listbox directive files. --- src/cdk-experimental/listbox/listbox-directives.spec.ts | 0 src/cdk-experimental/listbox/listbox-directives.ts | 0 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/cdk-experimental/listbox/listbox-directives.spec.ts delete mode 100644 src/cdk-experimental/listbox/listbox-directives.ts diff --git a/src/cdk-experimental/listbox/listbox-directives.spec.ts b/src/cdk-experimental/listbox/listbox-directives.spec.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/src/cdk-experimental/listbox/listbox-directives.ts b/src/cdk-experimental/listbox/listbox-directives.ts deleted file mode 100644 index e69de29bb2d1..000000000000 From 5d0868cf19baff86e042a03a53d8f57726d570d0 Mon Sep 17 00:00:00 2001 From: niels Date: Wed, 15 Jul 2020 13:06:37 -0400 Subject: [PATCH 09/27] feat(dev-app/listbox): added cdk listbox example to the dev-app. --- src/dev-app/BUILD.bazel | 1 + 1 file changed, 1 insertion(+) diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel index ebf2ea97b04c..dee886f5c418 100644 --- a/src/dev-app/BUILD.bazel +++ b/src/dev-app/BUILD.bazel @@ -26,6 +26,7 @@ ng_module( "//src/dev-app/cdk-experimental-combobox", "//src/dev-app/cdk-experimental-listbox", "//src/dev-app/cdk-experimental-menu", + "//src/dev-app/cdk-experimental-listbox", "//src/dev-app/checkbox", "//src/dev-app/chips", "//src/dev-app/clipboard", From 0610f756ebb1b46f5997a43253b0fcb31ee18450 Mon Sep 17 00:00:00 2001 From: niels Date: Wed, 22 Jul 2020 10:56:23 -0400 Subject: [PATCH 10/27] fix(listbox): removed duplicate dep in dev-app build file. --- src/dev-app/BUILD.bazel | 1 - 1 file changed, 1 deletion(-) diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel index dee886f5c418..ebf2ea97b04c 100644 --- a/src/dev-app/BUILD.bazel +++ b/src/dev-app/BUILD.bazel @@ -26,7 +26,6 @@ ng_module( "//src/dev-app/cdk-experimental-combobox", "//src/dev-app/cdk-experimental-listbox", "//src/dev-app/cdk-experimental-menu", - "//src/dev-app/cdk-experimental-listbox", "//src/dev-app/checkbox", "//src/dev-app/chips", "//src/dev-app/clipboard", From 6e8893ebeb69af8817e6f0db4adbde5b17245f9b Mon Sep 17 00:00:00 2001 From: niels Date: Tue, 4 Aug 2020 11:17:12 -0400 Subject: [PATCH 11/27] fix(listbox): deleted unused files. --- src/cdk-experimental/listbox/listbox-directive.spec.ts | 0 src/cdk-experimental/listbox/listbox-directive.ts | 0 src/cdk-experimental/listbox/listbox-option-directive.spec.ts | 0 src/cdk-experimental/listbox/listbox-option-directive.ts | 0 4 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/cdk-experimental/listbox/listbox-directive.spec.ts delete mode 100644 src/cdk-experimental/listbox/listbox-directive.ts delete mode 100644 src/cdk-experimental/listbox/listbox-option-directive.spec.ts delete mode 100644 src/cdk-experimental/listbox/listbox-option-directive.ts diff --git a/src/cdk-experimental/listbox/listbox-directive.spec.ts b/src/cdk-experimental/listbox/listbox-directive.spec.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/src/cdk-experimental/listbox/listbox-directive.ts b/src/cdk-experimental/listbox/listbox-directive.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/src/cdk-experimental/listbox/listbox-option-directive.spec.ts b/src/cdk-experimental/listbox/listbox-option-directive.spec.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/src/cdk-experimental/listbox/listbox-option-directive.ts b/src/cdk-experimental/listbox/listbox-option-directive.ts deleted file mode 100644 index e69de29bb2d1..000000000000 From 5541e6e34b47ddfc9402951982f58a4b1f8f677d Mon Sep 17 00:00:00 2001 From: niels Date: Mon, 10 Aug 2020 17:46:13 -0400 Subject: [PATCH 12/27] refactor(combobox): changed names and made coerceOpenActionProperty simpler for this PR. --- src/cdk-experimental/combobox/combobox.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cdk-experimental/combobox/combobox.spec.ts b/src/cdk-experimental/combobox/combobox.spec.ts index cba1ab7c1562..72bac7029a3d 100644 --- a/src/cdk-experimental/combobox/combobox.spec.ts +++ b/src/cdk-experimental/combobox/combobox.spec.ts @@ -373,7 +373,7 @@ describe('Combobox', () => { @Component({ template: ` - + + + + + ` +}) +class ListboxInsideCombobox { + changedOption: CdkOption; + isDisabled: boolean = false; + isMultiselectable: boolean = false; + @ViewChild(CdkListbox) listbox: CdkListbox; + + onSelectionChange(event: ListboxSelectionChangeEvent) { + this.changedOption = event.option; + } +} From cb3b93c160397ea2225659d2f089a12a5215855a Mon Sep 17 00:00:00 2001 From: niels Date: Wed, 12 Aug 2020 17:47:16 -0400 Subject: [PATCH 17/27] test(listbox): added more tests for putting a listbox inside a combobox. --- src/cdk-experimental/listbox/listbox.spec.ts | 96 +++++++++++++++++++- 1 file changed, 93 insertions(+), 3 deletions(-) diff --git a/src/cdk-experimental/listbox/listbox.spec.ts b/src/cdk-experimental/listbox/listbox.spec.ts index 4623414a08c2..56bf80d0e58d 100644 --- a/src/cdk-experimental/listbox/listbox.spec.ts +++ b/src/cdk-experimental/listbox/listbox.spec.ts @@ -770,7 +770,8 @@ describe('CdkOption and CdkListbox', () => { let testComponent: ListboxInsideCombobox; let listbox: DebugElement; - let listboxInstance: CdkListbox; + let listboxInstance: CdkListbox; + let listboxElement: HTMLElement; let combobox: DebugElement; let comboboxInstance: CdkCombobox; @@ -799,7 +800,7 @@ describe('CdkOption and CdkListbox', () => { }); - fit('should update combobox value on selection of an option', () => { + it('should update combobox value on selection of an option', () => { expect(comboboxInstance.value).toBeUndefined(); expect(comboboxInstance.isOpen()).toBeFalse(); @@ -807,7 +808,7 @@ describe('CdkOption and CdkListbox', () => { fixture.detectChanges(); listbox = fixture.debugElement.query(By.directive(CdkListbox)); - listboxInstance = listbox.injector.get>(CdkListbox); + listboxInstance = listbox.injector.get>(CdkListbox); options = fixture.debugElement.queryAll(By.directive(CdkOption)); optionInstances = options.map(o => o.injector.get(CdkOption)); @@ -821,6 +822,95 @@ describe('CdkOption and CdkListbox', () => { expect(comboboxInstance.isOpen()).toBeFalse(); expect(comboboxInstance.value).toBe('purple'); }); + + it('should update combobox value on selection via keyboard', () => { + expect(comboboxInstance.value).toBeUndefined(); + expect(comboboxInstance.isOpen()).toBeFalse(); + + dispatchMouseEvent(comboboxElement, 'click'); + fixture.detectChanges(); + + listbox = fixture.debugElement.query(By.directive(CdkListbox)); + listboxInstance = listbox.injector.get>(CdkListbox); + listboxElement = listbox.nativeElement; + + options = fixture.debugElement.queryAll(By.directive(CdkOption)); + optionInstances = options.map(o => o.injector.get(CdkOption)); + optionElements = options.map(o => o.nativeElement); + + expect(comboboxInstance.isOpen()).toBeTrue(); + + listboxInstance.setActiveOption(optionInstances[1]); + dispatchKeyboardEvent(listboxElement, 'keydown', SPACE); + fixture.detectChanges(); + + expect(comboboxInstance.isOpen()).toBeFalse(); + expect(comboboxInstance.value).toBe('solar'); + }); + + it('should not update combobox if listbox is in multiple mode', () => { + expect(comboboxInstance.value).toBeUndefined(); + expect(comboboxInstance.isOpen()).toBeFalse(); + + dispatchMouseEvent(comboboxElement, 'click'); + fixture.detectChanges(); + + listbox = fixture.debugElement.query(By.directive(CdkListbox)); + listboxInstance = listbox.injector.get>(CdkListbox); + listboxElement = listbox.nativeElement; + + testComponent.isMultiselectable = true; + fixture.detectChanges(); + + options = fixture.debugElement.queryAll(By.directive(CdkOption)); + optionInstances = options.map(o => o.injector.get(CdkOption)); + optionElements = options.map(o => o.nativeElement); + + expect(comboboxInstance.isOpen()).toBeTrue(); + + listboxInstance.setActiveOption(optionInstances[1]); + dispatchKeyboardEvent(listboxElement, 'keydown', SPACE); + fixture.detectChanges(); + + expect(comboboxInstance.isOpen()).toBeTrue(); + expect(comboboxInstance.value).toBeUndefined(); + }); + + it('should not update combobox if the listbox or option is disabled', () => { + expect(comboboxInstance.value).toBeUndefined(); + expect(comboboxInstance.isOpen()).toBeFalse(); + + dispatchMouseEvent(comboboxElement, 'click'); + fixture.detectChanges(); + + listbox = fixture.debugElement.query(By.directive(CdkListbox)); + listboxInstance = listbox.injector.get>(CdkListbox); + listboxElement = listbox.nativeElement; + + options = fixture.debugElement.queryAll(By.directive(CdkOption)); + optionInstances = options.map(o => o.injector.get(CdkOption)); + optionElements = options.map(o => o.nativeElement); + + expect(comboboxInstance.isOpen()).toBeTrue(); + testComponent.isDisabled = true; + fixture.detectChanges(); + + dispatchMouseEvent(optionElements[0], 'click'); + fixture.detectChanges(); + + expect(comboboxInstance.isOpen()).toBeTrue(); + expect(comboboxInstance.value).toBeUndefined(); + + testComponent.isDisabled = false; + optionInstances[0].disabled = true; + fixture.detectChanges(); + + dispatchMouseEvent(optionElements[0], 'click'); + fixture.detectChanges(); + + expect(comboboxInstance.isOpen()).toBeTrue(); + expect(comboboxInstance.value).toBeUndefined(); + }); }); }); From e3a461dbabc60601faab80eb0a348aa6bb488d26 Mon Sep 17 00:00:00 2001 From: niels Date: Wed, 12 Aug 2020 23:10:47 -0400 Subject: [PATCH 18/27] refactor(listbox): used lightweight injection token for CdkComboboxPanel inside listbox. --- src/cdk-experimental/listbox/listbox.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/cdk-experimental/listbox/listbox.ts b/src/cdk-experimental/listbox/listbox.ts index d6abba85940a..e13f55d65c6a 100644 --- a/src/cdk-experimental/listbox/listbox.ts +++ b/src/cdk-experimental/listbox/listbox.ts @@ -11,7 +11,7 @@ import { ContentChildren, Directive, ElementRef, EventEmitter, forwardRef, - Inject, + Inject, InjectionToken, Input, OnDestroy, OnInit, Optional, Output, QueryList } from '@angular/core'; @@ -33,6 +33,8 @@ export const CDK_LISTBOX_VALUE_ACCESSOR: any = { multi: true }; +export const PANEL = new InjectionToken('CdkComboboxPanel'); + @Directive({ selector: '[cdkOption]', exportAs: 'cdkOption', @@ -271,7 +273,7 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr @Input('parentPanel') private readonly _explicitPanel: CdkComboboxPanel; constructor( - @Optional() readonly _parentPanel?: CdkComboboxPanel, + @Optional() @Inject(PANEL) readonly _parentPanel?: CdkComboboxPanel, ) { } ngOnInit() { From a2dd79aaf32906b990f5a49079e024da6c71371f Mon Sep 17 00:00:00 2001 From: niels Date: Thu, 13 Aug 2020 11:38:21 -0400 Subject: [PATCH 19/27] fix(combobox): reformatted build file. --- src/cdk-experimental/listbox/BUILD.bazel | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/cdk-experimental/listbox/BUILD.bazel b/src/cdk-experimental/listbox/BUILD.bazel index 2cb3fcb6411f..7de4cdfa79e0 100644 --- a/src/cdk-experimental/listbox/BUILD.bazel +++ b/src/cdk-experimental/listbox/BUILD.bazel @@ -10,10 +10,10 @@ ng_module( ), module_name = "@angular/cdk-experimental/listbox", deps = [ + "//src/cdk-experimental/combobox", "//src/cdk/a11y", "//src/cdk/collections", "//src/cdk/keycodes", - "//src/cdk-experimental/combobox", "@npm//@angular/forms", ], ) @@ -26,9 +26,9 @@ ng_test_library( ), deps = [ ":listbox", + "//src/cdk-experimental/combobox", "//src/cdk/keycodes", "//src/cdk/testing/private", - "//src/cdk-experimental/combobox", "@npm//@angular/forms", "@npm//@angular/platform-browser", ], From 8221c125bf81b60a1277294235d5acfad106741c Mon Sep 17 00:00:00 2001 From: niels Date: Thu, 13 Aug 2020 12:50:31 -0400 Subject: [PATCH 20/27] fix(listbox): fixed an issue where the order of emitting change events messed up the tests. --- src/cdk-experimental/listbox/listbox.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cdk-experimental/listbox/listbox.ts b/src/cdk-experimental/listbox/listbox.ts index e13f55d65c6a..b671c537ac86 100644 --- a/src/cdk-experimental/listbox/listbox.ts +++ b/src/cdk-experimental/listbox/listbox.ts @@ -286,9 +286,9 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr this.registerWithPanel(); this.optionSelectionChanges.subscribe(event => { + this._emitChangeEvent(event.source); this._updateSelectionModel(event.source); this.setActiveOption(event.source); - this._emitChangeEvent(event.source); this._updatePanel(event.source); }); } From 5009b9f19057053dbab3f73e931a0b130bb1e1a2 Mon Sep 17 00:00:00 2001 From: niels Date: Fri, 14 Aug 2020 12:26:42 -0400 Subject: [PATCH 21/27] feat(listbox): added additional focus management logic and a getSelectedValues function. --- src/cdk-experimental/listbox/listbox.spec.ts | 5 +++++ src/cdk-experimental/listbox/listbox.ts | 15 +++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/src/cdk-experimental/listbox/listbox.spec.ts b/src/cdk-experimental/listbox/listbox.spec.ts index 56bf80d0e58d..50d04c98e918 100644 --- a/src/cdk-experimental/listbox/listbox.spec.ts +++ b/src/cdk-experimental/listbox/listbox.spec.ts @@ -659,6 +659,11 @@ describe('CdkOption and CdkListbox', () => { listboxInstance.writeValue(['arc', 'stasis']); fixture.detectChanges(); + const selectedValues = listboxInstance.getSelectedValues(); + expect(selectedValues.length).toBe(2); + expect(selectedValues[0]).toBe('arc'); + expect(selectedValues[1]).toBe('stasis'); + expect(optionElements[0].hasAttribute('aria-selected')).toBeFalse(); expect(optionElements[1].hasAttribute('aria-selected')).toBeFalse(); diff --git a/src/cdk-experimental/listbox/listbox.ts b/src/cdk-experimental/listbox/listbox.ts index b671c537ac86..d44a6f2e1155 100644 --- a/src/cdk-experimental/listbox/listbox.ts +++ b/src/cdk-experimental/listbox/listbox.ts @@ -176,6 +176,10 @@ export class CdkOption implements ListKeyManagerOption, Highlightab } } + getElementRef() { + return this._elementRef; + } + /** Sets the active property to true to enable the active css class. */ setActiveStyles() { this._active = true; @@ -273,6 +277,7 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr @Input('parentPanel') private readonly _explicitPanel: CdkComboboxPanel; constructor( + private readonly _elementRef: ElementRef, @Optional() @Inject(PANEL) readonly _parentPanel?: CdkComboboxPanel, ) { } @@ -421,6 +426,10 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr if (!this.useActiveDescendant) { this._activeOption.focus(); + } else { + if (document.activeElement === this._activeOption.getElementRef().nativeElement) { + this._elementRef.nativeElement.focus(); + } } } @@ -458,6 +467,7 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr /** Updates the key manager's active item to the given option. */ setActiveOption(option: CdkOption) { this._listKeyManager.updateActiveItem(option); + this._updateActiveOption(); } /** @@ -488,6 +498,11 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr this.disabled = isDisabled; } + /** Returns the values of the currently selected options. */ + getSelectedValues(): T[] { + return this._options.filter(option => option.selected).map(option => option.value); + } + /** Selects an option that has the corresponding given value. */ private _setSelectionByValue(values: T | T[]) { for (const option of this._options.toArray()) { From 4c15d53dca726d1189efe7b66fa2548c8ff721d6 Mon Sep 17 00:00:00 2001 From: niels Date: Fri, 14 Aug 2020 13:15:16 -0400 Subject: [PATCH 22/27] lint(combobox): removed trailing whitespace. --- src/cdk-experimental/combobox/combobox.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/cdk-experimental/combobox/combobox.spec.ts b/src/cdk-experimental/combobox/combobox.spec.ts index cba1ab7c1562..e2604f0f68fa 100644 --- a/src/cdk-experimental/combobox/combobox.spec.ts +++ b/src/cdk-experimental/combobox/combobox.spec.ts @@ -379,6 +379,7 @@ describe('Combobox', () => { No Value
+
From 48d05c360c9bc7672e308468b6fb9b0eb6d5438b Mon Sep 17 00:00:00 2001 From: niels Date: Fri, 14 Aug 2020 13:50:04 -0400 Subject: [PATCH 23/27] refactor(listbox): realized disabled listbox still closes combobox popup which needs to be fixed, and test is temporarily removed. --- src/cdk-experimental/listbox/listbox.spec.ts | 38 +------------------- 1 file changed, 1 insertion(+), 37 deletions(-) diff --git a/src/cdk-experimental/listbox/listbox.spec.ts b/src/cdk-experimental/listbox/listbox.spec.ts index 50d04c98e918..36747583404b 100644 --- a/src/cdk-experimental/listbox/listbox.spec.ts +++ b/src/cdk-experimental/listbox/listbox.spec.ts @@ -880,42 +880,6 @@ describe('CdkOption and CdkListbox', () => { expect(comboboxInstance.isOpen()).toBeTrue(); expect(comboboxInstance.value).toBeUndefined(); }); - - it('should not update combobox if the listbox or option is disabled', () => { - expect(comboboxInstance.value).toBeUndefined(); - expect(comboboxInstance.isOpen()).toBeFalse(); - - dispatchMouseEvent(comboboxElement, 'click'); - fixture.detectChanges(); - - listbox = fixture.debugElement.query(By.directive(CdkListbox)); - listboxInstance = listbox.injector.get>(CdkListbox); - listboxElement = listbox.nativeElement; - - options = fixture.debugElement.queryAll(By.directive(CdkOption)); - optionInstances = options.map(o => o.injector.get(CdkOption)); - optionElements = options.map(o => o.nativeElement); - - expect(comboboxInstance.isOpen()).toBeTrue(); - testComponent.isDisabled = true; - fixture.detectChanges(); - - dispatchMouseEvent(optionElements[0], 'click'); - fixture.detectChanges(); - - expect(comboboxInstance.isOpen()).toBeTrue(); - expect(comboboxInstance.value).toBeUndefined(); - - testComponent.isDisabled = false; - optionInstances[0].disabled = true; - fixture.detectChanges(); - - dispatchMouseEvent(optionElements[0], 'click'); - fixture.detectChanges(); - - expect(comboboxInstance.isOpen()).toBeTrue(); - expect(comboboxInstance.value).toBeUndefined(); - }); }); }); @@ -1022,7 +986,7 @@ class ListboxControlValueAccessor { template: ` From 744d23a50edad6008febd3f8d3d35bfaa1caf9a6 Mon Sep 17 00:00:00 2001 From: niels Date: Fri, 14 Aug 2020 13:56:14 -0400 Subject: [PATCH 24/27] fix(listbox): fixed lint errors. --- src/cdk-experimental/listbox/listbox.spec.ts | 2 +- src/cdk-experimental/listbox/listbox.ts | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/cdk-experimental/listbox/listbox.spec.ts b/src/cdk-experimental/listbox/listbox.spec.ts index 36747583404b..1cc657054cc1 100644 --- a/src/cdk-experimental/listbox/listbox.spec.ts +++ b/src/cdk-experimental/listbox/listbox.spec.ts @@ -16,7 +16,7 @@ import { } from '@angular/cdk/testing/private'; import {A, DOWN_ARROW, END, HOME, SPACE} from '@angular/cdk/keycodes'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {CdkCombobox, CdkComboboxModule} from "@angular/cdk-experimental/combobox"; +import {CdkCombobox, CdkComboboxModule} from '@angular/cdk-experimental/combobox'; describe('CdkOption and CdkListbox', () => { diff --git a/src/cdk-experimental/listbox/listbox.ts b/src/cdk-experimental/listbox/listbox.ts index d44a6f2e1155..c30cfacda0af 100644 --- a/src/cdk-experimental/listbox/listbox.ts +++ b/src/cdk-experimental/listbox/listbox.ts @@ -22,7 +22,7 @@ import {SelectionChange, SelectionModel} from '@angular/cdk/collections'; import {defer, merge, Observable, Subject} from 'rxjs'; import {startWith, switchMap, takeUntil} from 'rxjs/operators'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; -import {CdkComboboxPanel} from "@angular/cdk-experimental/combobox"; +import {CdkComboboxPanel} from '@angular/cdk-experimental/combobox'; let nextId = 0; let listboxId = 0; @@ -288,7 +288,7 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr ngAfterContentInit() { this._initKeyManager(); this._initSelectionModel(); - this.registerWithPanel(); + this._registerWithPanel(); this.optionSelectionChanges.subscribe(event => { this._emitChangeEvent(event.source); @@ -304,7 +304,7 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr this._destroyed.complete(); } - private registerWithPanel(): void { + private _registerWithPanel(): void { if (this._parentPanel === null || this._parentPanel === undefined) { if (this._explicitPanel !== null && this._explicitPanel !== undefined) { this._explicitPanel._registerContent(this.id, 'listbox'); @@ -396,7 +396,8 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr this._explicitPanel.closePanel(data); } } else { - option.selected ? this._parentPanel.closePanel(option.value) : this._parentPanel.closePanel(); + option.selected ? + this._parentPanel.closePanel(option.value) : this._parentPanel.closePanel(); } } } From e3dd27adbda4aecbbdde7aa2b1af1fe2742059ca Mon Sep 17 00:00:00 2001 From: niels Date: Fri, 14 Aug 2020 14:53:37 -0400 Subject: [PATCH 25/27] refactor(listbox): simplified register and update panel functions. --- src/cdk-experimental/listbox/listbox.ts | 24 ++++-------------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/src/cdk-experimental/listbox/listbox.ts b/src/cdk-experimental/listbox/listbox.ts index c30cfacda0af..2a95bd63eb3b 100644 --- a/src/cdk-experimental/listbox/listbox.ts +++ b/src/cdk-experimental/listbox/listbox.ts @@ -305,13 +305,8 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr } private _registerWithPanel(): void { - if (this._parentPanel === null || this._parentPanel === undefined) { - if (this._explicitPanel !== null && this._explicitPanel !== undefined) { - this._explicitPanel._registerContent(this.id, 'listbox'); - } - } else { - this._parentPanel._registerContent(this.id, 'listbox'); - } + const panel = this._parentPanel || this._explicitPanel; + panel?._registerContent(this.id, 'listbox'); } private _initKeyManager() { @@ -389,16 +384,9 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr } _updatePanel(option: CdkOption) { - const data = option.selected ? option.value : null; if (!this.multiple) { - if (this._parentPanel === null || this._parentPanel === undefined) { - if (this._explicitPanel !== null && this._explicitPanel !== undefined) { - this._explicitPanel.closePanel(data); - } - } else { - option.selected ? - this._parentPanel.closePanel(option.value) : this._parentPanel.closePanel(); - } + const panel = this._parentPanel || this._explicitPanel; + option.selected ? panel?.closePanel(option.value) : panel?.closePanel(); } } @@ -427,10 +415,6 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr if (!this.useActiveDescendant) { this._activeOption.focus(); - } else { - if (document.activeElement === this._activeOption.getElementRef().nativeElement) { - this._elementRef.nativeElement.focus(); - } } } From 22495bc03d2d234527b8a58c93b0b848758929f5 Mon Sep 17 00:00:00 2001 From: niels Date: Fri, 14 Aug 2020 14:54:41 -0400 Subject: [PATCH 26/27] refactor(listbox): changed updatePanel to updatePanelForSelection. --- src/cdk-experimental/listbox/listbox.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/cdk-experimental/listbox/listbox.ts b/src/cdk-experimental/listbox/listbox.ts index 2a95bd63eb3b..983c75d35328 100644 --- a/src/cdk-experimental/listbox/listbox.ts +++ b/src/cdk-experimental/listbox/listbox.ts @@ -294,7 +294,7 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr this._emitChangeEvent(event.source); this._updateSelectionModel(event.source); this.setActiveOption(event.source); - this._updatePanel(event.source); + this._updatePanelForSelection(event.source); }); } @@ -383,7 +383,7 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr this._selectionModel.deselect(option); } - _updatePanel(option: CdkOption) { + _updatePanelForSelection(option: CdkOption) { if (!this.multiple) { const panel = this._parentPanel || this._explicitPanel; option.selected ? panel?.closePanel(option.value) : panel?.closePanel(); From 24522be5ce0b7b77f4ce72b8d98eb6c657e59ff0 Mon Sep 17 00:00:00 2001 From: niels Date: Fri, 14 Aug 2020 14:59:26 -0400 Subject: [PATCH 27/27] fix(listbox): removed unused variable. --- src/cdk-experimental/listbox/listbox.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/cdk-experimental/listbox/listbox.ts b/src/cdk-experimental/listbox/listbox.ts index 983c75d35328..9d68137682a3 100644 --- a/src/cdk-experimental/listbox/listbox.ts +++ b/src/cdk-experimental/listbox/listbox.ts @@ -276,10 +276,7 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit, Contr @Input('parentPanel') private readonly _explicitPanel: CdkComboboxPanel; - constructor( - private readonly _elementRef: ElementRef, - @Optional() @Inject(PANEL) readonly _parentPanel?: CdkComboboxPanel, - ) { } + constructor(@Optional() @Inject(PANEL) readonly _parentPanel?: CdkComboboxPanel) { } ngOnInit() { this._selectionModel = new SelectionModel>(this.multiple);