make edit components support the row editMode

packages/grid/_modules_/grid/components/GridViewport.tsx

@@ -79,6 +79,7 @@ export const GridViewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
             cellTabIndex={cellTabIndex}
             isSelected={selectionLookup[id] !== undefined}
             editRowState={editRowsState[id]}
+            editMode={options.editMode!}
             cellClassName={options.classes?.cell}
             getCellClassName={options.getCellClassName}
           />

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

@@ -5,8 +5,12 @@ import Checkbox from '@material-ui/core/Checkbox';
 import { unstable_useId as useId } from '@material-ui/core/utils';
 import { GridCellParams } from '../../models/params/gridCellParams';
 
+interface GridEditBooleanCellProps extends GridCellParams {
+  editMode?: 'row' | 'cell';
+}
+
 export function GridEditBooleanCell(
-  props: GridCellParams &
+  props: GridEditBooleanCellProps &
     React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
 ) {
   const {
@@ -22,6 +26,7 @@ export function GridEditBooleanCell(
     className,
     getValue,
     hasFocus,
+    editMode,
     ...other
   } = props;
 

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

@@ -2,7 +2,11 @@ import * as React from 'react';
 import InputBase, { InputBaseProps } from '@material-ui/core/InputBase';
 import { GridCellParams } from '../../models/params/gridCellParams';
 
-export function GridEditDateCell(props: GridCellParams & InputBaseProps) {
+interface GridEditDateCellProps extends GridCellParams {
+  editMode?: 'row' | 'cell';
+}
+
+export function GridEditDateCell(props: GridEditDateCellProps & InputBaseProps) {
   const {
     id,
     value,
@@ -15,6 +19,7 @@ export function GridEditDateCell(props: GridCellParams & InputBaseProps) {
     isEditable,
     hasFocus,
     getValue,
+    editMode,
     ...other
   } = props;
 

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

@@ -2,7 +2,11 @@ import * as React from 'react';
 import InputBase, { InputBaseProps } from '@material-ui/core/InputBase';
 import { GridCellParams } from '../../models/params/gridCellParams';
 
-export function GridEditInputCell(props: GridCellParams & InputBaseProps) {
+interface GridEditInputCellProps extends GridCellParams {
+  editMode?: 'row' | 'cell';
+}
+
+export function GridEditInputCell(props: GridEditInputCellProps & InputBaseProps) {
   const {
     id,
     value,
@@ -15,6 +19,7 @@ export function GridEditInputCell(props: GridCellParams & InputBaseProps) {
     isEditable,
     hasFocus,
     getValue,
+    editMode,
     ...other
   } = props;
 

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

@@ -15,7 +15,11 @@ const renderSingleSelectOptions = (option) =>
     </MenuItem>
   );
 
-export function GridEditSingleSelectCell(props: GridCellParams & SelectProps) {
+interface GridEditSingleSelectCellProps extends GridCellParams {
+  editMode?: 'row' | 'cell';
+}
+
+export function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps & SelectProps) {
   const {
     id,
     value,
@@ -29,34 +33,47 @@ export function GridEditSingleSelectCell(props: GridCellParams & SelectProps) {
     className,
     getValue,
     hasFocus,
+    editMode,
     ...other
   } = props;
 
+  const [open, setOpen] = React.useState(editMode === 'cell');
+
   const handleChange = (event) => {
+    setOpen(false);
     const editProps = { value: event.target.value };
     api.changeCellEditProps({ id, field, props: editProps }, event);
-    if (!event.key) {
+    if (!event.key && editMode === 'cell') {
       api.commitCellChange({ id, field }, event);
       api.setCellMode(id, field, 'view');
     }
   };
 
   const handleClose = (event, reason) => {
+    if (editMode === 'row') {
+      setOpen(false);
+      return;
+    }
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
       api.setCellMode(id, field, 'view');
     }
   };
 
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
   return (
     <Select
       value={value}
       onChange={handleChange}
+      open={open}
+      onOpen={handleOpen}
       MenuProps={{
         onClose: handleClose,
       }}
       autoFocus
       fullWidth
-      open
       {...other}
     >
       {colDef.valueOptions.map(renderSingleSelectOptions)}

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

@@ -16,6 +16,7 @@ import { GRID_CSS_CLASS_PREFIX } from '../../constants/cssClassesConstants';
 interface RowCellsProps {
   cellClassName?: string;
   columns: GridColumns;
+  editMode: 'row' | 'cell';
   extendRowFullWidth: boolean;
   firstColIdx: number;
   id: GridRowId;
@@ -36,6 +37,7 @@ interface RowCellsProps {
 export const GridRowCells = React.memo(function GridRowCells(props: RowCellsProps) {
   const {
     columns,
+    editMode,
     firstColIdx,
     hasScrollX,
     hasScrollY,
@@ -84,7 +86,7 @@ export const GridRowCells = React.memo(function GridRowCells(props: RowCellsProp
     }
 
     if (editCellState != null && column.renderEditCell) {
-      const params = { ...cellParams, ...editCellState };
+      const params = { editMode, ...cellParams, ...editCellState };
       cellComponent = column.renderEditCell(params);
       classNames.push(`${GRID_CSS_CLASS_PREFIX}-cell--editing`);
     }

packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ownerDocument } from '@material-ui/core/utils';
 import {
-  GRID_CELL_CLICK,
   GRID_CELL_DOUBLE_CLICK,
   GRID_CELL_MOUSE_UP,
   GRID_CELL_FOCUS_OUT,
@@ -23,7 +22,7 @@ import { GridComponentProps } from '../../../GridComponentProps';
 export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps, 'rows'>): void => {
   const logger = useLogger('useGridFocus');
   const [, setGridState, forceUpdate] = useGridState(apiRef);
-  const insideFocusedCell = React.useRef(false);
+  const lastClickedCell = React.useRef<GridCellParams | null>(null);
 
   const setCellFocus = React.useCallback(
     (id: GridRowId, field: string) => {
@@ -67,7 +66,7 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
     [apiRef, forceUpdate, logger, setGridState],
   );
 
-  const updateFocus = React.useCallback(
+  const handleCellDoubleClick = React.useCallback(
     ({ id, field }: GridCellParams) => {
       apiRef.current.setCellFocus(id, field);
     },
@@ -98,21 +97,27 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
       if (!cell) {
         return;
       }
-
-      if (params.id === cell.id && params.field === cell.field) {
-        insideFocusedCell.current = true;
-      }
+      lastClickedCell.current = params;
     },
     [apiRef],
   );
 
   const handleDocumentClick = React.useCallback(
     (event: MouseEvent) => {
-      const isInsideFocusedCell = insideFocusedCell.current;
-      insideFocusedCell.current = false;
+      const lastClickedCellParams = lastClickedCell.current;
+      lastClickedCell.current = null;
 
       const { cell } = apiRef.current.getState().focus;
-      if (!cell || isInsideFocusedCell) {
+      if (!cell) {
+        if (lastClickedCellParams) {
+          // No cell is focused but the user clicked in a cell
+          apiRef.current.setCellFocus(lastClickedCellParams.id, lastClickedCellParams.field);
+        }
+        return;
+      }
+
+      if (lastClickedCellParams?.id === cell.id && lastClickedCellParams?.field === cell.field) {
+        // User clicked in the focused cell
         return;
       }
 
@@ -121,16 +126,21 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
         return;
       }
 
-      setGridState((previousState) => ({
-        ...previousState,
-        focus: { cell: null, columnHeader: null },
-      }));
-
+      // User clicked outside the focused cell
       apiRef.current.publishEvent(
         GRID_CELL_FOCUS_OUT,
         apiRef.current.getCellParams(cell.id, cell.field),
         event,
       );
+      setGridState((previousState) => ({
+        ...previousState,
+        focus: { cell: null, columnHeader: null },
+      }));
+
+      if (lastClickedCellParams) {
+        // User clicked in a cell different from the one that is focused
+        apiRef.current.setCellFocus(lastClickedCellParams.id, lastClickedCellParams.field);
+      }
     },
     [apiRef, setGridState],
   );
@@ -182,8 +192,7 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
   }, [apiRef, handleDocumentClick]);
 
   useGridApiEventHandler(apiRef, GRID_COLUMN_HEADER_BLUR, handleBlur);
-  useGridApiEventHandler(apiRef, GRID_CELL_CLICK, updateFocus);
-  useGridApiEventHandler(apiRef, GRID_CELL_DOUBLE_CLICK, updateFocus);
+  useGridApiEventHandler(apiRef, GRID_CELL_DOUBLE_CLICK, handleCellDoubleClick);
   useGridApiEventHandler(apiRef, GRID_CELL_MOUSE_UP, handleCellMouseUp);
   useGridApiEventHandler(apiRef, GRID_CELL_MODE_CHANGE, handleCellModeChange);
   useGridApiEventHandler(apiRef, GRID_COLUMN_HEADER_FOCUS, handleColumnHeaderFocus);

packages/storybook/src/stories/grid-rows.stories.tsx

@@ -379,6 +379,7 @@ const baselineEditProps = {
       DOB: new Date(1996, 10, 2),
       meetup: new Date(2020, 2, 25, 10, 50, 0),
       isAdmin: true,
+      country: 'Spain',
     },
     {
       id: 1,
@@ -391,6 +392,7 @@ const baselineEditProps = {
       DOB: new Date(1992, 1, 20),
       meetup: new Date(2020, 4, 15, 10, 50, 0),
       isAdmin: true,
+      country: 'Netherlands',
     },
     {
       id: 2,
@@ -403,6 +405,7 @@ const baselineEditProps = {
       DOB: new Date(1986, 0, 12),
       meetup: new Date(2020, 3, 5, 10, 50, 0),
       isAdmin: false,
+      country: 'Brazil',
     },
   ],
   columns: [
@@ -414,6 +417,13 @@ const baselineEditProps = {
       valueGetter: ({ row }) => `${row.firstname || ''} ${row.lastname || ''}`,
     },
     { field: 'isAdmin', width: 120, type: 'boolean', editable: true },
+    {
+      field: 'country',
+      width: 120,
+      type: 'singleSelect',
+      editable: true,
+      valueOptions: ['Bulgaria', 'Netherlands', 'France', 'Italy', 'Brazil', 'Spain'],
+    },
     { field: 'username', editable: true },
     { field: 'email', editable: true, width: 150 },
     { field: 'age', width: 50, type: 'number', editable: true },