diff --git a/packages/mosaic/list/list-selection.component.ts b/packages/mosaic/list/list-selection.component.ts index ea5963397..02951ccea 100644 --- a/packages/mosaic/list/list-selection.component.ts +++ b/packages/mosaic/list/list-selection.component.ts @@ -38,7 +38,7 @@ import { mixinDisabled, toBoolean, CanDisableCtor } from '@ptsecurity/mosaic/core'; -import { Subject, Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -119,6 +119,7 @@ export class McListOption implements OnDestroy, OnInit, IFocusableOption { ngOnInit() { this.focusMonitor.monitor(this.elementRef.nativeElement, false); + if (this._selected) { // List options that are selected at initialization can't be reported properly to the form // control. This is because it takes some time until the selection-list knows about all diff --git a/packages/mosaic/tree-select/tree-select.component.spec.ts b/packages/mosaic/tree-select/tree-select.component.spec.ts index f3078bce5..0ddbfde19 100644 --- a/packages/mosaic/tree-select/tree-select.component.spec.ts +++ b/packages/mosaic/tree-select/tree-select.component.spec.ts @@ -1564,6 +1564,7 @@ describe('McTreeSelect', () => { Object.defineProperty(event, 'altKey', { get: () => true }); dispatchEvent(select, event); + flush(); expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.'); expect(formControl.value).toBeFalsy('Expected value not to have changed.'); @@ -1579,6 +1580,7 @@ describe('McTreeSelect', () => { Object.defineProperty(event, 'altKey', { get: () => true }); dispatchEvent(select, event); + flush(); expect(selectInstance.panelOpen).toBe(true, 'Expected select to be open.'); expect(formControl.value).toBeFalsy('Expected value not to have changed.'); @@ -1595,6 +1597,7 @@ describe('McTreeSelect', () => { Object.defineProperty(event, 'altKey', { get: () => true }); dispatchEvent(select, event); + flush(); expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.'); expect(event.defaultPrevented).toBe(true, 'Expected default action to be prevented.'); @@ -1611,6 +1614,7 @@ describe('McTreeSelect', () => { Object.defineProperty(event, 'altKey', { get: () => true }); dispatchEvent(select, event); + flush(); expect(selectInstance.panelOpen).toBe(false, 'Expected select to be closed.'); expect(event.defaultPrevented).toBe(true, 'Expected default action to be prevented.'); @@ -1709,6 +1713,7 @@ describe('McTreeSelect', () => { expect(formControl.pristine).toBe(true, 'Expected form control to be clean.'); dispatchKeyboardEvent(select, 'keydown', 16); // Press a random key. + flush(); expect(formControl.value).toBeNull('Expected form control value to stay empty.'); expect(formControl.pristine).toBe(true, 'Expected form control to stay clean.'); @@ -1855,6 +1860,8 @@ describe('McTreeSelect', () => { it('should prevent the default action when pressing space', fakeAsync(() => { const event = dispatchKeyboardEvent(select, 'keydown', SPACE); + flush(); + expect(event.defaultPrevented).toBe(true); })); @@ -2073,6 +2080,7 @@ describe('McTreeSelect', () => { const event = dispatchKeyboardEvent(trigger, 'keydown', HOME); fixture.detectChanges(); + flush(); expect(fixture.componentInstance.select.tree.keyManager.activeItemIndex).toBe(0); expect(event.defaultPrevented).toBe(true); diff --git a/packages/mosaic/tree/_tree-theme.scss b/packages/mosaic/tree/_tree-theme.scss index 5312dc1d9..b59b9a01b 100644 --- a/packages/mosaic/tree/_tree-theme.scss +++ b/packages/mosaic/tree/_tree-theme.scss @@ -19,7 +19,7 @@ background-color: mc-color($background, hover); } - &.mc-focused { + &.cdk-keyboard-focused { border-color: mc-color($primary); } diff --git a/packages/mosaic/tree/tree-option.component.ts b/packages/mosaic/tree/tree-option.component.ts index 13c2464ee..6c9037834 100644 --- a/packages/mosaic/tree/tree-option.component.ts +++ b/packages/mosaic/tree/tree-option.component.ts @@ -8,8 +8,9 @@ import { ElementRef, Inject, Optional, - InjectionToken, ChangeDetectionStrategy, ViewEncapsulation + InjectionToken, ChangeDetectionStrategy, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core'; +import { FocusMonitor } from '@ptsecurity/cdk/a11y'; import { CdkTreeNode } from '@ptsecurity/cdk/tree'; import { CanDisable, toBoolean } from '@ptsecurity/mosaic/core'; @@ -56,7 +57,7 @@ let uniqueIdCounter: number = 0; encapsulation: ViewEncapsulation.None, providers: [{ provide: CdkTreeNode, useExisting: McTreeOption }] }) -export class McTreeOption extends CdkTreeNode implements CanDisable { +export class McTreeOption extends CdkTreeNode implements OnInit, OnDestroy, CanDisable { @Input() get value(): any { return this._value; @@ -85,11 +86,6 @@ export class McTreeOption extends CdkTreeNode implements CanDisabl @Output() readonly onSelectionChange = new EventEmitter(); - // @Input() - // get selected(): boolean { - // return this.treeSelection.selectionModel && this.treeSelection.selectionModel.isSelected(this) || false; - // } - get selected(): boolean { return this._selected; } @@ -120,12 +116,21 @@ export class McTreeOption extends CdkTreeNode implements CanDisabl constructor( protected elementRef: ElementRef, protected changeDetectorRef: ChangeDetectorRef, + private focusMonitor: FocusMonitor, @Optional() @Inject(MC_TREE_OPTION_PARENT_COMPONENT) private readonly parent: McTreeOptionParentComponent ) { // todo any super(elementRef, parent as any); } + ngOnInit() { + this.focusMonitor.monitor(this.elementRef.nativeElement, false); + } + + ngOnDestroy(): void { + this.focusMonitor.stopMonitoring(this.elementRef.nativeElement); + } + toggle(): void { this.selected = !this.selected; }