[Popover] Add interactable attribute

[yehee]

As addressed in #25257, it is inherent as a modal to block all interactions with the rest of the page. The interactable flag will enable user interaction with the rest of the page when the popover is open.

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against d8a93e9

[oliviertassinari]

This is not flying for the same reason as before. It should remove the Modal behavior all together.

[yehee]

@oliviertassinari Thanks for looking into it! Could you elaborate more on what it means by that? I've gone through Modal API doc to see if I can pick up on something, but I'd appreciate it if there are resources that I could refer to as well!

[oliviertassinari]

If we want to disable the modal behavior, then I think that we should not mount the Modal component in the first place.

[yehee]

@oliviertassinari I see! Would you have any suggestions as to what would be the most appropriate component to replace in this case? I see that Modal is the component passed in experimentalStyled for root which can be easily swapped with another tag such as div, but it lacks a few properties defined in ModalUnstyled.d.ts that Popover depends on such as open or BackdropProps.

[eps1lon]

I don't think the Popover is the right component for the UX you want to achieven. Have you tried using the Popper instead?

[yehee]

@eps1lon Thanks for the suggestion! Popper was the other component I tried to work with, and I had an issue with positioning the component relative to the anchorEl. Since the anchorEl element I'm working with is dynamically rendered, it fails to detect the position of the anchor element and thus the popper does not get positioned properly. Popover had a similar issue, but they provide us with a workaround with anchorPosition which allows us to specify the position of the popover. I'm very new to the community, so I may have looked over some other alternatives as to working with Popper with dynamically rendering components.

[eps1lon]

Popover had a similar issue, but they provide us with a workaround with anchorPosition which allows us to specify the position of the popover.

Popper also allows setting the anchorEl to a "virtual" one i.e. setting the position manually. But there may be a bug with Popper. Could you file an issue so that we can take a look?

[eps1lon]

Closing since there hasn't been any response in 3 months to #25271 (comment)