[DataGrid] Sometimes the last few rows aren't rendered on window change

[mattcarlotta]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

This may be related to #1784. When collapsing a sidepanel via a button, the window's width changes, which causes the table to resize to cover the additional space. However, when reopening the sidepanel, the last (one or few) row(s) won't be rendered.

Expected Behavior 🤔

All rows render.

Steps to Reproduce 🕹

It appears that mixing a flex: # with width: # may be causing an improper table width calculation. For example, some of my rows had flex: 2 which seemed to cause the problem in relation to the windows width. When I dropped them to flex: 1, the width seemed to recalculate properly. That is until I resized the window's width, then some rows disappeared. Unfortunately, I don't have an easy way to replicate the issue without rebuilding the entire UI.

For reference, here's how the columns are currently created:

Click to expand column layout

import CallTimes from "~components/Layout/CallTimes";
import Center from "~components/Layout/Center";
import EmailReminders from "~components/Layout/EmailReminders";
import FormatDate from "~components/Layout/FormatDate";
import ScheduledEmployees from "~components/Layout/ScheduledEmployees";
import Team from "~components/Layout/Team";
import { shortDateTimeFormat } from "~utils/dateFormats";
import {
  GridColumns,
  GridValueGetterParams,
  ReactElement,
  TEmployeeIds
} from "~types";

const Columns: GridColumns = [
  { field: "_id", headerName: "Database Id", sortable: false, flex: 1.5 },
  { field: "seasonId", headerName: "Season", sortable: false, width: 110 },
  {
    field: "team",
    headerName: "Team",
    sortable: false,
    width: 80,
    renderCell: (params: GridValueGetterParams): ReactElement => (
      <Team
        team={params.getValue(params.id, "team") as string}
        folder="lowres"
        size={40}
      />
    )
  },
  {
    field: "opponent",
    headerName: "Opponent",
    sortable: false,
    width: 80,
    renderCell: (params: GridValueGetterParams): ReactElement =>
      params.getValue(params.id, "opponent") ? (
        <Team
          team={params.getValue(params.id, "opponent") as string}
          folder="lowres"
          size={40}
        />
      ) : (
        <Center style={{ width: "100%" }}>-</Center>
      )
  },
  {
    field: "eventType",
    headerName: "Type",
    sortable: false,
    width: 80
  },
  {
    field: "location",
    headerName: "Location",
    sortable: false,
    flex: 2
  },
  {
    field: "uniform",
    headerName: "Uniform",
    sortable: false,
    flex: 2
  },
  {
    field: "eventDate",
    headerName: "Date",
    sortable: false,
    flex: 2.33,
    renderCell: (params: GridValueGetterParams): ReactElement => (
      <FormatDate
        format={shortDateTimeFormat}
        date={params.getValue(params.id, "eventDate") as Date}
        style={{ width: "100%" }}
      />
    )
  },
  {
    field: "callTimes",
    headerName: "Call Times",
    sortable: false,
    flex: 1,
    renderCell: (params: GridValueGetterParams): ReactElement => (
      <CallTimes
        times={params.getValue(params.id, "callTimes") as Array<string>}
      />
    )
  },
  {
    field: "employeeResponses",
    headerName: "Employee Responses",
    sortable: false,
    flex: 1,
    renderCell: (params: GridValueGetterParams): ReactElement => (
      <Center style={{ width: "100%" }}>
        {(params.getValue(params.id, "employeeResponses") as Array<any>).length}
      </Center>
    )
  },
  {
    field: "scheduledIds",
    headerName: "Scheduled Employees",
    sortable: false,
    flex: 1,
    renderCell: (params: GridValueGetterParams): ReactElement => (
      <ScheduledEmployees
        employees={params.getValue(params.id, "scheduledIds") as TEmployeeIds}
      />
    )
  },
  {
    field: "sentEmailReminders",
    headerName: "Email Reminders",
    sortable: false,
    flex: 0.66,
    renderCell: (params: GridValueGetterParams): ReactElement => (
      <EmailReminders
        status={params.getValue(params.id, "sentEmailReminders") as boolean}
      />
    )
  }
];

export default Columns;

I'm also using a custom DataGrid that centers all of the table properties in the center of their respective row with justify-content: center;.

Last row isn't rendered:
https://user-images.githubusercontent.com/22607722/120717894-325f6200-c47d-11eb-8399-871dad480778.mp4

I tried removing the 'Actions' row since it's being appended to the columns array, but same issue:
https://user-images.githubusercontent.com/22607722/120717940-4d31d680-c47d-11eb-8411-eed268c030fd.mp4

I adjusted all of the flex properties to be 1 or less, which somewhat works...
https://user-images.githubusercontent.com/22607722/120718478-2fb13c80-c47e-11eb-86df-4a3e35862778.mp4

Until I resize the window:

Your Environment 🌎

`npx @material-ui/envinfo`

System:
    OS: Linux 5.8 Linux Mint 20.1 (Ulyssa)
  Binaries:
    Node: 14.17.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 6.14.13 - /usr/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 88.0.1
  npmPackages:
    @emotion/react: ^11.4.0 => 11.4.0 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @material-ui/core: ^4.11.4 => 4.11.4 
    @material-ui/data-grid: ^4.0.0-alpha.30 => 4.0.0-alpha.30 
    @material-ui/lab: ^4.0.0-alpha.58 => 4.0.0-alpha.58 
    @material-ui/pickers: ^3.3.10 => 3.3.10 
    @material-ui/styles:  4.11.4 
    @material-ui/system:  4.11.3 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react:  16.9.49 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.3.2 => 4.3.2 

[dtassone]

I think it could be related to #1784 as you mentioned. The fix will be merged soon and it will be released in the next version so we can retry and see if it fixes it.

[oliviertassinari]

we can retry and see if it fixes it.

@mattcarlotta No need to wait, you can already apply https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md#how-can-i-use-a-change-that-wasnt-released-yet now on #1807.

I have added the status: incomplete label as we have no reproductions.

[mattcarlotta]

Related to #1784:
https://user-images.githubusercontent.com/22607722/120793412-b7816000-c4eb-11eb-807a-112ffbbb808e.mp4

[mattcarlotta]

Please ignore, didn't realize #1784 fix wasn't merged in with alpha-31.