fix(list, tree): copying text using hotkeys (#DS-4362) (#1131)

Author: lskramarov

packages/components-dev/tree/module.ts

@@ -227,6 +227,10 @@ export class DevApp {
         console.log('onSelectAll', $event);
     }
 
+    onCopy($event) {
+        console.log('onCopy', $event);
+    }
+
     onNavigationChange($event) {
         console.log('onNavigationChange', $event);
     }

packages/components-dev/tree/template.html

@@ -54,6 +54,7 @@
     [(ngModel)]="modelValue"
     (ngModelChange)="onModelValueChange($event)"
     (onSelectAll)="onSelectAll($event)"
+    (onCopy)="onCopy($event)"
 >
     <kbq-tree-option *kbqTreeNodeDef="let node" kbqTreeNodePadding>
         <i kbq-icon="kbq-info-circle_16"></i>

packages/components/list/list-selection.component.ts

@@ -85,10 +85,19 @@ export class KbqListSelectAllEvent<T> {
     ) {}
 }
 
+/**
+ * Event class that occurs when copying an item from the KbqListSelection.
+ * Used to pass data about the copied item and copy context.
+ *
+ * @param source - instance of KbqListSelection
+ * @param option - instance of KbqListOption
+ * @param event - original keyboard event (optional) that triggered the copy
+ */
 export class KbqListCopyEvent<T> {
     constructor(
         public source: KbqListSelection,
-        public option: T
+        public option: T,
+        public event?: KeyboardEvent
     ) {}
 }
 
@@ -482,8 +491,7 @@ export class KbqListSelection implements AfterContentInit, AfterViewInit, OnDest
 
             return;
         } else if (isCopy(event)) {
-            this.copyActiveOption();
-            event.preventDefault();
+            this.copyActiveOption(event);
 
             return;
         } else if ([SPACE, ENTER].includes(keyCode)) {
@@ -615,19 +623,19 @@ export class KbqListSelection implements AfterContentInit, AfterViewInit, OnDest
         this.onSelectAll.emit(new KbqListSelectAllEvent(this, optionsToSelect));
     }
 
-    private copyActiveOption() {
-        if (!this.keyManager.activeItem) {
-            return;
-        }
+    private copyActiveOption(event: KeyboardEvent) {
+        if (!this.keyManager.activeItem) return;
 
         const option = this.keyManager.activeItem;
 
         option.preventBlur = true;
 
-        if (this.onCopy.observers.length) {
-            this.onCopy.emit(new KbqListCopyEvent(this, option));
+        if (this.onCopy.observed) {
+            this.onCopy.emit(new KbqListCopyEvent(this, option, event));
         } else {
             this.onCopyDefaultHandler();
+
+            event.preventDefault();
         }
 
         option.preventBlur = false;

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

@@ -67,10 +67,19 @@ export class KbqTreeSelectAllEvent<T> {
     ) {}
 }
 
+/**
+ * Event class that occurs when copying an item from the KbqTreeSelection.
+ * Used to pass data about the copied item and copy context.
+ *
+ * @param source - instance of KbqTreeSelection
+ * @param option - instance of KbqTreeOption
+ * @param event - original keyboard event (optional) that triggered the copy
+ */
 export class KbqTreeCopyEvent<T> {
     constructor(
         public source: KbqTreeSelection,
-        public option: T
+        public option: T,
+        public event?: KeyboardEvent
     ) {}
 }
 
@@ -354,7 +363,7 @@ export class KbqTreeSelection
 
             return;
         } else if (isCopy(event)) {
-            this.copyActiveOption();
+            this.copyActiveOption(event);
 
             return;
         } else if (keyCode === TAB) {
@@ -522,19 +531,19 @@ export class KbqTreeSelection
         this.onSelectAll.emit(new KbqTreeSelectAllEvent(this, optionsToSelect));
     }
 
-    copyActiveOption(): void {
-        if (!this.keyManager.activeItem) {
-            return;
-        }
+    copyActiveOption(event: KeyboardEvent): void {
+        if (!this.keyManager.activeItem) return;
 
         const option = this.keyManager.activeItem;
 
         option.preventBlur = true;
 
-        if (this.onCopy.observers.length) {
-            this.onCopy.emit(new KbqTreeCopyEvent(this, this.keyManager.activeItem as KbqTreeOption));
+        if (this.onCopy.observed) {
+            this.onCopy.emit(new KbqTreeCopyEvent(this, this.keyManager.activeItem as KbqTreeOption, event));
         } else {
             this.onCopyDefaultHandler();
+
+            event.preventDefault();
         }
 
         option.preventBlur = false;

tools/public_api_guard/components/list.api.md

@@ -44,9 +44,11 @@ export class KbqList {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqList, never>;
 }
 
-// @public (undocumented)
+// @public
 export class KbqListCopyEvent<T> {
-    constructor(source: KbqListSelection, option: T);
+    constructor(source: KbqListSelection, option: T, event?: KeyboardEvent | undefined);
+    // (undocumented)
+    event?: KeyboardEvent | undefined;
     // (undocumented)
     option: T;
     // (undocumented)

tools/public_api_guard/components/tree.api.md

@@ -201,9 +201,11 @@ export class KbqTreeBase<T> implements AfterContentChecked, CollectionViewer, On
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeBase<any>, never>;
 }
 
-// @public (undocumented)
+// @public
 export class KbqTreeCopyEvent<T> {
-    constructor(source: KbqTreeSelection, option: T);
+    constructor(source: KbqTreeSelection, option: T, event?: KeyboardEvent | undefined);
+    // (undocumented)
+    event?: KeyboardEvent | undefined;
     // (undocumented)
     option: T;
     // (undocumented)
@@ -562,7 +564,7 @@ export class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueAc
     // (undocumented)
     blur(): void;
     // (undocumented)
-    copyActiveOption(): void;
+    copyActiveOption(event: KeyboardEvent): void;
     // (undocumented)
     get disabled(): boolean;
     set disabled(rawValue: boolean);