search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.25k stars 301 forks source link

MUI textarea resizing does not update the list item height due to CSS transitions #321

Closed ishumilova closed 3 years ago

ishumilova commented 3 years ago

Describe the bug

Hello, and thank you for the wonderful library! But, unfortunately, I've encountered an issue with the MaterialUI integration. If I try to add a TextArea with a dynamic height, auto-calculation of the item height stops working properly so that the UI starts to look glitchy.

Reproduction Code sandbox

Peek 2021-03-24 19-53

To Reproduce Steps to reproduce the behavior:

  1. Add one or more items that have TextArea with dynamic height;
  2. Input one or more lines so that this TextArea grows up;
  3. Start to delete inputted lines so that the TextArea shrinks down;
  4. See invalid item size
  5. P.S. Sometimes it reproduces on the second/third/etc.. attempt

Expected behavior The item with TextArea grows up and shrinks down correctly on user input.

Desktop:

petyosi commented 3 years ago

Hi,

the problem you exhibit is related to the animation settings of the textarea component, similar to what's discussed in https://github.com/petyosi/react-virtuoso/issues/314. Removing the animation-duration property in the developer tools seems to have fixed the behavior from what I see.