Skip to content

Commit 6b5b4bd

Browse files
Alyar666Alyar666
authored
DataGrid: Fix Tab navigation through interactive elements in an editable cell (T1299278) (#31029)
Co-authored-by: Alyar <>
1 parent da40488 commit 6b5b4bd

File tree

9 files changed

+352
-69
lines changed

9 files changed

+352
-69
lines changed

‎e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/keyboardNavigation.functional.ts‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4959,3 +4959,262 @@ test('DataGrid with Pagination in master detail - Ctrl+Up on focused standalone
49594959
},
49604960
});
49614961
});
4962+
4963+
// T1299278
4964+
test('The row edit mode - Tab navigation through interactive elements in an editable cell when editCellTemplate is set', async (t) => {
4965+
// arrange
4966+
const dataGrid = new DataGrid('#container');
4967+
const dataCell = dataGrid.getDataCell(0, 0);
4968+
4969+
await dataGrid.apiEditRow(0);
4970+
4971+
// act - focus the first cell
4972+
await t.click(dataCell.element);
4973+
4974+
// assert
4975+
await t
4976+
.expect(dataCell.isEditCell).ok()
4977+
.expect(dataCell.isFocused).ok();
4978+
4979+
// act - navigate to the button of the second cell
4980+
await t.pressKey('tab');
4981+
4982+
// assert
4983+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-button').focused).ok();
4984+
4985+
// act - navigate to the editor of the second cell
4986+
await t.pressKey('tab');
4987+
4988+
// assert
4989+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-editor').focused).ok();
4990+
4991+
// act - navigate to the third cell
4992+
await t.pressKey('tab');
4993+
4994+
// assert
4995+
await t
4996+
.expect(dataGrid.getDataCell(0, 2).isEditCell).ok()
4997+
.expect(dataGrid.getDataCell(0, 2).isFocused).ok();
4998+
}).before(async () => {
4999+
await createWidget('dxDataGrid', {
5000+
width: 800,
5001+
dataSource: [
5002+
{
5003+
id: 0, field1: 'test1', field2: 'test2', field3: 'test3',
5004+
},
5005+
],
5006+
keyExpr: 'id',
5007+
editing: {
5008+
mode: 'row',
5009+
allowUpdating: true,
5010+
},
5011+
columns: [
5012+
'field1',
5013+
{
5014+
dataField: 'field2',
5015+
editCellTemplate: (cellElement) => {
5016+
$('<input type="button" value="My button" />')
5017+
.addClass('my-button')
5018+
.appendTo(cellElement);
5019+
5020+
$('<input type="text"/>')
5021+
.addClass('my-editor')
5022+
.appendTo(cellElement);
5023+
},
5024+
},
5025+
'field3',
5026+
],
5027+
});
5028+
});
5029+
5030+
// T1299278
5031+
test('The row edit mode - Shift + Tab navigation through interactive elements in an editable cell when editCellTemplate is set', async (t) => {
5032+
// arrange
5033+
const dataGrid = new DataGrid('#container');
5034+
const dataCell = dataGrid.getDataCell(0, 2);
5035+
5036+
await dataGrid.apiEditRow(0);
5037+
5038+
// act - focus the third cell
5039+
await t.click(dataCell.element);
5040+
5041+
// assert
5042+
await t
5043+
.expect(dataCell.isEditCell).ok()
5044+
.expect(dataCell.isFocused).ok();
5045+
5046+
// act - navigate to the editor of the second cell
5047+
await t.pressKey('shift+tab');
5048+
5049+
// assert
5050+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-editor').focused).ok();
5051+
5052+
// act - navigate to the button of the second cell
5053+
await t.pressKey('shift+tab');
5054+
5055+
// assert
5056+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-button').focused).ok();
5057+
5058+
// act - navigate to the first cell
5059+
await t.pressKey('shift+tab');
5060+
5061+
// assert
5062+
await t
5063+
.expect(dataGrid.getDataCell(0, 0).isEditCell).ok()
5064+
.expect(dataGrid.getDataCell(0, 0).isFocused).ok();
5065+
}).before(async () => {
5066+
await createWidget('dxDataGrid', {
5067+
width: 800,
5068+
dataSource: [
5069+
{
5070+
id: 0, field1: 'test1', field2: 'test2', field3: 'test3',
5071+
},
5072+
],
5073+
keyExpr: 'id',
5074+
editing: {
5075+
mode: 'row',
5076+
allowUpdating: true,
5077+
},
5078+
columns: [
5079+
'field1',
5080+
{
5081+
dataField: 'field2',
5082+
editCellTemplate: (cellElement) => {
5083+
$('<input type="button" value="My button" />')
5084+
.addClass('my-button')
5085+
.appendTo(cellElement);
5086+
5087+
$('<input type="text"/>')
5088+
.addClass('my-editor')
5089+
.appendTo(cellElement);
5090+
},
5091+
},
5092+
'field3',
5093+
],
5094+
});
5095+
});
5096+
5097+
// T1299278
5098+
test('The batch edit mode - Tab navigation through interactive elements in an editable cell when editCellTemplate is set', async (t) => {
5099+
// arrange
5100+
const dataGrid = new DataGrid('#container');
5101+
const dataCell = dataGrid.getDataCell(0, 0);
5102+
5103+
// act - focus the first cell
5104+
await t.click(dataCell.element);
5105+
5106+
// assert
5107+
await t
5108+
.expect(dataCell.isEditCell).ok()
5109+
.expect(dataCell.isFocused).ok();
5110+
5111+
// act - navigate to the button of the second cell
5112+
await t.pressKey('tab');
5113+
5114+
// assert
5115+
await t
5116+
.expect(dataGrid.getDataCell(0, 1).element.find('.my-button').focused).ok();
5117+
5118+
// act - navigate to the editor of the second cell
5119+
await t.pressKey('tab');
5120+
5121+
// assert
5122+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-editor').focused).ok();
5123+
5124+
// act - navigate to the third cell
5125+
await t.pressKey('tab');
5126+
5127+
// assert
5128+
await t
5129+
.expect(dataGrid.getDataCell(0, 2).isEditCell).ok()
5130+
.expect(dataGrid.getDataCell(0, 2).isFocused).ok();
5131+
}).before(async () => {
5132+
await createWidget('dxDataGrid', {
5133+
width: 800,
5134+
dataSource: [
5135+
{
5136+
id: 0, field1: 'test1', field2: 'test2', field3: 'test3',
5137+
},
5138+
],
5139+
keyExpr: 'id',
5140+
editing: {
5141+
mode: 'batch',
5142+
allowUpdating: true,
5143+
},
5144+
columns: [
5145+
'field1',
5146+
{
5147+
dataField: 'field2',
5148+
editCellTemplate: (cellElement) => {
5149+
$('<input type="button" value="My button" />')
5150+
.addClass('my-button')
5151+
.appendTo(cellElement);
5152+
5153+
$('<input type="text"/>')
5154+
.addClass('my-editor')
5155+
.appendTo(cellElement);
5156+
},
5157+
},
5158+
'field3',
5159+
],
5160+
});
5161+
});
5162+
5163+
// T1299278
5164+
test('The batch edit mode - Shift + Tab navigation through interactive elements in an editable cell when editCellTemplate is set', async (t) => {
5165+
// arrange
5166+
const dataGrid = new DataGrid('#container');
5167+
const dataCell = dataGrid.getDataCell(0, 2);
5168+
5169+
// act - focus the third cell
5170+
await t.click(dataCell.element);
5171+
5172+
// assert
5173+
await t
5174+
.expect(dataCell.isEditCell).ok()
5175+
.expect(dataCell.isFocused).ok();
5176+
5177+
// act - navigate to the button of the second cell
5178+
await t.pressKey('shift+tab');
5179+
5180+
// assert
5181+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-button').focused).ok();
5182+
5183+
// act - navigate to the first cell
5184+
await t.pressKey('shift+tab');
5185+
5186+
// assert
5187+
await t
5188+
.expect(dataGrid.getDataCell(0, 0).isEditCell).ok()
5189+
.expect(dataGrid.getDataCell(0, 0).isFocused).ok();
5190+
}).before(async () => {
5191+
await createWidget('dxDataGrid', {
5192+
width: 800,
5193+
dataSource: [
5194+
{
5195+
id: 0, field1: 'test1', field2: 'test2', field3: 'test3',
5196+
},
5197+
],
5198+
keyExpr: 'id',
5199+
editing: {
5200+
mode: 'batch',
5201+
allowUpdating: true,
5202+
},
5203+
columns: [
5204+
'field1',
5205+
{
5206+
dataField: 'field2',
5207+
editCellTemplate: (cellElement) => {
5208+
$('<input type="button" value="My button" />')
5209+
.addClass('my-button')
5210+
.appendTo(cellElement);
5211+
5212+
$('<input type="text"/>')
5213+
.addClass('my-editor')
5214+
.appendTo(cellElement);
5215+
},
5216+
},
5217+
'field3',
5218+
],
5219+
});
5220+
});

0 commit comments

Comments
 (0)