Skip to content

[all components] Support non main document: iframe, popup, etc #629

New issue
New issue
Closed
#660
Closed
[all components] Support non main document: iframe, popup, etc#629
#660
Labels
scope: all componentsWidespread work has an impact on almost all components.type: bugIt doesn't behave as expected.
@oliviertassinari

Description

@oliviertassinari
oliviertassinari
opened on Sep 17, 2024

Steps to reproduce

There are a number of components that are broken when used in non main window context, meaning in iframe, popup, shadow dom. A few quick examples:

  • Dialog

base-ui/packages/mui-base/src/utils/useScrollLock.ts

Line 43 in 1ab27b0

const html = document.documentElement;

  • NumberInput

base-ui/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.tsx

Line 46 in 1ab27b0

return ReactDOM.createPortal(renderElement(), document.body);

  • Slider

base-ui/packages/mui-base/src/Slider/Root/useSliderRoot.ts

Line 379 in 1ab27b0

if (disabled && sliderRef.current!.contains(document.activeElement)) {

Context

A few related issues: mui/material-ui#18701, mui/material-ui#10328.

Your environment

npx @mui/envinfo 
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: -

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: all componentsWidespread work has an impact on almost all components.type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions