[feat]: API for persisting Overlay content across parent element scrolls

[siddhantAdobe]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

,

Expected behavior

When scrolling the parent div, the sp-popover or sp-tooltip should not get closes automatically.

Actual behavior

When scrolling the parent div, the sp-popover or sp-tooltip get closed automatically.

Screenshots

Screen.Recording.2024-02-01.at.12.15.37.PM.mov

What browsers are you seeing the problem in?

Firefox, Chrome, Safari, Microsoft Edge

How can we reproduce this issue?

1. Go to 'new.express.adobe.com'
2. Create a video project with timeline.
3. Increase the scene width using trim handles and observe the timecode popover over the trim handle
4. Popover gets closed as soon as the scrolling start.
5. Same issue is observed when moving the trackpin near the edge and timeline gets scrolled.

Sample code that illustrates the problem

https://studio.webcomponents.dev/edit/KeJx04t6aDK9hORsw7yP/src/index.ts?p=stories

Logs taken while reproducing problem

No response

[Westbrook]

This is currently working as expected. I've updated the description to outline that this is a feature request. Would you happen to have any desires or recommendation as to how an API in this are might be shaped?

[siddhantAdobe]

In the sample code added, you can check that when scrolling trigger during movement of trackpin div near right edge, the popover gets closed. But we want the popover to stay when scrolling is happening.
What we desire is something like if there can be an attribute to set if we want to close the overlay on scroll or not.

Screen.Recording.2024-03-06.at.11.31.46.AM.mov

[Westbrook]

This is outcomes, I'm wondering what you think about an actual alteration of the API to support something like this.

In that way, these questions come to mind:

• is this content actually an overlay? e.g does it have to be over everything, or is it part of a larger UI that is the only thing it has to be over? or in the video above, it's following the parent div, why not just be child content? much less work for the browser to manage.
• api for unlocking this feature? single flag, options bag, etc.
• if the overlay follows the trigger and the trigger goes off the screen, what now?
• if the overlay follows the trigger does its placement change overtime?
• is the performance of placement over time high enough not to look janky?
• probably more, happy to accept contributions that work through these questions and others.

[siddhantAdobe]

@Westbrook

• This popover is part of a larger UI called timeline and it needs to be over timeline and other UIs (parallel to timeline) like Canvas which cover the maximum part of the window. That's why we wanted it to be an overlay. Also as specified by the design, we only need to use the spectrum component and want to maintain a uniformity in the components used in the app by maximising the use of spectrum component.
• Adding the attribute in the options bag will do the trick. We dont want the overlay to get closed when parent div gets scrolled.
• In our use-case, the popover will always follow the pointer and pointer will never goes off the screen. But if it does in some other case, then I think closing the overlay would be ideal.
• The trigger placement changes overtime but in our use case, we are are only showing the popover when dragging the trackpin and not during default scrolling.
• we are currently moving the popover on trackpin drag from quite some time (more than a year) and we haven't seen any case of performance gets impacted due to moving popover on mouse pointers. So I think performance will not be an issue here.