fix(tree): fixed few bugs (example, initial highlight, focus on close…

…, autoselect=true) (#305)
positive-js · Oct 18, 2019 · 31fc662 · 31fc662
1 parent 1e2ab10
commit 31fc662
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 54 deletions.
diff --git a/packages/mosaic-dev/all/module.ts b/packages/mosaic-dev/all/module.ts
@@ -137,8 +137,10 @@ export class DemoComponent {
             this.transformer, this.getLevel, this.isExpandable, this.getChildren
         );
 
-        this.treeControl = new FlatTreeControl<FileFlatNode>(this.getLevel, this.isExpandable,
-            this.getValue, this.getViewValue);
+        this.treeControl = new FlatTreeControl<FileFlatNode>(
+            this.getLevel, this.isExpandable, this.getValue, this.getViewValue
+        );
+
         this.dataSource = new McTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
         this.dataSource.data = buildFileTree(DATA_OBJECT, 0);
@@ -157,7 +159,7 @@ export class DemoComponent {
         this.isDisabled = !this.isDisabled;
     }
 
-    transformer(node: FileNode, level: number) {
+    transformer = (node: FileNode, level: number) => {
         const flatNode = new FileFlatNode();
 
         flatNode.name = node.name;
@@ -186,14 +188,21 @@ export class DemoComponent {
         return `${node.name} view`;
     }
 
-    private getLevel(node: FileFlatNode) { return node.level; }
+    private getLevel = (node: FileFlatNode) => node.level;
 
-    private isExpandable(node: FileFlatNode) { return node.expandable; }
+    private isExpandable = (node: FileFlatNode) => node.expandable;
 
     private getChildren = (node: FileNode): Observable<FileNode[]> => {
         return observableOf(node.children);
     }
 
+    private getValue = (node: FileNode): string => {
+        return node.name;
+    }
+
+    private getViewValue = (node: FileNode): string => {
+        return node.name + ' view';
+    }
 }
 
 

diff --git a/packages/mosaic-dev/tree-select/module.ts b/packages/mosaic-dev/tree-select/module.ts
@@ -62,11 +62,11 @@ export const DATA_OBJECT = {
         Woods: 'jpg',
         PhotoBoothLibrary: {
             Contents: 'dir',
-            Pictures: 'dir'
+            Pictures_2: 'dir'
         }
     },
     Documents: {
-        Pictures: 'Pictures',
+        Pictures_3: 'Pictures',
         angular: {
             src: {
                 core: 'ts',

diff --git a/packages/mosaic-dev/tree/module.ts b/packages/mosaic-dev/tree/module.ts
@@ -65,11 +65,11 @@ export const DATA_OBJECT = {
         Woods: 'jpg',
         PhotoBoothLibrary: {
             Contents: 'dir',
-            Pictures: 'dir'
+            Pictures_2: 'dir'
         }
     },
     Documents: {
-        Pictures: 'Pictures',
+        Pictures_3: 'Pictures',
         angular: {
             src: {
                 core: 'ts',

diff --git a/packages/mosaic/select/select.component.ts b/packages/mosaic/select/select.component.ts
@@ -622,15 +622,15 @@ export class McSelect extends McSelectMixinBase implements
 
     /** Closes the overlay panel and focuses the host element. */
     close(): void {
-        if (this._panelOpen) {
-            // the order of calls is important
-            this.resetSearch();
-            this._panelOpen = false;
-            this.keyManager.withHorizontalOrientation(this.isRtl() ? 'rtl' : 'ltr');
+        if (!this._panelOpen) { return; }
 
-            this._changeDetectorRef.markForCheck();
-            this.onTouched();
-        }
+        // the order of calls is important
+        this.resetSearch();
+        this._panelOpen = false;
+        this.keyManager.withHorizontalOrientation(this.isRtl() ? 'rtl' : 'ltr');
+
+        this._changeDetectorRef.markForCheck();
+        this.onTouched();
     }
 
     /**

diff --git a/packages/mosaic/tree-select/tree-select.component.spec.ts b/packages/mosaic/tree-select/tree-select.component.spec.ts
@@ -3671,7 +3671,8 @@ describe('McTreeSelect', () => {
             expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
         }));
 
-        it('should not restore focus to the host element when clicking outside', fakeAsync(() => {
+        // excluded because tree-select works not like select
+        xit('should not restore focus to the host element when clicking outside', fakeAsync(() => {
             const fixture = TestBed.createComponent(BasicSelectWithoutForms);
             const select = fixture.debugElement.nativeElement.querySelector('mc-tree-select');
 

diff --git a/packages/mosaic/tree-select/tree-select.component.ts b/packages/mosaic/tree-select/tree-select.component.ts
@@ -129,6 +129,7 @@ const McTreeSelectMixinBase: CanDisableCtor & HasTabIndexCtor & CanUpdateErrorSt
         '[class.mc-select-invalid]': 'errorState',
         '[class.mc-select-required]': 'required',
 
+        '(click)': 'toggle()',
         '(keydown)': 'handleKeydown($event)',
         '(focus)': 'onFocus()',
         '(blur)': 'onBlur()',
@@ -472,6 +473,14 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
             this.tempValues = null;
         }
 
+        this.optionSelectionChanges
+            .pipe(takeUntil(this.destroy))
+            .subscribe((event) => {
+                if (!this.multiple && this.panelOpen && event.isUserInput) {
+                    this.close();
+                }
+            });
+
         this.tree.selectionChange
             .pipe(takeUntil(this.destroy))
             .subscribe((event) => {
@@ -488,11 +497,6 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
                         this.options.find((option) => option.data === event.added[0]) as any
                     );
                 }
-
-                if (!this.multiple && this.panelOpen) {
-                    this.close();
-                    this.focus();
-                }
             });
     }
 
@@ -549,7 +553,9 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
         this.triggerFontSize = parseInt(getComputedStyle(this.trigger.nativeElement)['font-size']);
 
         this._panelOpen = true;
-        this.highlightCorrectOption();
+
+        setTimeout(() => this.highlightCorrectOption());
+
         this.changeDetectorRef.markForCheck();
 
         // Set the font size on the panel element once it exists.
@@ -564,12 +570,14 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
 
     /** Closes the overlay panel and focuses the host element. */
     close(): void {
-        if (this._panelOpen) {
-            this._panelOpen = false;
+        if (!this._panelOpen) { return; }
 
-            this.changeDetectorRef.markForCheck();
-            this.onTouched();
-        }
+        this._panelOpen = false;
+
+        this.changeDetectorRef.markForCheck();
+        this.onTouched();
+
+        setTimeout(() => this.focus(), 0);
     }
 
     /**
@@ -848,7 +856,11 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
         } else if ((keyCode === ENTER || keyCode === SPACE) && this.tree.keyManager.activeItem) {
             event.preventDefault();
 
-            this.selectionModel.toggle(this.tree.keyManager.activeItem.data);
+            if (!this.autoSelect) {
+                this.selectionModel.toggle(this.tree.keyManager.activeItem.data);
+            } else {
+                this.close();
+            }
         } else if (this.multiple && keyCode === A && event.ctrlKey) {
             event.preventDefault();
 
@@ -872,6 +884,10 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
             ) {
                 this.tree.keyManager.activeItem.selectViaInteraction(event);
             }
+
+            if (this.autoSelect && this.tree.keyManager.activeItem) {
+                this.tree.setSelectedOption(this.tree.keyManager.activeItem);
+            }
         }
     }
 
@@ -945,17 +961,17 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
      * the first item instead.
      */
     private highlightCorrectOption() {
-        if (this.tree.keyManager) {
-            if (this.empty) {
-                this.tree.keyManager.setFirstItemActive();
-            } else {
-                const firstSelectedValue = this.multiple ? this.selectedValues[0] : this.selectedValues;
+        if (!this.tree.keyManager) { return; }
+
+        if (this.empty) {
+            this.tree.keyManager.setFirstItemActive();
+        } else {
+            const firstSelectedValue = this.multiple ? this.selectedValues[0] : this.selectedValues;
 
-                const selectedOption = this.options.find((option) => option.value === firstSelectedValue);
+            const selectedOption = this.options.find((option) => option.value === firstSelectedValue);
 
-                if (selectedOption) {
-                    this.tree.keyManager.setActiveItem(selectedOption);
-                }
+            if (selectedOption) {
+                this.tree.keyManager.setActiveItem(selectedOption);
             }
         }
     }

diff --git a/packages/mosaic/tree-select/tree-select.html b/packages/mosaic/tree-select/tree-select.html
@@ -1,6 +1,5 @@
 <div cdk-overlay-origin
      class="mc-tree-select__trigger"
-     (click)="toggle()"
      [class.mc-tree-select__trigger_multiple]="multiple"
      #origin="cdkOverlayOrigin"
      #trigger>

diff --git a/packages/mosaic/tree/tree-option.component.ts b/packages/mosaic/tree/tree-option.component.ts
@@ -164,12 +164,7 @@ export class McTreeOption extends CdkTreeNode<McTreeOption> implements OnInit, O
     }
 
     focus(): void {
-        const element = this.getHostElement();
-
-        // tslint:disable-next-line: no-unbound-method
-        if (typeof element.focus === 'function') {
-            element.focus();
-        }
+        this.focusMonitor.focusVia(this.getHostElement(), 'keyboard');
     }
 
     getHeight(): number {
@@ -187,6 +182,7 @@ export class McTreeOption extends CdkTreeNode<McTreeOption> implements OnInit, O
             this._selected = true;
 
             this.changeDetectorRef.markForCheck();
+            this.emitSelectionChangeEvent();
         }
     }
 

diff --git a/packages/mosaic/tree/tree-selection.component.ts b/packages/mosaic/tree/tree-selection.component.ts
@@ -311,29 +311,23 @@ export class McTreeSelection extends CdkTree<McTreeOption>
                         if (index >= activeIndex && index <= previousIndex) { item.setSelected(true); }
                     });
                 }
-                this.emitChangeEvent(option);
             } else if (withCtrl) {
                 if (!this.canDeselectLast(option)) { return; }
 
                 this.selectionModel.toggle(option.data);
-
-                this.emitChangeEvent(option);
             } else {
                 this.selectionModel.toggle(option.data);
-
-                this.emitChangeEvent(option);
             }
         } else {
             if (!this.canDeselectLast(option)) { return; }
 
             if (this.autoSelect) {
                 this.selectionModel.deselect(...this.selectionModel.selected);
                 this.selectionModel.select(option.data);
-
-                // todo не факт что это нужно
-                this.emitChangeEvent(option);
             }
         }
+
+        this.emitChangeEvent(option);
     }
 
     setFocusedOption(option: McTreeOption): void {