[ScrollBars] Updates in nested children is not reflected

[vasilii-kovalev]

Hello. Before filing an issue, I'd like to understand if this fixable at all conceptually. Maybe the problem is not related to the library itself.

Here's a little demo: https://codesandbox.io/s/uui-scrollbars-nested-children-issue-qqgnw8

When opening the tab "With spoilers" and clicking on one of the spoilers ("First", "Second" or "Third") to open it, one can notice that the vertical scroll track didn't become visible, though content overflows the container. It appears when trying to scroll down. When clicking on the spoiler again to close it, one can notice that the scroll track remains visible, though content doesn't overflow the container anymore.
On the tab "With spoilers (fixed)" it doesn't happen: the scroll track appears and disappears correctly.
The difference is, in the second case, the component containing ScrollBars is forced to re-render if any changes happen in its children.

Is it possible to make ScrollBars component know its children's width/height and automatically adjust its UI? I can see that this component uses library "react-custom-scrollbars-2" under the hood, so maybe it can be adjusted.

P.S.: the last tab "Plain" contains a plain list of rows, and was added just to show, that the problem appears only when content is not in the same component with ScrollBars.

[vasilii-kovalev]

Decided to create an issue. If it is possible to fix it, the issue would be necessary anyway. If not, it can be closed.

[AlekseyManetov]

Hi, I think that your approach with calling forceUpdate in onToggle is ok for such a case, or you can try to move the folded state in parent. As you described above, react-custom-scrollbars-2 don't know about his elements size change, and only one way, which i see, how to make him know about it, it subscribe his children via ResizeObserver and run forceUpdate on any size change, but it may cause performance issues and unnecessary re-renders, so i am not sure that is a correct way to fix this problem.