Skip to content

Commit 981f35b

Browse files
Alyar666Alyar666
authored
DataGrid: Fix Tab navigation through interactive elements in an editable cell (T1299278) (DevExpress#31011)
Co-authored-by: Alyar <>
1 parent 1ac04c7 commit 981f35b

File tree

9 files changed

+346
-68
lines changed

9 files changed

+346
-68
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
@@ -5959,3 +5959,262 @@ test.meta({ unstable: true })('Focus events should be called when pressing the C
59595959
delete (window as any).focusedEventsTestData;
59605960
})();
59615961
});
5962+
5963+
// T1299278
5964+
test('The row edit mode - Tab navigation through interactive elements in an editable cell when editCellTemplate is set', async (t) => {
5965+
// arrange
5966+
const dataGrid = new DataGrid('#container');
5967+
const dataCell = dataGrid.getDataCell(0, 0);
5968+
5969+
await dataGrid.apiEditRow(0);
5970+
5971+
// act - focus the first cell
5972+
await t.click(dataCell.element);
5973+
5974+
// assert
5975+
await t
5976+
.expect(dataCell.isEditCell).ok()
5977+
.expect(dataCell.isFocused).ok();
5978+
5979+
// act - navigate to the button of the second cell
5980+
await t.pressKey('tab');
5981+
5982+
// assert
5983+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-button').focused).ok();
5984+
5985+
// act - navigate to the editor of the second cell
5986+
await t.pressKey('tab');
5987+
5988+
// assert
5989+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-editor').focused).ok();
5990+
5991+
// act - navigate to the third cell
5992+
await t.pressKey('tab');
5993+
5994+
// assert
5995+
await t
5996+
.expect(dataGrid.getDataCell(0, 2).isEditCell).ok()
5997+
.expect(dataGrid.getDataCell(0, 2).isFocused).ok();
5998+
}).before(async () => {
5999+
await createWidget('dxDataGrid', {
6000+
width: 800,
6001+
dataSource: [
6002+
{
6003+
id: 0, field1: 'test1', field2: 'test2', field3: 'test3',
6004+
},
6005+
],
6006+
keyExpr: 'id',
6007+
editing: {
6008+
mode: 'row',
6009+
allowUpdating: true,
6010+
},
6011+
columns: [
6012+
'field1',
6013+
{
6014+
dataField: 'field2',
6015+
editCellTemplate: (cellElement) => {
6016+
$('<input type="button" value="My button" />')
6017+
.addClass('my-button')
6018+
.appendTo(cellElement);
6019+
6020+
$('<input type="text"/>')
6021+
.addClass('my-editor')
6022+
.appendTo(cellElement);
6023+
},
6024+
},
6025+
'field3',
6026+
],
6027+
});
6028+
});
6029+
6030+
// T1299278
6031+
test('The row edit mode - Shift + Tab navigation through interactive elements in an editable cell when editCellTemplate is set', async (t) => {
6032+
// arrange
6033+
const dataGrid = new DataGrid('#container');
6034+
const dataCell = dataGrid.getDataCell(0, 2);
6035+
6036+
await dataGrid.apiEditRow(0);
6037+
6038+
// act - focus the third cell
6039+
await t.click(dataCell.element);
6040+
6041+
// assert
6042+
await t
6043+
.expect(dataCell.isEditCell).ok()
6044+
.expect(dataCell.isFocused).ok();
6045+
6046+
// act - navigate to the editor of the second cell
6047+
await t.pressKey('shift+tab');
6048+
6049+
// assert
6050+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-editor').focused).ok();
6051+
6052+
// act - navigate to the button of the second cell
6053+
await t.pressKey('shift+tab');
6054+
6055+
// assert
6056+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-button').focused).ok();
6057+
6058+
// act - navigate to the first cell
6059+
await t.pressKey('shift+tab');
6060+
6061+
// assert
6062+
await t
6063+
.expect(dataGrid.getDataCell(0, 0).isEditCell).ok()
6064+
.expect(dataGrid.getDataCell(0, 0).isFocused).ok();
6065+
}).before(async () => {
6066+
await createWidget('dxDataGrid', {
6067+
width: 800,
6068+
dataSource: [
6069+
{
6070+
id: 0, field1: 'test1', field2: 'test2', field3: 'test3',
6071+
},
6072+
],
6073+
keyExpr: 'id',
6074+
editing: {
6075+
mode: 'row',
6076+
allowUpdating: true,
6077+
},
6078+
columns: [
6079+
'field1',
6080+
{
6081+
dataField: 'field2',
6082+
editCellTemplate: (cellElement) => {
6083+
$('<input type="button" value="My button" />')
6084+
.addClass('my-button')
6085+
.appendTo(cellElement);
6086+
6087+
$('<input type="text"/>')
6088+
.addClass('my-editor')
6089+
.appendTo(cellElement);
6090+
},
6091+
},
6092+
'field3',
6093+
],
6094+
});
6095+
});
6096+
6097+
// T1299278
6098+
test('The batch edit mode - Tab navigation through interactive elements in an editable cell when editCellTemplate is set', async (t) => {
6099+
// arrange
6100+
const dataGrid = new DataGrid('#container');
6101+
const dataCell = dataGrid.getDataCell(0, 0);
6102+
6103+
// act - focus the first cell
6104+
await t.click(dataCell.element);
6105+
6106+
// assert
6107+
await t
6108+
.expect(dataCell.isEditCell).ok()
6109+
.expect(dataCell.isFocused).ok();
6110+
6111+
// act - navigate to the button of the second cell
6112+
await t.pressKey('tab');
6113+
6114+
// assert
6115+
await t
6116+
.expect(dataGrid.getDataCell(0, 1).element.find('.my-button').focused).ok();
6117+
6118+
// act - navigate to the editor of the second cell
6119+
await t.pressKey('tab');
6120+
6121+
// assert
6122+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-editor').focused).ok();
6123+
6124+
// act - navigate to the third cell
6125+
await t.pressKey('tab');
6126+
6127+
// assert
6128+
await t
6129+
.expect(dataGrid.getDataCell(0, 2).isEditCell).ok()
6130+
.expect(dataGrid.getDataCell(0, 2).isFocused).ok();
6131+
}).before(async () => {
6132+
await createWidget('dxDataGrid', {
6133+
width: 800,
6134+
dataSource: [
6135+
{
6136+
id: 0, field1: 'test1', field2: 'test2', field3: 'test3',
6137+
},
6138+
],
6139+
keyExpr: 'id',
6140+
editing: {
6141+
mode: 'batch',
6142+
allowUpdating: true,
6143+
},
6144+
columns: [
6145+
'field1',
6146+
{
6147+
dataField: 'field2',
6148+
editCellTemplate: (cellElement) => {
6149+
$('<input type="button" value="My button" />')
6150+
.addClass('my-button')
6151+
.appendTo(cellElement);
6152+
6153+
$('<input type="text"/>')
6154+
.addClass('my-editor')
6155+
.appendTo(cellElement);
6156+
},
6157+
},
6158+
'field3',
6159+
],
6160+
});
6161+
});
6162+
6163+
// T1299278
6164+
test('The batch edit mode - Shift + Tab navigation through interactive elements in an editable cell when editCellTemplate is set', async (t) => {
6165+
// arrange
6166+
const dataGrid = new DataGrid('#container');
6167+
const dataCell = dataGrid.getDataCell(0, 2);
6168+
6169+
// act - focus the third cell
6170+
await t.click(dataCell.element);
6171+
6172+
// assert
6173+
await t
6174+
.expect(dataCell.isEditCell).ok()
6175+
.expect(dataCell.isFocused).ok();
6176+
6177+
// act - navigate to the button of the second cell
6178+
await t.pressKey('shift+tab');
6179+
6180+
// assert
6181+
await t.expect(dataGrid.getDataCell(0, 1).element.find('.my-button').focused).ok();
6182+
6183+
// act - navigate to the first cell
6184+
await t.pressKey('shift+tab');
6185+
6186+
// assert
6187+
await t
6188+
.expect(dataGrid.getDataCell(0, 0).isEditCell).ok()
6189+
.expect(dataGrid.getDataCell(0, 0).isFocused).ok();
6190+
}).before(async () => {
6191+
await createWidget('dxDataGrid', {
6192+
width: 800,
6193+
dataSource: [
6194+
{
6195+
id: 0, field1: 'test1', field2: 'test2', field3: 'test3',
6196+
},
6197+
],
6198+
keyExpr: 'id',
6199+
editing: {
6200+
mode: 'batch',
6201+
allowUpdating: true,
6202+
},
6203+
columns: [
6204+
'field1',
6205+
{
6206+
dataField: 'field2',
6207+
editCellTemplate: (cellElement) => {
6208+
$('<input type="button" value="My button" />')
6209+
.addClass('my-button')
6210+
.appendTo(cellElement);
6211+
6212+
$('<input type="text"/>')
6213+
.addClass('my-editor')
6214+
.appendTo(cellElement);
6215+
},
6216+
},
6217+
'field3',
6218+
],
6219+
});
6220+
});

0 commit comments

Comments
 (0)