fix(list): multiple selection by keyboard on macos (#DS-2908) (#309)

Author: artembelik

packages/components-dev/list/template.html

@@ -54,7 +54,7 @@ <h2>Multiple selection: Keyboard</h2>
     multiple="keyboard"
     style="height: 100px; overflow-y: scroll"
     [autoSelect]="true"
-    [disabled]="true"
+    [disabled]="false"
     [(ngModel)]="multipleSelected"
     (selectionChange)="onSelectionChange($event)"
 >

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

@@ -465,7 +465,8 @@ export class KbqListSelection
         }
     }
 
-    onKeyDown(event: KeyboardEvent) {
+    /** Handles keydown events on the list. */
+    onKeyDown(event: KeyboardEvent): void {
         const keyCode = event.keyCode;
 
         if ([SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW].includes(keyCode) || isVerticalMovement(event)) {
@@ -508,7 +509,8 @@ export class KbqListSelection
             this.setSelectedOptionsByKey(
                 this.keyManager.activeItem as KbqListOption,
                 hasModifierKey(event, 'shiftKey'),
-                hasModifierKey(event, 'ctrlKey')
+                // ctrlKey is for Windows, metaKey is for MacOS
+                hasModifierKey(event, 'ctrlKey') || hasModifierKey(event, 'metaKey')
             );
         }
     }
@@ -825,15 +827,17 @@ export class KbqListOption implements OnDestroy, OnInit, IFocusableOption, KbqTi
         return clientRects.length ? clientRects[0].height : 0;
     }
 
-    handleClick($event) {
+    /** Handles click events on the list option. */
+    handleClick($event: MouseEvent): void {
         if (this.disabled) {
             return;
         }
 
         this.listSelection.setSelectedOptionsByClick(
             this,
             hasModifierKey($event, 'shiftKey'),
-            hasModifierKey($event, 'ctrlKey')
+            // ctrlKey is for Windows, metaKey is for MacOS
+            hasModifierKey($event, 'ctrlKey') || hasModifierKey($event, 'metaKey')
         );
     }
 

tools/public_api_guard/components/list.api.md

@@ -109,8 +109,7 @@ export class KbqListOption implements OnDestroy, OnInit, IFocusableOption, KbqTi
     getLabel(): any;
     // (undocumented)
     readonly group: KbqOptgroup;
-    // (undocumented)
-    handleClick($event: any): void;
+    handleClick($event: MouseEvent): void;
     // (undocumented)
     hasFocus: boolean;
     // (undocumented)
@@ -215,7 +214,6 @@ export class KbqListSelection extends KbqListSelectionMixinBase implements CanDi
     set noUnselectLast(value: boolean);
     // (undocumented)
     readonly onCopy: EventEmitter<KbqListCopyEvent<KbqListOption>>;
-    // (undocumented)
     onKeyDown(event: KeyboardEvent): void;
     // (undocumented)
     readonly onSelectAll: EventEmitter<KbqListSelectAllEvent<KbqListOption>>;