fix(tree): tree has focus style after click on node (#UIM-131) (#203)

positive-js · Aug 16, 2019 · 83b1239 · 83b1239
1 parent f5fb4c2
commit 83b1239
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<McTreeOption> implements CanDisable {
+export class McTreeOption extends CdkTreeNode<McTreeOption> implements OnInit, OnDestroy, CanDisable {
     @Input()
     get value(): any {
         return this._value;
@@ -85,11 +86,6 @@ export class McTreeOption extends CdkTreeNode<McTreeOption> implements CanDisabl
 
     @Output() readonly onSelectionChange = new EventEmitter<McTreeOptionChange>();
 
-    // @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<McTreeOption> 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;
     }