From c9b8059b474a44e770120d9d76fb65965dc48c58 Mon Sep 17 00:00:00 2001
From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com>
Date: Tue, 6 Aug 2024 09:42:16 +0200
Subject: [PATCH] [ACS-8247] Fixed empty context menu for DataTable row (#9999)

* [ACS-8247] fixed empty context menu of datatable row

* [ACS-8247] replace selector on attribute
---
 .../datatable/datatable.component.html        |  8 +++-
 .../datatable/datatable.component.scss        |  4 ++
 .../datatable/datatable.component.spec.ts     | 42 +++++++++++++++++++
 .../datatable/datatable.component.ts          |  7 ++++
 4 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
index d4a46a8bdf..0dec3aa6ec 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -182,7 +182,12 @@
                     </mat-menu>
                 </div>
 
-                <label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single">
+                <label *ngIf="multiselect"
+                       (keydown.enter)="onEnterKeyPressed(row, $any($event))"
+                       (click)="onCheckboxLabelClick(row, $event)"
+                       [for]="'select-file-' + idx"
+                       class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single"
+                       tabindex="0">
                     <mat-checkbox
                         [id]="'select-file-' + idx"
                         [class.adf-datatable-checkbox-selected]="row.isSelected"
@@ -191,6 +196,7 @@
                         [attr.aria-checked]="row.isSelected"
                         [aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate"
                         role="checkbox"
+                        data-adf-datatable-row-checkbox
                         (change)="onCheckboxChange(row, $event)"
                         class="adf-checkbox-sr-only">
                         {{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
index 1259a90ba7..f5af0349db 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
@@ -151,6 +151,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             &:last-child {
                 border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
             }
+
+            label {
+                cursor: inherit;
+            }
         }
     }
 
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
index ff1fab6d07..9432f23838 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
@@ -923,6 +923,48 @@ describe('DataTable', () => {
         expect(rows[1].isSelected).toBe(true);
     });
 
+    it('should call onRowClick when checkbox label clicked and target is not checkbox', () => {
+        dataTable.data = new ObjectDataTableAdapter(
+            [{ name: '1' }, { name: '2' }],
+            [new ObjectDataColumn({ key: 'name', sortable: false }), new ObjectDataColumn({ key: 'other', sortable: false })]
+        );
+        const rows = dataTable.data.getRows();
+        const event = new MouseEvent('click');
+        Object.defineProperty(event, 'target', { value: { hasAttribute: () => null, closest: () => null} });
+        spyOn(dataTable, 'onRowClick');
+
+        dataTable.onCheckboxLabelClick(rows[0], event);
+        expect(dataTable.onRowClick).toHaveBeenCalledWith(rows[0], event);
+    });
+
+    it('should not call onRowClick when checkbox label clicked and target is checkbox', () => {
+        const data = new ObjectDataTableAdapter([{}, {}], []);
+        const rows = data.getRows();
+        const event = new MouseEvent('click');
+        Object.defineProperty(event, 'target', {
+            value: {
+                getAttribute: (attr: string) => attr === 'data-adf-datatable-row-checkbox' ? 'data-adf-datatable-row-checkbox' : null,
+                hasAttribute: (attr: string) => attr === 'data-adf-datatable-row-checkbox',
+                closest: () => null
+            }
+        });
+        spyOn(dataTable, 'onRowClick');
+
+        dataTable.onCheckboxLabelClick(rows[0], event);
+        expect(dataTable.onRowClick).not.toHaveBeenCalled();
+    });
+
+    it('should not call onRowClick when checkbox label clicked and target is inside checkbox', () => {
+        const data = new ObjectDataTableAdapter([{}, {}], []);
+        const rows = data.getRows();
+        const event = new MouseEvent('click');
+        Object.defineProperty(event, 'target', { value: { hasAttribute: () => null, closest: () => 'element'} });
+        spyOn(dataTable, 'onRowClick');
+
+        dataTable.onCheckboxLabelClick(rows[0], event);
+        expect(dataTable.onRowClick).not.toHaveBeenCalled();
+    });
+
     it('should require multiselect option to toggle row state', () => {
         const data = new ObjectDataTableAdapter([{}, {}, {}], []);
         const rows = data.getRows();
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
index fef1762aa8..f9ebc84d4d 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
@@ -712,6 +712,13 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
         }
     }
 
+    onCheckboxLabelClick(row: DataRow, event: MouseEvent) {
+        const target = event.target as HTMLElement;
+        if (!(target.hasAttribute('data-adf-datatable-row-checkbox') || target.closest('[data-adf-datatable-row-checkbox]'))) {
+            this.onRowClick(row, event);
+        }
+    }
+
     onCheckboxChange(row: DataRow, event: MatCheckboxChange) {
         const newValue = event.checked;