[DataGrid] Fix focus when selecting option with Enter in the singleSelect

packages/grid/_modules_/grid/components/cell/GridCell.tsx

@@ -130,12 +130,7 @@ function GridCell(props: GridCellProps) {
     (eventName: keyof GridCellEventLookup, propHandler: any) =>
       (event: React.SyntheticEvent<HTMLDivElement>) => {
         // Ignore portal
-        // The target is not an element when triggered by a Select inside the cell
-        // See https://github.com/mui-org/material-ui/issues/10534
-        if (
-          (event.target as any).nodeType === 1 &&
-          !event.currentTarget.contains(event.target as Element)
-        ) {
+        if (!event.currentTarget.contains(event.target as Element)) {
           return;
         }
 

packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx

@@ -10,6 +10,7 @@ import {
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
+import { GridEvents } from '../../models/events/gridEvents';
 
 const renderSingleSelectOptions = (option) =>
   typeof option === 'object' ? (
@@ -71,10 +72,19 @@ function GridEditSingleSelectCell(props: GridRenderEditCellParams & SelectProps)
   const handleChange = async (event) => {
     setOpen(false);
     api.setEditCellValue({ id, field, value: event.target.value }, event);
-    if (!event.key && rootProps.editMode === 'cell') {
-      const isValid = await Promise.resolve(api.commitCellChange({ id, field }, event));
-      if (isValid) {
-        api.setCellMode(id, field, 'view');
+
+    if (rootProps.editMode === GridEditModes.Row) {
+      return;
+    }
+
+    const isValid = await Promise.resolve(api.commitCellChange({ id, field }, event));
+    if (isValid) {
+      api.setCellMode(id, field, 'view');
+
+      if (event.key) {
+        // TODO v6: remove once we stop ignoring events fired from portals
+        const params = api.getCellParams(id, field);
+        api.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
       }
     }
   };

packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts

@@ -53,9 +53,10 @@ export const useGridKeyboard = (apiRef: GridApiRef): void => {
 
   const handleCellKeyDown = React.useCallback<GridEventListener<GridEvents.cellKeyDown>>(
     (params, event) => {
-      // The target is not an element when triggered by a Select inside the cell
-      // See https://github.com/mui-org/material-ui/issues/10534
-      if ((event.target as any).nodeType === 1 && !isGridCellRoot(event.target as Element)) {
+      // Ignore portal
+      // Do not apply shortcuts if the focus is not on the cell root component
+      // TODO replace with !event.currentTarget.contains(event.target as Element)
+      if (!isGridCellRoot(event.target as Element)) {
         return;
       }
 

packages/grid/x-data-grid-generator/src/renderer/renderEditContractType.tsx

@@ -6,6 +6,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { createStyles, makeStyles } from '@mui/styles';
 import { createTheme } from '@mui/material/styles';
 import { CONTRACT_TYPE_OPTIONS } from '../services/static-data';
+import { GridEvents } from '../../../_modules_/grid/models/events/gridEvents';
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(
@@ -32,9 +33,13 @@ function EditContractType(props: GridRenderCellParams) {
 
   const handleChange: SelectProps['onChange'] = (event) => {
     api.setEditCellValue({ id, field, value: event.target.value }, event);
-    if (!(event as any).key) {
-      api.commitCellChange({ id, field });
-      api.setCellMode(id, field, 'view');
+    api.commitCellChange({ id, field });
+    api.setCellMode(id, field, 'view');
+
+    if ((event as any).key) {
+      // TODO v6: remove once we stop ignoring events fired from portals
+      const params = api.getCellParams(id, field);
+      api.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
     }
   };
 

packages/grid/x-data-grid-generator/src/renderer/renderEditIncoterm.tsx

@@ -8,6 +8,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { createStyles, makeStyles } from '@mui/styles';
 import { createTheme } from '@mui/material/styles';
 import { INCOTERM_OPTIONS } from '../services/static-data';
+import { GridEvents } from '../../../_modules_/grid/models/events/gridEvents';
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(
@@ -34,9 +35,13 @@ function EditIncoterm(props: GridRenderEditCellParams) {
 
   const handleChange: SelectProps['onChange'] = (event) => {
     api.setEditCellValue({ id, field, value: event.target.value }, event);
-    if (!(event as any).key) {
-      api.commitCellChange({ id, field });
-      api.setCellMode(id, field, 'view');
+    api.commitCellChange({ id, field });
+    api.setCellMode(id, field, 'view');
+
+    if ((event as any).key) {
+      // TODO v6: remove once we stop ignoring events fired from portals
+      const params = api.getCellParams(id, field);
+      api.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
     }
   };
 

packages/grid/x-data-grid-generator/src/renderer/renderEditRateType.tsx

@@ -6,6 +6,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { createStyles, makeStyles } from '@mui/styles';
 import { createTheme } from '@mui/material/styles';
 import { RATE_TYPE_OPTIONS } from '../services/static-data';
+import { GridEvents } from '../../../_modules_/grid/models/events/gridEvents';
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(
@@ -32,9 +33,13 @@ function EditRateType(props: GridRenderCellParams) {
 
   const handleChange: SelectProps['onChange'] = (event) => {
     api.setEditCellValue({ id, field, value: event.target.value }, event);
-    if (!(event as any).key) {
-      api.commitCellChange({ id, field });
-      api.setCellMode(id, field, 'view');
+    api.commitCellChange({ id, field });
+    api.setCellMode(id, field, 'view');
+
+    if ((event as any).key) {
+      // TODO v6: remove once we stop ignoring events fired from portals
+      const params = api.getCellParams(id, field);
+      api.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
     }
   };
 

packages/grid/x-data-grid-generator/src/renderer/renderEditStatus.tsx

@@ -12,6 +12,7 @@ import DoneIcon from '@mui/icons-material/Done';
 import { createStyles, makeStyles } from '@mui/styles';
 import { createTheme } from '@mui/material/styles';
 import { STATUS_OPTIONS } from '../services/static-data';
+import { GridEvents } from '../../../_modules_/grid/models/events/gridEvents';
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(
@@ -38,9 +39,13 @@ function EditStatus(props: GridRenderEditCellParams) {
 
   const handleChange: SelectProps['onChange'] = (event) => {
     api.setEditCellValue({ id, field, value: event.target.value }, event);
-    if (!(event as any).key) {
-      api.commitCellChange({ id, field });
-      api.setCellMode(id, field, 'view');
+    api.commitCellChange({ id, field });
+    api.setCellMode(id, field, 'view');
+
+    if ((event as any).key) {
+      // TODO v6: remove once we stop ignoring events fired from portals
+      const params = api.getCellParams(id, field);
+      api.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
     }
   };
 

packages/grid/x-data-grid-generator/src/renderer/renderEditTaxCode.tsx

@@ -6,6 +6,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { createStyles, makeStyles } from '@mui/styles';
 import { createTheme } from '@mui/material/styles';
 import { TAXCODE_OPTIONS } from '../services/static-data';
+import { GridEvents } from '../../../_modules_/grid/models/events/gridEvents';
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(
@@ -32,9 +33,13 @@ function EditTaxCode(props: GridRenderCellParams) {
 
   const handleChange: SelectProps['onChange'] = (event) => {
     api.setEditCellValue({ id, field, value: event.target.value }, event);
-    if (!(event as any).key) {
-      api.commitCellChange({ id, field });
-      api.setCellMode(id, field, 'view');
+    api.commitCellChange({ id, field });
+    api.setCellMode(id, field, 'view');
+
+    if ((event as any).key) {
+      // TODO v6: remove once we stop ignoring events fired from portals
+      const params = api.getCellParams(id, field);
+      api.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
     }
   };
 

packages/grid/x-data-grid-pro/src/tests/editRows.DataGridPro.test.tsx

@@ -754,7 +754,7 @@ describe('<DataGridPro /> - Edit Rows', () => {
       expect(secondOption).to.have.text('Admin');
     });
 
-    it('should set the focus correctly', () => {
+    it('should set the focus correctly when entering the edit mode with a double click', () => {
       render(
         <TestCase
           columns={[
@@ -782,6 +782,34 @@ describe('<DataGridPro /> - Edit Rows', () => {
       expect(screen.getByRole('button', { name: 'Nike' })).toHaveFocus();
     });
 
+    it('should move the focus to the cell below when selecting a value with Enter', async () => {
+      render(
+        <TestCase
+          columns={[
+            {
+              field: 'brand',
+              type: 'singleSelect',
+              valueOptions: ['Nike', 'Adidas'],
+              editable: true,
+            },
+          ]}
+          rows={[
+            { id: 0, brand: 'Nike' },
+            { id: 1, brand: 'Adidas' },
+          ]}
+        />,
+      );
+      const cell = getCell(0, 0);
+      cell.focus();
+      fireEvent.keyDown(cell, { key: 'Enter' });
+      fireEvent.keyDown(screen.queryByRole('option', { name: 'Nike' }), { key: 'ArrowDown' });
+      fireEvent.keyDown(screen.queryByRole('option', { name: 'Adidas' }), { key: 'Enter' });
+      await waitFor(() => {
+        // @ts-expect-error need to migrate helpers to TypeScript
+        expect(getCell(1, 0)).toHaveFocus();
+      });
+    });
+
     it('should not exit the edit mode when validateCell returns an object with error', async () => {
       render(
         <div style={{ width: 300, height: 300 }}>