[Popper] Leverage ResizeObserver

[ohlr]

https://codesandbox.io/s/practical-kalam-jz2ew?file=/src/Demo.js

open the popper by clicking on the button

1. When scrolling (fast) it does not remain in position but jiggles around
2. When using "keepMounted" open the popper, close it -> additional white space at bottom of page
3. When the height of the content inside the popper increases (i.e. because of a form interaction) the position of the popper is not updated until scrolling. After scrolling it jumps up to accommodate for the new height.

[oliviertassinari]

1. An issue with https://github.com/popperjs/popper-core (but I can't reproduce)
2. By definition
3. Interesting. It sounds like we should document how you can use the popperRef to update the position of the positioning or start using the resize observer [Tabs] Update position when layout change (ResizeObserver) #9337 (comment)

[mlizchap]

For #1 you can add the following popperOptions to the Popper component:

popperOptions={{
    positionFixed: true,
}}

and this should fix this problem (https://codesandbox.io/s/practical-kalam-jz2ew?file=/src/Demo.js:2167-2232)

with Material-UI v5 (Popper v2), the option is strategy: 'fixed' https://popper.js.org/docs/v2/constructors/#strategy.

[mlizchap]

For 3. you could also just let the parent Popper component know when it's Child component updates using a callback function - https://codesandbox.io/s/loving-water-b9950?file=/src/Demo.js. You could also just nest the Child component in the Popper component too. Not sure if that would be more efficient than using a Ref but it might be easier.

[ohlr]

@mlizchap Thank you for the suggestions. While the first one is really helpful (and should probably be included in the docs) using the second one feels a bit weird - For example I would not expect that I have to pass an update to a Card when it's child is changing. Also in my case it's a bit harder as I deal with a form which updates in multiple occasions not just on a button click.

@oliviertassinari regarding 2. what do you mean by definition? inside the docs it says: "Always keep the children in the DOM." - I would expect that the popper gets hidden simply but not that it adds whitespace at the bottom of the page.. Is there any way to prevent it?

[oliviertassinari]

1. This is a concern for popper, not us, we already mention them in the documentation, it's up to developers to dive deeper.
2. It's up to developers to hide the popper if it's the behavior they desire.
3. I agree that asking to rerender is a workaround, not a proper solution.

To clarify the "improvement" I have in mind behind the label: look into using ResizeObserver to avoid having to manually get a ref on popper and update the position as we used to do in the Slider demo or Rating demo.

[ohlr]

Thank you for clarification. Wrapping the inner of the popper with
<Box display={open ? "block" : "none"}></Box>
as demonstrated here: https://codesandbox.io/s/nervous-cloud-s2x4p?file=/src/Demo.js:2264-2316 does the job

[hbjORbj]

As far as I understand from the previous conversation on this issue, 1 and 2 have already been resolved, and 3 is to be fixed. Am I correct?

I cannot reproduce 3 as shown in the following recording.

Screen.Recording.2021-08-16.at.09.41.00.mov

https://codesandbox.io/s/empty-sun-8js8u?file=/src/Demo.js

[oliviertassinari]

@hbjORbj I have added a link to reproduction from your video. popper.js makes it work in v2 by using inset.

We can still reproduce when the content overflows: https://codesandbox.io/s/spring-tdd-2zxjw?file=/src/Demo.js

overflow.mp4

It's not really important to fix, but if the fix is low overhead, then why not :).