adobe / adobe/spectrum-web-components

[Feat]: Allow to dynamically change "dismissible" state of overlay (for pointerevents)

Open
#3,810 3 comments 0 reactions 0 assignees View on GitHub
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)

Overlay

### Description of the requested feature

Following use case:
The user opens a popover in an overlay that normally dismisses on click outside the overlay => for example with `type="auto"`.
When user interacts with the popover content - a state is created where dismissing by clicking outside should be prevented.
For example: We have a ColorPicker opens with type="auto" that should (by default) be dismissible - but inside there is an eyedropper action button - once it's clicked - the user should be able to pick colors from outside the ColorPicker without dismissing it (not closing on outside click).
Either we need the ability to change the overlay type from `auto` to `manual` when the overlay has been opened - or we might dynamically add an `skip-dismissible` attribute to keep the overlay open.

Screenshot 2023-11-16 at 10 32 47

### Mockups or screenshots

_No response_

### Implementation notes or ideas

_No response_

Contributor guide

Open the contributing guide

Research direction

Start at the Overlay component entry point and review how type="auto" handles outside-pointer dismissal. Reproduce the ColorPicker/eyedropper scenario described in the issue; done means an opened overlay can switch to non-dismissible behavior during that interaction and restore its default dismissal behavior afterward.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
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.