[TextField][material-ui] TextField with fullWidth property causes error on resizing

[A-T-D]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

I have a grid2 component and inside it there are 2 more grids to have a left bar and right side 'main' information screen. inside this information screen there's a stack component to which 3 items are added, the last item being a table for errors. The following table that is causing the issues :

example of error object;

{
   "type": "boot",
    "date" :1695725246646,
     "message" : "There has been a runtime error. This error is a very long detailed message containing multiple lines of     text.Inside this message theres a lot of information and links to possible new errros.This error is a very long detailed message containing multiple lines of text.Inside this message theres a lot of information and links to possible new errros."
}

Table Code;

<Item>
    <Typography variant='h6' id='tableTitle' component='div'>
        Errors overview
    </Typography>
    <Table size='small' aria-label='Error details table'>
        <TableHead>
            <StyledTableRow>
                <StyledTableCell align='left'>Type</StyledTableCell>
                <StyledTableCell align='left'>Date / Time</StyledTableCell>
                <StyledTableCell>Message</StyledTableCell>
            </StyledTableRow>
        </TableHead>
        <TableBody>
            {
                allErrors.map((error) => (
                    <StyledTableRow key={error.date}>
                        <StyledTableCell align='left' >{error.type}</StyledTableCell>
                        <StyledTableCell align='left'>{error.date}</StyledTableCell>
                        <StyledTableCell width={'75%'}>
                            <TextField fullWidth multiline
                                label="Error message"
                                margin="normal"
                                value={error.message}
                                maxRows={2}
                                inputProps={{ readOnly: true }}>

                            </TextField>
                        </StyledTableCell>
                    </StyledTableRow>
                ))
            }
        </TableBody>
    </Table>
</Item>

Current behavior 😯

If I remove either 'fullwidth' or 'multiLine' is does not throw an error, but when combined it throws the errors.

As soon as certain thresholds are reached for resizing components this is the error that gets thrown;
ResizeObserver Loop completed with undelivered notifications error

However when I refresh the page it does not show any errors, until I resize it again.

Expected behavior 🤔

Proper resizing without errors.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Browser: safari & chrome, both reproduce this error
  System:
    OS: macOS 13.3.1
  Binaries:
    Node: 20.6.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 117.0.5938.92
    Edge: Not Found
    Safari: 16.4
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.14 
    @mui/core-downloads-tracker:  5.14.8 
    @mui/icons-material: ^5.14.8 => 5.14.8 
    @mui/material: ^5.14.8 => 5.14.8 
    @mui/private-theming:  5.14.8 
    @mui/styled-engine:  5.14.8 
    @mui/system:  5.14.8 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.8 
    @mui/x-data-grid: ^6.13.0 => 6.13.0 
    @types/react:  18.2.21 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript:  4.9.5 

[mj12albert]

@A-T-D Could you provide a minimal repro? You can fork this template: https://mui.com/r/issue-template-latest

PS: here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[A-T-D]

https://codesandbox.io/s/hungry-matsumoto-2886j7?file=/src/ErrorsTable.js

here is the minimal example, however in this example it does not reproduce the error like it does in my code.
"[Error] ResizeObserver loop completed with undelivered notifications."
If the textfield where the error message the "multiline" attribute is removed it no longer causes any errors

[mj12albert]

Possible duplicate of #43718

[danbedford56]

I haven't currently got time to share a full example. But I've also just encountered this issue, as far as I can tell this occurs when a multi-line TextField that contains a value is resized such that it forces the text to wrap, creating a new line (or row).

[rmoskal]

I just had this happen.

[mj12albert]

If anybody is still affected by this issue, please help dogfood this fix and report back in that thread 🙇

[mj12albert]

Duplicate of #43718

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@A-T-D How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.