grommet/grommet

Layer on top on Layer allows navigation in the backgrount

Open

#6060 opened on Apr 11, 2022

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (8,247 stars) (1,015 forks)batch import
bughelp wanted

Description

Expected Behavior

If the user clicks on the first modal the navigation on the background (Sidebar) shouldn't happen. And if the user opens the second modal, the navigation on the first modal (that's still open) should happen either.

Actual Behavior

When the user clicks on the second modal it allows them to navigate on the background (first modal).

URL, screen shot, or Codepen exhibiting the issue

Here's a sandbox I created, open on full screen to see the issue: https://codesandbox.io/s/grommets-layer-tab-o0ndp1

Steps to Reproduce

  1. Open the first modal using the first button on the sidebar.
  2. Open the second modal using the button on the first modal.
  3. Navigate using the "Tab" key on the keyboard.

Your Environment

  • Grommet version: 2.19.0
  • Browser Name and version: Brave
  • Operating System and version (desktop or mobile): Windows and Mac.

Contributor guide

Tech stack
reactjavascript
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.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React basicsGrommet Layer component
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the Layer component's implementation in Grommet (likely in 'src/js/components/Layer'). Understand how it handles focus trapping and click events. Review the provided CodeSandbox (https://codesandbox.io/s/grommets layer tab o0ndp1) to replicate the issue. Check existing comments for any maintainer hints. The fix likely involves ensuring that clicks on a top layer modal do not propagate to underlying layers, possibly by stopping event propagation or managing z index and focus properly.