Semantic-Org/Semantic-UI-React

Popup's do not work with modal's when dimmers are enabled.

Open

#1803 opened on Jun 27, 2017

View on GitHub
 (21 comments) (10 reactions) (0 assignees)JavaScript (13,136 stars) (4,065 forks)batch import
help wantedneeds engineeringstale

Description

This is a follow up to this issue: https://github.com/Semantic-Org/Semantic-UI-React/issues/1545

The submitter was forwarded to /Semantic-UI I followed up in this post: https://github.com/Semantic-Org/Semantic-UI/issues/5440

It turns out that the issue has to do with the order the the popups/modals are created in. /Semantic-UI responded that pre-existing modals should be used for this. As far as i know, there's no way to achieve that in the current react variant of the UI.

Thank you :)

Steps

  • Create a modal with a dimmer setting that's not false.
  • Place a pop up inside the modal

Expected Result

Hovering over trigger displays the popup on top of the modal

Actual Result

Popup displays behind the modal, even behind the dimmer actually!

Version

0.70.0

Testcase

https://codepen.io/eGust/pen/zZXomK

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
React basicsSemantic UI React components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
The issue is about popups appearing behind modals when dimmers are enabled. A testcase is provided at https://codepen.io/eGust/pen/zZXomK. The root cause is likely a z index conflict or portal ordering. Examine the Popup and Modal component source files in the repository to understand how they manage stacking contexts. Consider using React portals to properly layer popups on top of modals. Related issues #1545 and Semantic UI/Semantic UI#5440 provide additional context.