Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Popover + Portal inside Modal isn't clickable

See original GitHub issue

Description

Rendering popover in a Portal inside a Modal prevents users from interacting with the Popover. Portals are usually needed when using <Modal scrollBehavior="inside">.

Link to Reproduction

https://codesandbox.io/s/chakra-modal-popover-portal-lfeep?file=/src/index.tsx

Steps to reproduce

Visit codesandbox
Click on “Open w/ inline popover” to see expected behavior
Click on “Open w/ Portal popover” to see issue

Chakra UI Version

1.6.6

Browser

Chrome 92

Operating System

macOS
Windows
Linux

Additional Information

Couple workarounds:

to display the Popover over the ModalOverlay, you can set <ChakraProvider portalZIndex={5000}>
to enable interaction of the Popover inside the Portal, you can set <Modal focusTrap={false}>

Here’s what it looks like in our app:

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:9 (4 by maintainers)

Top GitHub Comments

2reactions

benjamincharitycommented, Jul 10, 2022

Not stale

2reactions

primos63commented, Jan 18, 2022

Reopened and labelled bug not sure it’s really a bug though. It could be a feature. This is now the third such request - two from Github and one from the Discord community for something I’d consider an edge case. Perhaps that’s why it wasn’t included with Popover.

Triage: When you open a Popover in a Portal from a Modal and trapFocus is true, focus is kept within the modal making selection of any fields in the Popover impossible. Chakra uses react-focus-lock to trap the focus. The library does support Portals, but that feature is not included within Chakra. In order to allow access to the Popover, one of the three ways provided in the React Focus Lock library needs to be implemented with Chakra.

This CodeSandbox has a rough solution using group. I’d have to look into the group prop more to fully understand what it is doing.

Top Results From Across the Web

Boostrap popover not sticking inside modal - Stack Overflow

The problem is when I use popover outside the modal, it functions as expected, when you scroll down, popover it sticking to its...

Popover - Reakit

Popover. Popover is a non-modal dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something....

4 reasons your z-index isn't working (and how to fix it)

This article will explain in detail four of the most common reasons that z-index isn't working for you, and exactly how you can...

Creating An Outside Focus And Click Handler React Component

In this article, we'll look at how to create an outside focus and click handler with React. We will recreate an open source...

React Popover component - Material UI - MUI

Things to know when using the Popover component: The component is built on top of the Modal component. The scroll and click away...