adobe / adobe/react-spectrum

Nested Popover closes PreviewTrigger when hovered

Open
#10,443 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

I am trying to use a `Select` (uses a `Popover`) inside a `PreviewTrigger`'s `Popover`. The nested `Popover` opens as expected, but when moving the pointer into it, the `PreviewTrigger` popover closes because the nested popover is rendered outside the boundary of the preview popover.

### 🤔 Expected Behavior?

The `PreviewTrigger` popover should remain open while hovering or interacting with a nested `Popover` that was triggered from within the preview content.

### 😯 Current Behavior

The nested `Popover` opens, but when moving the pointer from the `PreviewTrigger` popover into the nested popover, the preview popover closes.

Since the nested popover is rendered outside the boundary of the `PreviewTrigger` popover, moving the pointer into it is treated as leaving the preview area. This causes the preview popover to close and prevents interaction with the nested popover.

### 💁 Possible Solution

_No response_

### 🔦 Context

I want to use popover-related elements like select and combo box inside the preview triggers's popover

### 🖥️ Steps to Reproduce

https://stackblitz.com/edit/vitejs-vite-thiynja4?file=src%2FApp.tsx

### Version

1.20.0

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

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

macOS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with src/App.tsx in the linked StackBlitz reproduction and trace the PreviewTrigger and nested Popover interaction. Reproduce the issue in Chrome, then inspect the related PreviewTrigger and Popover implementation; done means the outer preview remains open while the pointer moves into and interacts with the nested popover.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.