fix(tree-select): disable handlers for custom matcher (#DS-4304) (#1107)

Author: lskramarov

packages/components-dev/tree-select/module.ts

@@ -31,6 +31,8 @@ import { DEV_DATA_OBJECT, devBuildFileTree, DevFileFlatNode, DevFileNode } from
     imports: [TreeSelectExamplesModule],
     selector: 'dev-examples',
     template: `
+        <tree-select-custom-matcher-with-input-example />
+        <hr />
         <tree-select-with-multiline-matcher-example />
         <hr />
     `,

packages/components/core/select/common.ts

@@ -1,5 +1,14 @@
 import { CdkConnectedOverlay } from '@angular/cdk/overlay';
-import { AfterContentInit, Directive, EventEmitter, Inject, OnDestroy, Optional } from '@angular/core';
+import {
+    AfterContentInit,
+    booleanAttribute,
+    Directive,
+    EventEmitter,
+    Inject,
+    Input,
+    OnDestroy,
+    Optional
+} from '@angular/core';
 import { END, ESCAPE, HOME, SPACE } from '@koobiq/cdk/keycodes';
 import { Subscription } from 'rxjs';
 import { KBQ_FORM_FIELD_REF, KbqFormFieldRef } from '../form-field';
@@ -15,7 +24,9 @@ export class KbqSelectTrigger {}
     selector: 'kbq-select-matcher, [kbq-select-matcher]',
     standalone: true
 })
