[material-ui][Popover] Incorrect position inside CSS inline-size container
Open
Nobody has claimed this yet.
component: Popover
scope: popup
type: bug
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/mui-container-query-wtzlg5?file=%2Fsrc%2FDemo.tsx
Steps:
- Tick the "Disable portal" checkbox
- Click the "Open popover" button
Current behavior
The popover is mispositioned when disablePortal flag is set
Expected behavior
The popover should be positioned the same regardless of the disablePortal flag
Context
In our app we have a reusable form field component that uses container queries for different layouts depending on available size. Some form fields use the MUI Popover component, eg. to display a calendar in a date input field.
Your environment
npx @mui/envinfo
System:
OS: macOS 14.3.1
Binaries:
Node: 19.6.0 - ~/.nvm/versions/node/v19.6.0/bin/node
npm: 9.5.0 - ~/.nvm/versions/node/v19.6.0/bin/npm
pnpm: 8.6.12 - ~/.nvm/versions/node/v19.6.0/bin/pnpm
Browsers:
Chrome: 121.0.6167.184
Edge: Not Found
Safari: 17.3.1```
</details>
**Search keywords**: mui popover inline size disableportal
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.