adobe / adobe/react-spectrum

Ability to style the Popover overlay

Open
#5,231 6 comments 1 reaction 0 assignees View on GitHub
enhancement help wanted Overlays RAC
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

Would be very useful to style the Popover overlay the same way as Modal and ModalOverlay.

### 🤔 Expected Behavior?

You should not be able to interact with outside elements while the popover is open.

### 😯 Current Behavior

If there are elements with `zIndex` set, you're able to click them while the popover is still open. That's due to the Popover Overlay not having any `zIndex` which makes it possible to click other elements with `zIndex`.

### 💁 Possible Solution

Either the popover overlay already comes with `zIndex` or an ability to customize the overlay.

### 🔦 Context

We have clickable elements with higher `zIndex` and if you try to close the popover by clicking outside, you can accidentally interact with an element with higher `zIndex` than the overlay.

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by locating the Popover overlay implementation and comparing its styling API with Modal and ModalOverlay. Verify that an open popover prevents interaction with outside elements that have a higher z-index, and that the overlay has a default or customizable z-index; confirm the behavior with relevant existing tests if present.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.