fix(tree): mouse click selection generates extra event (#DS-2900) (#332)

Author: lskramarov

packages/components/tree-select/tree-select.component.spec.ts

@@ -67,7 +67,6 @@ import {
     KbqTreeSelectionChange
 } from '@koobiq/components/tree';
 import { Observable, Subject, Subscription, of } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { KbqTreeSelect, KbqTreeSelectChange, KbqTreeSelectModule } from './index';
 
 const TREE_DATA = {
@@ -2216,12 +2215,12 @@ describe('KbqTreeSelect', () => {
                 it('should consider the selection a result of a user action when closed', fakeAsync(() => {
                     const option = fixture.componentInstance.options.first;
                     const spy = jest.fn();
-                    const subscription = option.onSelectionChange.pipe(map((e) => e.isUserInput)).subscribe(spy);
+                    const subscription = option.userInteraction.subscribe(spy);
 
                     dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
                     tick(10);
 
-                    expect(spy).toHaveBeenCalledWith(true);
+                    expect(spy).toHaveBeenCalled();
 
                     subscription.unsubscribe();
                 }));
@@ -2323,6 +2322,8 @@ describe('KbqTreeSelect', () => {
                 fixture.detectChanges();
                 flush();
 
+                expect(fixture.componentInstance.select.panelOpen).toBe(true);
+
                 const option = overlayContainerElement.querySelector('kbq-tree-option') as HTMLElement;
                 option.click();
                 fixture.detectChanges();

packages/components/tree-select/tree-select.component.ts

@@ -296,6 +296,21 @@ export class KbqTreeSelect
         );
     }) as Observable<KbqTreeSelectChange>;
 
+    /** Combined stream of all of the child options userInteraction events. */
+    readonly userInteractionChanges: Observable<void> = defer(() => {
+        if (this.options) {
+            return this.options.changes.pipe(
+                startWith(this.options),
+                switchMap(() => merge(...this.options.map((option) => option.userInteraction)))
+            );
+        }
+
+        return this.ngZone.onStable.asObservable().pipe(
+            take(1),
+            switchMap(() => this.userInteractionChanges)
+        );
+    });
+
     @Input()
     get placeholder(): string {
         return this._placeholder;
@@ -549,8 +564,8 @@ export class KbqTreeSelect
             this.tempValues = null;
         }
 
-        this.optionSelectionChanges.pipe(takeUntil(this.destroy)).subscribe((event) => {
-            if (!this.multiple && this.panelOpen && event.isUserInput) {
+        this.userInteractionChanges.pipe(takeUntil(this.destroy)).subscribe(() => {
+            if (!this.multiple && this.panelOpen) {
                 this.close();
 
                 Promise.resolve().then(() => this.focus());

packages/components/tree/tree-option.component.ts

@@ -138,6 +138,7 @@ export class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterCo
     private _showCheckbox: boolean;
 
     @Output() readonly onSelectionChange = new EventEmitter<KbqTreeOptionChange>();
+    readonly userInteraction = new EventEmitter<void>();
 
     get selected(): boolean {
         return this._selected;
@@ -359,7 +360,8 @@ export class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterCo
         }
 
         this.markForCheck();
-        this.emitSelectionChangeEvent(true);
+
+        this.userInteraction.emit();
 
         const shiftKey = $event ? hasModifierKey($event, 'shiftKey') : false;
         const ctrlKey = $event ? hasModifierKey($event, 'ctrlKey') : false;

tools/public_api_guard/components/tree-select.api.md

@@ -200,6 +200,7 @@ export class KbqTreeSelect extends KbqTreeSelectMixinBase implements AfterConten
     get triggerValue(): string;
     // (undocumented)
     triggerValues: ITriggerValue[];
+    readonly userInteractionChanges: Observable<void>;
     // (undocumented)
     get value(): any;
     readonly valueChange: EventEmitter<any>;

tools/public_api_guard/components/tree.api.md

@@ -514,6 +514,8 @@ export class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterCo
     // (undocumented)
     updateParentsCheckboxState(node: any): void;
     // (undocumented)
+    readonly userInteraction: EventEmitter<void>;
+    // (undocumented)
     get value(): any;
     set value(value: any);
     // (undocumented)