Skip to content

Commit

Permalink
[ACS-8247] Fixed empty context menu for DataTable row (#9999)
Browse files Browse the repository at this point in the history
* [ACS-8247] fixed empty context menu of datatable row

* [ACS-8247] replace selector on attribute
  • Loading branch information
nikita-web-ua authored Aug 6, 2024
1 parent cc6e679 commit c9b8059
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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 }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down

0 comments on commit c9b8059

Please sign in to comment.