search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.51k stars 262 forks source link

[SF][Feature Request]: Hide Popover when opener is not in visible area #7356

Closed ksblklu closed 1 year ago

ksblklu commented 1 year ago

Feature Request Description

Hi team, we received an issue from our customer, about popover obscuring fixed-positioned element(e.g DynamicPageTitle / Shellbar) when scrolling. Here's an example of it: https://codesandbox.io/p/sandbox/tender-jones-4zxh3r?file=%2Fsrc%2FApp.tsx%3A21%2C11-21%2C34

image

After open the Popover, and scrolling down, the opener is blocked by a fixed position page header, but the popover is still opening and floating above the page header. What we expect is to automatically close the Popover when the opener is not visible in viewport.

Proposed Solution

Hide Popover when popover opener is not in visible area

Proposed Alternatives

We checked the code of Popover component, https://github.com/SAP/ui5-webcomponents/blob/main/packages/main/src/Popover.ts#L454

Now Popover uses “opener.getBoundingClientRect()” to identify if the opener is in viewport , but when there is an fixed element on page that has higher z-index than the opener, the opener would be invisible and the result of “isOpenerOutsideViewport” would still return false. Seems “getBoundingClientRect” is calculated by the relative position of the element and the whole window. Maybe Intersection Observer API could help this case?

Organization

SuccessFactors

Additional Context

No response

Priority

High

Privacy Policy

didip1000 commented 1 year ago

Hey @SAP/ui5-webcomponents-topic-rd, can you please take a look at this feature request?

Thank You, Diana

LidiyaGeorgieva commented 1 year ago

Hello,

Internal Jira backlog 2993 is created for this feature.

Best Regards, Lidiya

alexandar-mitsev commented 1 year ago

Hello @ksblklu ,

We tested thoroughly different options including the IntersectionObserver and unfortunately there is no good, performant and reliable way in the browser to detect that the opener has gone outside of the visible area in case of a fixed/sticky elements on top. The IntersectionObserver itself does not consider the element as hidden when it is under an element positioned on top of it.

This is a browser limitation that can be observed even in browser native popovers, therefore I am closing the issue as it is not possible to fix it at that point. We will get back to you if we have further solutions.

Thanks and Best Regards, Alexandar Mitsev