diff --git a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx index b0c31797af376..3b4c67048c675 100644 --- a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx @@ -184,7 +184,7 @@ describe(' - Clipboard', () => { getData: () => pasteText, }; - fireEvent.keyDown(cell, { key: 'v', code: 'KeyV', keyCode: 86, ctrlKey: true }); // Ctrl+V + fireEvent.keyDown(cell, { key: 'v', keyCode: 86, ctrlKey: true }); // Ctrl+V document.activeElement!.dispatchEvent(pasteEvent); } @@ -196,7 +196,7 @@ describe(' - Clipboard', () => { apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); - fireEvent.keyDown(cell, { key: 'v', code: 'KeyV', keyCode: 86, [key]: true }); // Ctrl+V + fireEvent.keyDown(cell, { key: 'v', keyCode: 86, [key]: true }); // Ctrl+V expect(listener.callCount).to.equal(0); }); }); @@ -209,7 +209,7 @@ describe(' - Clipboard', () => { apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); - fireEvent.keyDown(cell, { key: 'v', code: 'KeyV', keyCode: 86, [key]: true }); // Ctrl+V + fireEvent.keyDown(cell, { key: 'v', keyCode: 86, [key]: true }); // Ctrl+V expect(listener.callCount).to.equal(0); }); }); diff --git a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx index 65292381e5fd9..b86470859ce5e 100644 --- a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx @@ -890,7 +890,7 @@ describe(' - Cell editing', () => { apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 0); fireUserEvent.mousePress(cell); - fireEvent.keyDown(cell, { key: 'a' }); // A + fireEvent.keyDown(cell, { key: 'a', keyCode: 65 }); // A expect(listener.callCount).to.equal(0); }); @@ -901,7 +901,7 @@ describe(' - Cell editing', () => { apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); - fireEvent.keyDown(cell, { key: 'a', [key]: true }); // for example Ctrl + A, copy + fireEvent.keyDown(cell, { key: 'a', keyCode: 65, [key]: true }); // for example Ctrl + A, copy expect(listener.callCount).to.equal(0); }); }); @@ -912,7 +912,7 @@ describe(' - Cell editing', () => { apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); - fireEvent.keyDown(cell, { key: 'a', shiftKey: true }); // Print A in uppercase + fireEvent.keyDown(cell, { key: 'a', keyCode: 65, shiftKey: true }); // Print A in uppercase expect(listener.callCount).to.equal(1); }); @@ -922,7 +922,7 @@ describe(' - Cell editing', () => { apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); - fireEvent.keyDown(cell, { key: 'v', code: 'KeyV', keyCode: 86, ctrlKey: true }); // Ctrl+V + fireEvent.keyDown(cell, { key: 'v', keyCode: 86, ctrlKey: true }); // Ctrl+V expect(listener.callCount).to.equal(1); }); diff --git a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx index d9fdb1d8f65ca..56894a1d406c4 100644 --- a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx @@ -874,7 +874,7 @@ describe(' - Row editing', () => { apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); - fireEvent.keyDown(cell, { key: 'a', [key]: true }); + fireEvent.keyDown(cell, { key: 'a', keyCode: 65, [key]: true }); expect(listener.callCount).to.equal(0); }); }); @@ -885,7 +885,7 @@ describe(' - Row editing', () => { apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); - fireEvent.keyDown(cell, { key: 'a', shiftKey: true }); + fireEvent.keyDown(cell, { key: 'a', keyCode: 65, shiftKey: true }); expect(listener.callCount).to.equal(1); }); @@ -905,7 +905,7 @@ describe(' - Row editing', () => { apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); - fireEvent.keyDown(cell, { key: 'v', code: 'KeyV', keyCode: 86, ctrlKey: true }); + fireEvent.keyDown(cell, { key: 'v', keyCode: 86, ctrlKey: true }); expect(listener.callCount).to.equal(1); }); diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts index d50883fa5c366..9586053329947 100644 --- a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts +++ b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts @@ -673,7 +673,7 @@ export const useGridRowSelection = ( return; } - if (event.key === 'a' && (event.ctrlKey || event.metaKey)) { + if (String.fromCharCode(event.keyCode) === 'A' && (event.ctrlKey || event.metaKey)) { event.preventDefault(); selectRows(apiRef.current.getAllRowIds(), true); } diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx index 901cd1983c450..d325d56d82aff 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx @@ -24,7 +24,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -45,7 +44,7 @@ describe(' - Editing', () => { view.selectSection('month'); // Select all sections - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireEvent.keyDown(input, { key: 'Delete' }); expectFieldValueV6(input, 'MMMM YYYY – MMMM YYYY'); @@ -67,7 +66,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -93,7 +91,7 @@ describe(' - Editing', () => { expectFieldValueV6(input, 'January YYYY – MMMM YYYY'); // Select all sections - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireEvent.keyDown(input, { key: 'Delete' }); expectFieldValueV6(input, 'MMMM YYYY – MMMM YYYY'); @@ -114,7 +112,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -137,7 +134,7 @@ describe(' - Editing', () => { view.selectSection('month'); // Select all sections - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireEvent.keyDown(input, { key: 'Delete' }); expect(onChangeV6.callCount).to.equal(0); @@ -279,7 +276,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -300,7 +296,7 @@ describe(' - Editing', () => { view.selectSection('month'); // Select all sections - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireEvent.change(input, { target: { value: '' } }); expectFieldValueV6(input, 'MMMM YYYY – MMMM YYYY'); @@ -322,7 +318,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -348,7 +343,7 @@ describe(' - Editing', () => { expectFieldValueV6(input, 'January YYYY – MMMM YYYY'); // Select all sections - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireEvent.change(input, { target: { value: '' } }); expectFieldValueV6(input, 'MMMM YYYY – MMMM YYYY'); @@ -369,7 +364,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -392,7 +386,7 @@ describe(' - Editing', () => { view.selectSection('month'); // Select all sections - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireEvent.change(input, { target: { value: 'Delete' } }); expect(onChangeV6.callCount).to.equal(0); diff --git a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx index 8d8c5bef699bf..e96247fbbce29 100644 --- a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx @@ -10,7 +10,7 @@ import { } from 'test/utils/pickers'; import { fireUserEvent } from 'test/utils/fireUserEvent'; -describe(' - Editing', () => { +describe.only(' - Editing', () => { describeAdapters('key: ArrowDown', DateField, ({ adapter, testFieldKeyPress }) => { it("should set the year to today's value when no value is provided (ArrowDown)", () => { testFieldKeyPress({ @@ -271,7 +271,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -292,7 +291,7 @@ describe(' - Editing', () => { view.selectSection('month'); // Select all sections - fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireUserEvent.keyPress(input, { key: 'Delete' }); expectFieldValueV6(input, 'MMMM YYYY'); @@ -314,7 +313,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -340,7 +338,7 @@ describe(' - Editing', () => { expectFieldValueV6(input, 'January YYYY'); // Select all sections - fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireUserEvent.keyPress(input, { key: 'Delete' }); expectFieldValueV6(input, 'MMMM YYYY'); @@ -410,7 +408,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -433,7 +430,7 @@ describe(' - Editing', () => { view.selectSection('month'); // Select all sections - fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireUserEvent.keyPress(input, { key: 'Delete' }); expect(onChangeV6.callCount).to.equal(0); @@ -1223,7 +1220,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -1244,7 +1240,7 @@ describe(' - Editing', () => { view.selectSection('month'); // Select all sections - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireEvent.change(input, { target: { value: '' } }); expectFieldValueV6(input, 'MMMM YYYY'); @@ -1264,7 +1260,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -1286,7 +1281,7 @@ describe(' - Editing', () => { expectFieldValueV6(input, 'January YYYY'); // Select all sections - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireEvent.change(input, { target: { value: '' } }); expectFieldValueV6(input, 'MMMM YYYY'); @@ -1460,7 +1455,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -1483,7 +1477,7 @@ describe(' - Editing', () => { view.selectSection('month'); // Select all sections - fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', keyCode: 65, ctrlKey: true }); firePasteEventV6(input, '09/16/2022'); @@ -1503,7 +1497,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -1524,7 +1517,7 @@ describe(' - Editing', () => { view.selectSection('month'); // Select all sections - fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', keyCode: 65, ctrlKey: true }); firePasteEventV6(input, '09/16/2022'); @@ -1544,7 +1537,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -1563,7 +1555,7 @@ describe(' - Editing', () => { view.selectSection('month'); // Select all sections - fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', keyCode: 65, ctrlKey: true }); firePasteEventV6(input, 'Some invalid content'); expectFieldValueV6(input, 'MM/DD/YYYY'); @@ -1585,7 +1577,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -1607,7 +1598,7 @@ describe(' - Editing', () => { view.selectSection('year'); // Select all sections - fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', keyCode: 65, ctrlKey: true }); firePasteEventV6(input, `Escaped 2014`); expect(onChangeV6.callCount).to.equal(1); @@ -1629,7 +1620,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -1652,7 +1642,7 @@ describe(' - Editing', () => { view.selectSection('month'); // Select all sections - fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', keyCode: 65, ctrlKey: true }); firePasteEventV6(input, '09/16/2022'); expect(onChangeV6.callCount).to.equal(0); @@ -1784,7 +1774,7 @@ describe(' - Editing', () => { expectFieldValueV7(view.getSectionsContainer(), '12/02/2018'); // Select all sections - fireEvent.keyDown(view.getActiveSection(1), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(1), { key: 'a', keyCode: 65, ctrlKey: true }); firePasteEventV7(view.getSectionsContainer(), '09/16/2022'); expectFieldValueV7(view.getSectionsContainer(), '09/16/2022'); @@ -1868,7 +1858,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -1941,7 +1930,6 @@ describe(' - Editing', () => { view.selectSection('month'); fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -1979,7 +1967,7 @@ describe(' - Editing', () => { const input = getTextbox(); view.selectSection('month'); - fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireEvent.change(input, { target: { value: '' } }); fireUserEvent.keyPress(input, { key: 'ArrowLeft' }); @@ -2332,7 +2320,6 @@ describe(' - Editing', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -2350,7 +2337,7 @@ describe(' - Editing', () => { const input = getTextbox(); // Select all sections - fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', keyCode: 65, ctrlKey: true }); // When all sections are selected, the value only contains the key pressed fireEvent.change(input, { target: { value: '9' } }); diff --git a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx index 62c6f4acb6aea..6ef20dec53f36 100644 --- a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx @@ -172,7 +172,6 @@ describe(' - Selection', () => { view.selectSection('month'); fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -184,7 +183,7 @@ describe(' - Selection', () => { view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); view.selectSection('month'); - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); }); @@ -197,7 +196,6 @@ describe(' - Selection', () => { view.selectSection('year'); fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -212,7 +210,7 @@ describe(' - Selection', () => { }); const input = getTextbox(); view.selectSection('year'); - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); expect(getCleanedSelectedContent()).to.equal('- YYYY'); }); }); @@ -262,7 +260,6 @@ describe(' - Selection', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -279,7 +276,7 @@ describe(' - Selection', () => { view.selectSection('month'); // Select all sections - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); fireEvent.keyDown(input, { key: 'ArrowRight' }); @@ -332,7 +329,6 @@ describe(' - Selection', () => { // Select all sections fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -349,7 +345,7 @@ describe(' - Selection', () => { view.selectSection('month'); // Select all sections - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); fireEvent.keyDown(input, { key: 'ArrowLeft' }); diff --git a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx index ffd00f4e201f0..f1c4c0811bd37 100644 --- a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx +++ b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx @@ -681,7 +681,6 @@ describe(' - Editing', () => { view.selectSection('hours'); fireEvent.keyDown(view.getActiveSection(0), { key: 'a', - code: 'KeyQ', keyCode: 65, ctrlKey: true, }); @@ -709,7 +708,7 @@ describe(' - Editing', () => { const input = getTextbox(); view.selectSection('hours'); - fireEvent.keyDown(input, { key: 'a', code: 'KeyQ', keyCode: 65, ctrlKey: true }); + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); fireEvent.change(input, { target: { value: '' } }); fireEvent.keyDown(input, { key: 'ArrowLeft' }); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx index 7dab02bcf8b2b..2db89b9501b1c 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx @@ -1044,7 +1044,11 @@ describeTreeView< act(() => { view.getItemRoot('1').focus(); }); - fireEvent.keyDown(view.getItemRoot('1'), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getItemRoot('1'), { + key: 'a', + keyCode: 65, + ctrlKey: true, + }); expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2', '3', '4']); }); @@ -1058,7 +1062,11 @@ describeTreeView< act(() => { view.getItemRoot('1').focus(); }); - fireEvent.keyDown(view.getItemRoot('1'), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getItemRoot('1'), { + key: 'a', + keyCode: 65, + ctrlKey: true, + }); expect(view.getSelectedTreeItems()).to.deep.equal([]); }); @@ -1076,7 +1084,11 @@ describeTreeView< act(() => { view.getItemRoot('1').focus(); }); - fireEvent.keyDown(view.getItemRoot('1'), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getItemRoot('1'), { + key: 'a', + keyCode: 65, + ctrlKey: true, + }); expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3', '4']); }); }); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts index 88bad3cccb212..5b2739b6f9887 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts @@ -16,7 +16,7 @@ import { import { hasPlugin } from '../../utils/plugins'; import { useTreeViewLabel } from '../useTreeViewLabel'; -function isPrintableCharacter(string: string) { +function isPrintableKey(string: string) { return !!string && string.length === 1 && !!string.match(/\S/); } @@ -256,7 +256,10 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< // Multi select behavior when pressing Ctrl + a // Selects all the items - case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection: { + case String.fromCharCode(event.keyCode) === 'A' && + ctrlPressed && + params.multiSelect && + !params.disableSelection: { instance.selectAllNavigableItems(event); event.preventDefault(); break; @@ -264,7 +267,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< // Type-ahead // TODO: Support typing multiple characters - case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key): { + case !ctrlPressed && !event.shiftKey && isPrintableKey(key): { const matchingItem = getFirstMatchingItem(itemId, key); if (matchingItem != null) { instance.focusItem(event, matchingItem); diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx index 8dc7de297623a..51e07dcabc5ab 100644 --- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx +++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx @@ -100,6 +100,7 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>( const input = view.getItemRoot('1.1').querySelector('.icon-input')!; const keydownEvent = createEvent.keyDown(input, { key: 'a', + keyCode: 65, }); const handlePreventDefault = spy();