Material UI(MUI) Textfield Prop: multiline, (rows | maxRows | minRows)

Question

I encountered an error while using the TextField component.

I've checked whether the issue lies in my source code or in the MUI TextField component, but I was told that they couldn't provide assistance, so I'm posting here.

The problem occurs when the parent tag wrapping the TextField becomes hidden and then toggles back. An error message ResizeObserver loop completed with undelivered notifications appears, but it doesn't occur in all cases. It only happens when using certain props of the TextField, such as multiline, (rows | maxRows | minRows).

Currently, to resolve this, I've changed the {props.children} approach to {props.value === props.index && props.children}. However, due to the previous tasks not being retained and recreated upon tab changes, I'm also considering not using MUI.

Could the issue be with the TextField component itself?

(Changing from hidden to display: none and toggling still results in the same error.)

const tabList = [
  { id: "id1", label: "label1", el: <><TextField multiline rows={4} /></> },
  { id: "id2", label: "label2", el: <>test</> },
];

const CustomTabPanel = (props: TabPanelProps) => (
  <Box className="fx1 mt10" hidden={props.value !== props.index} >
    {props.value === props.index && props.children}

    {/* TextField Prop:multiline, rows -> using error : ResizeObserver loop completed with undelivered notifications */}
    {/* {props.children} */}
  </Box>
);

const App = (): JSX.Element => {
  const [tab, setTab] = useState(0);

  const selTab = (event: React.SyntheticEvent, newValue: number) => {
    setTab(newValue);
  };

  return (
    <Box className="fx1 fullBox flex-column">
      <Tabs value={tab} onChange={selTab}>
        {tabList.map((row, i) => (
          <Tab key={`Tab-${i}`} label={row.label} />
        ))}
      </Tabs>
      {tabList.map((row, i) => (
        <CustomTabPanel key={`CustomTabPanel-${i}`} value={tab} index={i}>
          {row.el}
        </CustomTabPanel>
      ))}
    </Box>
  );
};