diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts
index 335637884d..1c29ec3733 100644
--- a/lib/core/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { SimpleChange, NO_ERRORS_SCHEMA, QueryList } from '@angular/core';
+import { SimpleChange, NO_ERRORS_SCHEMA, QueryList, Component, TemplateRef, ViewChild } from '@angular/core';
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { MatCheckboxChange } from '@angular/material';
import { DataColumn } from '../../data/data-column.model';
@@ -29,6 +29,13 @@ import { CoreTestingModule } from '../../../testing/core.testing.module';
import { DataColumnListComponent } from '../../../data-column/data-column-list.component';
import { DataColumnComponent } from '../../../data-column/data-column.component';
+@Component({selector: 'adf-custom-column-template-component', template: `
+
+`})
+class CustomColumnTemplateComponent {
+ @ViewChild('tmplRef') templateRef: TemplateRef;
+}
+
class FakeDataRow implements DataRow {
isDropTarget = false;
isSelected = true;
@@ -1127,15 +1134,18 @@ describe('Accesibility', () => {
let fixture: ComponentFixture;
let dataTable: DataTableComponent;
let element: any;
+ let columnCustomTemplate: TemplateRef;
setupTestBed({
imports: [
CoreTestingModule
],
+ declarations: [CustomColumnTemplateComponent],
schemas: [NO_ERRORS_SCHEMA]
});
beforeEach(() => {
+ columnCustomTemplate = TestBed.createComponent(CustomColumnTemplateComponent).componentInstance.templateRef;
fixture = TestBed.createComponent(DataTableComponent);
dataTable = fixture.componentInstance;
element = fixture.debugElement.nativeElement;
@@ -1330,4 +1340,42 @@ describe('Accesibility', () => {
expect(document.activeElement.getAttribute('data-automation-id')).toBe('datatable-row-1');
});
+
+ it('should remove cell focus when [focus] is set to false', () => {
+ dataTable.showHeader = false;
+ const dataRows = [ { name: 'name1' } ];
+
+ dataTable.data = new ObjectDataTableAdapter([],
+ [new ObjectDataColumn({ key: 'name', template: columnCustomTemplate, focus: false })]
+ );
+
+ dataTable.ngOnChanges({
+ rows: new SimpleChange(null, dataRows, false)
+ });
+
+ fixture.detectChanges();
+ dataTable.ngAfterViewInit();
+
+ const cell = document.querySelector('.adf-datatable-row[data-automation-id="datatable-row-0"] .adf-cell-value');
+ expect(cell.getAttribute('tabindex')).toBe(null);
+ });
+
+ it('should allow element focus when [focus] is set to true', () => {
+ dataTable.showHeader = false;
+ const dataRows = [ { name: 'name1' } ];
+
+ dataTable.data = new ObjectDataTableAdapter([],
+ [new ObjectDataColumn({ key: 'name', template: columnCustomTemplate, focus: true })]
+ );
+
+ dataTable.ngOnChanges({
+ rows: new SimpleChange(null, dataRows, false)
+ });
+
+ fixture.detectChanges();
+ dataTable.ngAfterViewInit();
+
+ const cell = document.querySelector('.adf-datatable-row[data-automation-id="datatable-row-0"] .adf-cell-value');
+ expect(cell.getAttribute('tabindex')).toBe('0');
+ });
});