adobe / adobe/spectrum-web-components

[Bug]: Modal overlays allow for page scroll when open

Open
#5,630 1 comment 0 reactions 0 assignees View on GitHub
bug Component:Overlay SEV 3
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)

Overlay

### Library version

1.7.0

### Expected behavior

When a [modal overlay](https://opensource.adobe.com/spectrum-web-components/components/overlay/#trigger) is open, it does not allow for page scroll.

### Actual behavior

When a [modal overlay](https://opensource.adobe.com/spectrum-web-components/components/overlay/#trigger) is open, it lets the page scroll.

### Screenshots

https://github.com/user-attachments/assets/94daf6a7-ea4a-4d86-ba27-c0b4aee54834

### What browsers are you seeing the problem in?

Microsoft Edge, Firefox, Chrome, Safari

### How can we reproduce this issue?

1. Go to https://opensource.adobe.com/spectrum-web-components/components/overlay/#trigger
2. Click on the button "Open modal"
3. Try to scroll the page
4. Validate the page actually scrolled when the expected behavior is it shouldn't have

### Sample code or abstract reproduction which illustrates the problem

_No response_

### Severity

SEV 3

### Logs taken while reproducing problem

_No response_

### Would you like to track this issue in Jira?

- [x] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start with the Overlay component's trigger example at https://opensource.adobe.com/spectrum-web-components/components/overlay/#trigger and reproduce the issue in Chrome, Firefox, Edge, or Safari. Confirm that opening a modal prevents page scrolling while it remains open, and verify that normal page scrolling returns after it closes.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.