This is the code we use:
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TextField from '@mui/material/TextField';
export type ResizeObserverErrorProperties = object;
export function ResizeObserverError(props: ResizeObserverErrorProperties) {
return (
<TableContainer>
<Table>
<TableHead></TableHead>
<TableBody>
<TableRow key="description">
<TableCell>
<TextField
id={'description'}
value={
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
}
fullWidth
multiline
/>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
);
}
export default ResizeObserverError;
When the browser is resized we get the following error:
Uncaught runtime errors:
ERROR
ResizeObserver loop completed with undelivered notifications.
at handleError (http://localhost:4200/psa/vendor.js:113137:58)
at http://localhost:4200/psa/vendor.js:113156:7
We tried:
removing ‘fullWidth’:
The error is gone, but the textfield is not broad enough
removing ‘multiline’:
The error is gone, but the text is only in one line
adding ‘rows={4}’:
The error is gone, but the field is always 4 rows high, even there is no text
adding ‘minRows={3}’:
The error is still there
adding ‘maxRows={10}’:
The error is still there
roland606 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.