[data grid] The grid crashes when it enters into edit mode if any of it's columns is of type "single select"

[krishna-vithal]

Steps to reproduce

When implementing the edit functionality in the DataGridPremium and using a column with the singleSelect type (such as a dropdown), an issue arises where, upon entering edit mode, this column automatically receives focus. As a result, the user is forced to make a selection in this dropdown before they can interact with other controls or fields in the grid.

This behavior can be frustrating for users because it restricts their ability to freely navigate and interact with other cells without first interacting with the dropdown. It forces the user to make a choice in the singleSelect field, even if they don't intend to change the value, disrupting their workflow.
Steps:

1. Open this link to live example: (required)
2. Click on Edit(Pencil Icon) button on any of the row.

Current behavior

As soon as row enters into edit mode drop down automatically shows up and until any of the option is selected user is not allowed to anything else.

Expected behavior

Row should be entered into edit mode and dropdown shouldn't open until user clicks on it.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Edit DataGridPremium

Order ID: 89881

[michelengelen]

Hey @krishna-vithal ... if you intend to use row editing you need to set editMode="row" as a prop on the DataGrid. Docs reference: Row editing

Should we maybe add a warning when a controlled rowModesModel is being used without setting editMode="row" @mui/xgrid ?

[krishna-vithal]

Thank you! It's working if I set editMode="row" and yes it would be helpful if you add that as warning.