-export class KbqSelectMatcher {}
+export class KbqSelectMatcher {
+    @Input({ transform: booleanAttribute }) useDefaultHandlers: boolean = true;
+}
 
 @Directive({
     selector: 'kbq-select-footer, [kbq-select-footer]',

packages/components/tree-select/examples.tree-select.ru.md

@@ -9,3 +9,7 @@ kbq-select-trigger - позволяет переопределить блок, 
 kbq-select-matcher - позволяет заменить все содержимое kbq-select, включая placeholder, cleaner и icon
 
 <!-- example(tree-select-custom-matcher) -->
+
+#### Пример с полем ввода
+
+<!-- example(tree-select-custom-matcher-with-input) -->

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

@@ -1079,6 +1079,53 @@ class SelectWithCustomTrigger {
     }
 }
 
+@Component({
+    selector: 'select-with-custom-matcher',
+    template: `
+        <kbq-form-field>
+            <kbq-tree-select #select="kbqTreeSelect" placeholder="Food" [formControl]="control">
+                <kbq-select-matcher class="custom-matcher" [useDefaultHandlers]="useDefaultHandlers">
+                    {{ select.triggerValue?.split('').reverse().join('') }}
+                </kbq-select-matcher>
+                <kbq-tree-selection [dataSource]="dataSource" [treeControl]="treeControl">
+                    <kbq-tree-option *kbqTreeNodeDef="let node" kbqTreeNodePadding>
+                        {{ treeControl.getViewValue(node) }}
+                    </kbq-tree-option>
+
+                    <kbq-tree-option *kbqTreeNodeDef="let node; when: hasChild" kbqTreeNodePadding>
+                        <i kbq-icon="kbq-angle-S_16" kbqTreeNodeToggle></i>
+                        {{ treeControl.getViewValue(node) }}
+                    </kbq-tree-option>
+                </kbq-tree-selection>
+            </kbq-tree-select>
+        </kbq-form-field>
+    `
+})
+class SelectWithCustomMatcher {
+    @ViewChild('select') select: KbqTreeSelect;
+
+    useDefaultHandlers: boolean = true;
+
+    control = new UntypedFormControl();
+
+    treeControl = new FlatTreeControl<FileFlatNode>(getLevel, isExpandable, getValue, getValue);
+    treeFlattener = new KbqTreeFlattener(transformer, getLevel, isExpandable, getChildren);
+
+    dataSource: KbqTreeFlatDataSource<FileNode, FileFlatNode>;
+
+    constructor() {
+        this.dataSource = new KbqTreeFlatDataSource(this.treeControl, this.treeFlattener);
+
+        // Build the tree nodes from Json object. The result is a list of `FileNode` with nested
+        // file node as children.
+        this.dataSource.data = buildFileTree(TREE_DATA, 0);
+    }
+
+    hasChild(_: number, nodeData: FileFlatNode) {
+        return nodeData.expandable;
+    }
+}
+
 @Component({
     selector: 'ng-model-compare-with',
     template: `
@@ -3549,6 +3596,83 @@ describe(KbqTreeSelect.name, () => {
         }));
     });
 
+    describe('with custom matcher', () => {
+        beforeEach(() => {
+            configureKbqTreeSelectTestingModule([SelectWithCustomMatcher]);
+        });
+
+        it('should allow the user to customize matcher', fakeAsync(() => {
+            const fixture = TestBed.createComponent(SelectWithCustomMatcher);
+
+            fixture.detectChanges();
+
+            fixture.componentInstance.control.setValue('Downloads');
+            fixture.detectChanges();
+            tick(1);
+            flush();
+
+            const label = fixture.debugElement.query(By.css('.custom-matcher')).nativeElement;
+
+            expect(label.textContent).toContain('sdaolnwoD');
+        }));
+
+        it('should allow to disable handlers for click with custom matcher', fakeAsync(() => {
+            const fixture = TestBed.createComponent(SelectWithCustomMatcher);
+
+            fixture.autoDetectChanges();
+
+            const trigger = fixture.debugElement.query(By.css('.kbq-select__trigger')).nativeElement;
+            const toggleSpyFn = jest.spyOn(fixture.componentInstance.select, 'toggle');
+
+            expect(toggleSpyFn).toHaveBeenCalledTimes(0);
+
+            trigger.click();
+            fixture.detectChanges();
+            flush();
+
+            expect(toggleSpyFn).toHaveBeenCalledTimes(1);
+
+            fixture.componentInstance.useDefaultHandlers = false;
+
+            trigger.click();
+            fixture.detectChanges();
+            flush();
+
+            expect(toggleSpyFn).toHaveBeenCalledTimes(1);
+        }));
+
+        it('should allow to disable handlers for keydown with custom matcher', fakeAsync(() => {
+            const fixture = TestBed.createComponent(SelectWithCustomMatcher);
+
+            fixture.autoDetectChanges();
+
+            const trigger = fixture.debugElement.query(By.css('.kbq-select__trigger')).nativeElement;
+
+            const triggerKeydownHandlerSpyFn = jest.spyOn(fixture.componentInstance.select, 'triggerKeydownHandler');
+            const panelKeydownHandlerSpyFn = jest.spyOn(fixture.componentInstance.select, 'panelKeydownHandler');
+
+            expect(triggerKeydownHandlerSpyFn).toHaveBeenCalledTimes(0);
+            expect(panelKeydownHandlerSpyFn).toHaveBeenCalledTimes(0);
+
+            dispatchKeyboardEvent(trigger, 'keydown', DOWN_ARROW);
+            fixture.detectChanges();
+            flush();
+
+            expect(triggerKeydownHandlerSpyFn).toHaveBeenCalledTimes(1);
+            expect(panelKeydownHandlerSpyFn).toHaveBeenCalledTimes(0);
+
+            fixture.componentInstance.useDefaultHandlers = false;
+            fixture.detectChanges();
+
+            dispatchKeyboardEvent(trigger, 'keydown', DOWN_ARROW);
+            fixture.detectChanges();
+            flush();
+
+            expect(triggerKeydownHandlerSpyFn).toHaveBeenCalledTimes(1);
+            expect(panelKeydownHandlerSpyFn).toHaveBeenCalledTimes(0);
+        }));
+    });
+
     describe('when resetting the value by setting null or undefined', () => {
         beforeEach(() => {
             configureKbqTreeSelectTestingModule([ResetValuesSelect]);