ACS-8036 prevent bulk dropdown selection and action on Tab, remove re…

…dundant async
Alfresco · Aug 12, 2024 · d7a3c24 · d7a3c24
1 parent 617a74f
commit d7a3c24
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 14 deletions.
diff --git a/...aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html b/...aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html
@@ -11,6 +11,7 @@
     panelClass="aca-bulk-actions-select"
     disableOptionCentering
     data-automation-id="aca-bulk-actions-dropdown"
+    (keydown)="onKeyDown($event)"
   >
     <mat-select-trigger>
       <adf-icon
@@ -27,7 +28,7 @@
       [value]="option"
       [title]="option.tooltip | translate"
       [attr.data-automation-id]="option.id"
-      (onSelectionChange)="runAction({event: $event, actionOption: option})"
+      (click)="runAction(option)"
     >
       <adf-icon
         *ngIf="option.icon"

diff --git a/...-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.spec.ts b/...-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.spec.ts
@@ -191,13 +191,29 @@ describe('BulkActionsDropdownComponent', () => {
         await selectOptionFromDropdown(0);
         fixture.detectChanges();
 
-        expect(component.bulkSelectControl.value).toEqual(mockItem.id);
+        expect(component.bulkSelectControl.value).toEqual(mockItem);
 
         extensionService.bulkActionExecuted();
         fixture.detectChanges();
 
         expect(component.bulkSelectControl.value).toBeNull();
       });
+
+      it('should select option and run action on Enter', () => {
+        spyOn(component, 'runAction');
+        const selectComponent = getElement('aca-bulk-actions-dropdown');
+        selectComponent.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+
+        expect(component.runAction).toHaveBeenCalled();
+      });
+
+      it('should NOT select option and run action on Tab', () => {
+        spyOn(component, 'runAction');
+        const selectComponent = getElement('aca-bulk-actions-dropdown');
+        selectComponent.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+
+        expect(component.runAction).not.toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/...s/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.ts b/...s/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.ts
@@ -34,12 +34,6 @@ import { IconComponent, TranslationService } from '@alfresco/adf-core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { switchMap, takeUntil } from 'rxjs/operators';
 import { AppExtensionService } from '@alfresco/aca-shared';
-import { MatOptionSelectionChange } from '@angular/material/core';
-
-export interface BulkActionsDropdownSelectionEvent {
-  event: MatOptionSelectionChange;
-  actionOption: ContentActionRef;
-}
 
 @Component({
   standalone: true,
@@ -98,11 +92,18 @@ export class BulkActionsDropdownComponent implements OnInit, OnDestroy {
     this.onDestroy$.complete();
   }
 
-  runAction(actionsDropdownEvent: BulkActionsDropdownSelectionEvent) {
-    if (actionsDropdownEvent.event.source.selected) {
-      this.extensions.runActionById(actionsDropdownEvent.actionOption.actions.click, {
-        focusedElementOnCloseSelector: '.adf-context-menu-source'
-      });
+  runAction(actionOption: ContentActionRef) {
+    this.extensions.runActionById(actionOption.actions.click, {
+      focusedElementOnCloseSelector: '.adf-context-menu-source'
+    });
+  }
+
+  onKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Tab') {
+      this.bulkSelectControl.setValue(null);
+    }
+    if (event.key === 'Enter') {
+      this.runAction(this.bulkSelectControl.value);
     }
   }
 }
diff --git a/...onents/dl-custom-components/datatable-cell-badges/datatable-cell-badges.component.spec.ts b/...onents/dl-custom-components/datatable-cell-badges/datatable-cell-badges.component.spec.ts
@@ -85,7 +85,7 @@ describe('DatatableCellBadgesComponent', () => {
     component.node = mockNode;
   });
 
-  it('should get badges when component initializes', async () => {
+  it('should get badges when component initializes', () => {
     spyOn(appExtensionService, 'getBadges').and.returnValue(of([mockGetBadgesResponse]));
     component.ngOnInit();
     fixture.detectChanges();