[data grid] Focus shifts back to cell when typing in TextArea rendered via renderCell

[iida-sh]

Steps to reproduce

Link to live example

Steps:

1. Click on a cell in the quantity column to open the popover containing a TextField.
2. Start typing in the TextField within the popover.

Current behavior

When typing in the TextArea component within the quantity column, rendered via renderCell in an MUI DataGrid, the focus unexpectedly shifts back to the cell.

Expected behavior

When typing in the TextField within the popover of the quantity column, the focus should remain on the TextField without shifting back to the DataGrid cell.

Context

The purpose is to allow users to input raw values into a DataGrid cell while presenting a different, formatted version of the raw value within a TextArea in a popover.

Your environment

npx @mui/envinfo

``` System: OS: Linux 4.4 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish) Binaries: Node: 16.15.0 - ~/.asdf/installs/nodejs/16.15.0/bin/node npm: 8.5.5 - ~/.asdf/plugins/nodejs/shims/npm pnpm: 6.11.0 - ~/.asdf/installs/nodejs/16.15.0/bin/pnpm npmPackages: @emotion/react: ^11.10.0 => 11.11.3 @emotion/styled: ^11.10.0 => 11.11.0 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: ^5.10.2 => 5.15.7 @mui/material: ^5.10.2 => 5.16.7 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.7 @mui/types: 7.2.18 @mui/utils: 5.16.6 @mui/x-data-grid: ^7.21.0 => 7.21.0 @mui/x-date-pickers: ^5.0.8 => 5.0.20 @mui/x-internals: 7.21.0 @types/react: 18.0.25 => 18.0.25 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.8.4 => 4.8.4 Browsers: Chrome: 130.0.6723.92 ```

Search keywords: Data Grid renderCell focus

[michelengelen]

You can simply remove the editable: true property from the column definition. 👍🏼