mui / mui/base-ui

[popover] More forgiving hover traversal across a small gap

Open
#5,647 2 comments 0 reactions 0 assignees View on GitHub
has workaround
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

Is there a supported way to make pointer traversal across a small gap more forgiving when a hover trigger is wider than its popup?

## Desired interaction

![Current hover protection versus the wider bridge option](https://github.com/user-attachments/assets/ff3b5384-f2e7-4b52-a49c-2f6ed6f4eb2d)

For a wide button or row that reveals a narrower popup, we'd like users to be able to move slowly or briefly pause within the small gap without losing the popup.

One possible approach is to let the protected rectangular bridge across the gap span the wider element, while keeping the visible layout unchanged.

I understand why this might be undesirable as a default. [Floating UI #2321](https://github.com/floating-ui/floating-ui/issues/2321) describes the opposite problem with a much larger gap.

**Example**

https://codesandbox.io/p/sandbox/dfp2jg

1. Hover near the right edge of the trigger.
2. Move slowly down into the gap, then left toward the popup.
3. Compare with moving straight down from the trigger's center.

## Existing options

Increasing `closeDelay` gives users more time, but also delays dismissal after they move away.

An invisible CSS bridge could cover the gap, but its hit area may intercept hover or clicks intended for underlying elements.

Contributor guide

Open the contributing guide

Research direction

Start at the popover hover-protection implementation and reproduce the CodeSandbox traversal path: move from the trigger's edge slowly through the gap toward the popup. Compare the current narrow bridge with the requested wider bridge, while checking that existing closeDelay behavior and underlying hover or click targets remain unaffected; done means the wider-trigger case stays open without changing visible layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.