[DataGrid] ErrorOverlay not visible with autoHeight

[marek-saji]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using <DataGrid autoHeight> error overlay is not visible.

Expected behavior 🤔

Error overlay should dictate grid’s height when grid has autoHeight property.

Steps to reproduce 🕹

<DataGrid error autoHeight />

https://codesandbox.io/s/datagriddemo-material-demo-forked-2t3we4?file=/demo.tsx

Context 🔦

No response

Your environment 🌎

Tested on Chrome 98 and Firefox 97 on Linux and Safari 13.1.2 on macOS.

npx @mui/envinfo

  System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
  Binaries:
    Node: 16.13.1 - ~/local/src/nvs/node/16.13.1/x64/bin/node
    Yarn: 1.22.17 - ~/local/src/nvs/node/16.13.1/x64/bin/yarn
    npm: 8.5.1 - ~/local/src/nvs/node/16.13.1/x64/bin/npm
  Browsers:
    Chrome: 98.0.4758.102
    Firefox: 97.0
  npmPackages:
    @emotion/react: latest => 11.8.1 
    @emotion/styled: latest => 11.8.1 
    @mui/base:  5.0.0-alpha.70 
    @mui/material: latest => 5.4.4 
    @mui/private-theming:  5.4.4 
    @mui/styled-engine:  5.4.4 
    @mui/system:  5.4.4 
    @mui/types:  7.1.2 
    @mui/utils:  5.4.4 
    @mui/x-data-grid: latest => 5.5.1 
    @types/react: latest => 17.0.39 
    react: latest => 17.0.2 
    react-dom: latest => 17.0.2 
    typescript: latest => 4.6.2 

Order ID 💳 (optional)

No response

[alexfauquette]

In the past, the error was occurring in a different way, the error message was visible but not the Grid. In PR #2946 the overflow style has been modified to hidden so the message does not appear anymore

To fix this bug we will have to rework the GridErrorHandler component to let it works with autoHeight=true

[cherniavskii]

Hey @marek-saji
Thanks for a great reproduction example!
It looks like error overlay never worked well with autoHeight.
Recently I worked on improving custom overlays in #3832 and it can be related.
I will take a look into this.