From c98289519c6f8a856bedaaf4715e9df36ca18805 Mon Sep 17 00:00:00 2001 From: lskramarov Date: Thu, 27 Jun 2019 13:56:19 +0300 Subject: [PATCH] fix(tree): mc-tree multi select is not reset by first click #UIM-8 (#152) --- .../tree-select/tree-select.component.ts | 4 +-- packages/mosaic/tree/tree-option.ts | 6 ++-- packages/mosaic/tree/tree-selection.ts | 31 ++++++++++--------- 3 files changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/mosaic/tree-select/tree-select.component.ts b/packages/mosaic/tree-select/tree-select.component.ts index 355fb5776..84e935b51 100644 --- a/packages/mosaic/tree-select/tree-select.component.ts +++ b/packages/mosaic/tree-select/tree-select.component.ts @@ -905,7 +905,7 @@ export class McTreeSelect extends McTreeSelectMixinBase implements } else if ((keyCode === ENTER || keyCode === SPACE) && this.tree.keyManager.activeItem) { event.preventDefault(); - this.tree.keyManager.activeItem.selectViaInteraction(); + this.tree.keyManager.activeItem.selectViaInteraction(event); } else if (this.multiple && keyCode === A && event.ctrlKey) { event.preventDefault(); @@ -925,7 +925,7 @@ export class McTreeSelect extends McTreeSelectMixinBase implements if (this.multiple && isArrowKey && event.shiftKey && this.tree.keyManager.activeItem && this.tree.keyManager.activeItemIndex !== previouslyFocusedIndex) { - this.tree.keyManager.activeItem.selectViaInteraction(); + this.tree.keyManager.activeItem.selectViaInteraction(event); } } } diff --git a/packages/mosaic/tree/tree-option.ts b/packages/mosaic/tree/tree-option.ts index 0153f2d5d..474f3b0a6 100644 --- a/packages/mosaic/tree/tree-option.ts +++ b/packages/mosaic/tree/tree-option.ts @@ -47,7 +47,7 @@ let uniqueIdCounter: number = 0; '[class.mc-selected]': 'selected', '[class.mc-active]': 'active', - '(click)': 'selectViaInteraction()' + '(click)': 'selectViaInteraction($event)' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, @@ -222,13 +222,13 @@ export class McTreeOption extends CdkTreeNode implements CanDisabl } } - selectViaInteraction(): void { + selectViaInteraction($event?: KeyboardEvent): void { if (!this.disabled) { this.changeDetectorRef.markForCheck(); this.emitSelectionChangeEvent(true); if (this.parent.setFocusedOption) { - this.parent.setFocusedOption(this); + this.parent.setFocusedOption(this, $event); } } } diff --git a/packages/mosaic/tree/tree-selection.ts b/packages/mosaic/tree/tree-selection.ts index ef77e1c68..f09879ee0 100644 --- a/packages/mosaic/tree/tree-selection.ts +++ b/packages/mosaic/tree/tree-selection.ts @@ -21,7 +21,17 @@ import { import { NodeDef, ViewData } from '@angular/core/esm2015/src/view'; import { ControlValueAccessor, NgControl } from '@angular/forms'; import { ActiveDescendantKeyManager } from '@ptsecurity/cdk/a11y'; -import { END, ENTER, HOME, LEFT_ARROW, PAGE_DOWN, PAGE_UP, RIGHT_ARROW, SPACE } from '@ptsecurity/cdk/keycodes'; +import { + END, + ENTER, + hasModifierKey, + HOME, + LEFT_ARROW, + PAGE_DOWN, + PAGE_UP, + RIGHT_ARROW, + SPACE +} from '@ptsecurity/cdk/keycodes'; import { CdkTree, CdkTreeNodeOutlet } from '@ptsecurity/cdk/tree'; import { CanDisable, @@ -96,10 +106,6 @@ export class McTreeSelection extends McTreeSelectionBaseMixin autoSelect: boolean; noUnselect: boolean; - // todo temporary solution - withShift: boolean; - withCtrl: boolean; - @Output() readonly navigationChange = new EventEmitter(); @Output() readonly selectionChange = new EventEmitter(); @@ -189,8 +195,6 @@ export class McTreeSelection extends McTreeSelectionBaseMixin onKeyDown(event: KeyboardEvent) { // tslint:disable-next-line: deprecation const keyCode = event.keyCode; - this.withShift = event.shiftKey; - this.withCtrl = event.ctrlKey; switch (keyCode) { case LEFT_ARROW: @@ -246,14 +250,17 @@ export class McTreeSelection extends McTreeSelectionBaseMixin this.keyManager.withScrollSize(Math.floor(this.getHeight() / this.options.first.getHeight())); } - setFocusedOption(option: McTreeOption) { + setFocusedOption(option: McTreeOption, $event?: KeyboardEvent) { this.keyManager.setActiveItem(option); + const withShift = $event ? hasModifierKey($event, 'shiftKey') : false; + const withCtrl = $event ? hasModifierKey($event, 'ctrlKey') : false; + if (this.multiple) { if (!this.canDeselectLast(option)) { return; } option.toggle(); - } else if (this.withShift) { + } else if (withShift) { const previousIndex = this.keyManager.previousActiveItemIndex; const activeIndex = this.keyManager.activeItemIndex; @@ -266,11 +273,7 @@ export class McTreeSelection extends McTreeSelectionBaseMixin if (index >= activeIndex && index <= previousIndex) { item.setSelected(true); } }); } - - this.withShift = false; - } else if (this.withCtrl) { - this.withCtrl = false; - + } else if (withCtrl) { if (!this.canDeselectLast(option)) { return; } option.toggle();