adobe / adobe/spectrum-web-components

[Feat]: sp-dialog: add property to skip auto scrolling

Open
#5,058 1 comment 0 reactions 0 assignees View on GitHub
Component:Dialog 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)

Dialog

### Description of the requested feature

As we sometimes use dialogs with "internal" scrolling, such as settings dialog with a side nav on the left and a content area on the right, we take care of the content scrolling itself.
But currently it's setup in `AlertDialog.shouldManageTabOrderForScrolling()` that it adds: `overflow: auto;` automatically based on `offsetHeight < scrollHeight`, see: https://github.com/adobe/spectrum-web-components/blob/4fd414b460bab5dd14a19737f74edd658258c529/packages/alert-dialog/src/AlertDialog.ts#L152

We'd like to have a property/attribute like `skipAutoScrolling` or similar that prevents such feature and "preserves" the css value:
```
.content {
overflow: hidden;
}
```

### Mockups or screenshots

![Image](https://github.com/user-attachments/assets/2b233b7e-4d9c-4ce4-9354-49d9e65f91d7)

### Implementation notes or ideas

_No response_

Contributor guide

Open the contributing guide

Research direction

Start in packages/alert-dialog/src/AlertDialog.ts at shouldManageTabOrderForScrolling(), where overflow is added based on offsetHeight and scrollHeight. Trace the dialog content styling and existing tests, then verify that the new property or attribute preserves an explicitly configured overflow value such as hidden when enabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.