[DataGrid] Starting v5.3.0 till latest version components ErrorOverlay gets wrapped into div with 0px x 0px size

[IngusSkaistkalns]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

<DataGrid
  ...
  components={{
    ErrorOverlay: ({ graphQLErrors, clientErrors, networkError, message }) => (
        <div style={{ background: 'red' }}>Long custom error message to display</div>
    )
  }}
/>

will result error component wrapped in additional div with undesired styling overflow: visible; width: 0px;

Expected behavior 🤔

In version 5.2.2 this wrapped div does not appear:

<DataGrid
  ...
  components={{
    ErrorOverlay: ({ graphQLErrors, clientErrors, networkError, message }) => (
        <div style={{ background: 'red' }}>Long custom error message to display</div>
    )
  }}
/>

does not have that wrapped div with styling that limits size of ErrorOverlay

Steps to reproduce 🕹

Codesandbox - https://codesandbox.io/s/customemptyoverlaygrid-material-demo-forked-e1uww3?file=/demo.tsx

Steps:

Not sure if there anything other than defining custom ErrorOverlay between v5.2.2 and up....

Context 🔦

Custom error message component/overlay

Your environment 🌎

Not sure if this is environment specific issue.

Order ID 💳 (optional)

No response

[IngusSkaistkalns]

I also went though CHANGELOG and could not find anything that could lead to such behaviour as desired.

[flaviendelangle]

I think #3832 should solve this issue (@cherniavskii)

[cherniavskii]

I've updated the issue with a link to Codesandbox.

As a workaround, you can use GridOverlay for now: https://codesandbox.io/s/customemptyoverlaygrid-material-demo-forked-6espse?file=/demo.tsx
After #3832 is released, it won't be necessary.

Also, this issue opened a discussion on few more changes in ErrorOverlay - see #3832 (comment)

[cherniavskii]

Fixed by #3832