adobe / adobe/spectrum-web-components

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

Open
#3,990 4 comments 0 reactions 0 assignees View on GitHub
API Component:Overlay Feature
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [X] 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

https://github.com/adobe/spectrum-web-components/assets/158441241/1f2f87d1-9b8e-4049-b2e7-d022dc27d381

### 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](https://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_

Contributor guide

Open the contributing guide

Research direction

Start with the and components and reproduce the behavior using the linked webcomponents.dev sample or the timeline steps. Done means overlay content remains open while its parent element scrolls in Firefox, Chrome, Safari, and Microsoft Edge.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.