[data grid] Text inside the cell is not truncated

[igor-serzhan]

Current behavior 😯

Text is not truncated with the ellipsis inside Data Grid Cell. As I see that happened after updating block model for the Cell (it was switched from display: block to display: flex in the latest v5.2.2 release.

Expected behavior 🤔

Text should be truncated with the ellipsis like it was in the previous releases

Steps to reproduce 🕹

Steps:

1. Open https://codesandbox.io/s/datagrid-v5-2-2-truncated-text-7mc4p?file=/src/App.tsx
2. See that the text is not truncated at the first row

Context 🔦

No response

Your environment 🌎

see code sandbox

Order ID 💳 (optional)

35653

[m4theushw]

The regression is coming from #3446. This PR changed from display: block to display: flex. You can restore the old truncation by proving a custom cell renderer as below:

const columns: GridColDef[] = [
  {
    field: "col2",
    headerName: "Column 2",
    width: 150,
    renderCell: ({ value }) => (
      <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
        {value}
      </span>
    )
  },
];

Here's the updated CodeSandbox: https://codesandbox.io/s/datagrid-v5-2-2-truncated-text-forked-90bsv?file=/src/App.tsx

[igor-serzhan]

@m4theushw yep, this will restore the old behavior, but it will require updating all simple cells in project.

[m4theushw]

With a custom cell, you can restore completely the old behavior. It works for every cell.

const CustomCell = ({ height, width, ...other }: GridCellProps) => {
  const style = {
    minWidth: width,
    maxWidth: width,
    minHeight: height,
    maxHeight: height,
    lineHeight: `${height}px`,
  };

  return <GridCell {...other} height={height} width={width} style={style} />;
};

export default function App() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        components={{ Cell: CustomCell }}
        sx={{
          '& .MuiDataGrid-cell': {
            display: 'block',
          },
        }}
      />
    </div>
  );
}

[oliviertassinari]

I'm reopening it. It's still a regression to fix. For #2859, I would argue that text ellipse is more important than having text wrapping by default.

Note that we cover this edge case in: https://mui.com/components/menus/#limitations.

As we fix this, I think that we should add two regression tests, one to cover #3446 and another one to cover #2859.