mui / mui/material-ui

disablePortal Popper within Popper has bad initial placement

Open
#33,789 2 comments 0 reactions 1 assignee View on GitHub

@mnajdova is already working on this.

Since Aug 22, 2022.

component: Popper scope: popup support: question
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues

These two issues are potentially related:

https://github.com/mui/material-ui/issues/25204 (the repro for this one is broken)
https://github.com/mui/material-ui/issues/11337

Latest version
  • I have tested the latest version
Current behavior 😯

Inner popper placement appears to depend on whether the outer popper already exists or not.

https://user-images.githubusercontent.com/2467377/182755336-c1b308a9-3fe1-450f-8682-01521a352f34.mov

Expected behavior 🤔

If I have a disablePortal popper within a popper I expect it to position itself consistently.

Steps to reproduce 🕹

Repro here:

https://codesandbox.io/s/pensive-allen-6x4wwr?file=/demo.tsx

  1. Click the open button and observe that the inner popper is offset to the right
  2. Click the autocomplete text field and it returns to the left.
Context 🔦

I have a button that triggers a popover which will contain an autocomplete. The autocomplete has its own popper, but I don't want it to behave as a modal/dialog (overlapping components) given that it is already in a Popover.

Your environment 🌎

See repro.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.