[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
Alfresco · Aug 6, 2024 · c9b8059 · c9b8059
1 parent cc6e679
commit c9b8059
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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;