[SwipeableDrawer] Portal inside shadow DOM mobile touch event ignored

[Mohanrau]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/lingering-water-wr6cqx

Steps:

1. switch browser to mobile mode and try to swipe from bottom

Current behavior 😯

Mobile touch events ignored if MuiModal use ShadowDom as container.

Expected behavior 🤔

Working on mobile

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

chrome

  System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    Yarn: 1.22.19 - /mnt/c/Program Files (x86)/Yarn/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: 11.10.6 => 11.10.6 
    @emotion/styled: 11.10.6 => 11.10.6 
    @mui/base:  5.0.0-beta.3 
    @mui/core-downloads-tracker:  5.13.3 
    @mui/icons-material: ^5.11.0 => 5.11.16 
    @mui/lab: ^5.0.0-alpha.120 => 5.0.0-alpha.132 
    @mui/material: ^5.9.1 => 5.13.3 
    @mui/private-theming:  5.13.1 
    @mui/styled-engine:  5.13.2 
    @mui/system:  5.13.2 
    @mui/types:  7.2.4 
    @mui/utils:  5.13.1 
    @types/react: 18.0.28 => 18.0.28 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    styled-components: 5.3.6 => 5.3.6 
    typescript: 5.0.4 => 5.0.4 

[ZeeshanTamboli]

@Mohanrau What is your use case for having the Swipeable Drawer component inside a Shadow DOM?

[Mohanrau]

Hi @ZeeshanTamboli i have a worpress plugin that has custom react components and i have a custom theme, so to avoid css override, i use shadow dom.

[sebastianbrenner]

@ZeeshanTamboli I think i have the same problem.
It seems there is an issue with the onTouchStart event listener.
The listener is added to the ownerDocument, which is always the document element.
When the handleBodyTouchStart method of the SwipeableDrawer is called by onTouchStart, the nativeEvent.target always points to the shadow dom root element.
But in SwipeableDrawer.js:524 the condition expects the nativeEvent.target to be the same as swipeAreaRef.current.
The swipeAreaRef.current points to a div inside the shadow dom.
That's why the swipe will be ignored.
Is there a known workaround or fix?

[ZeeshanTamboli]

While shadow DOM isn't commonly used, I've labeled this as a bug since we have documentation for it at https://mui.com/material-ui/guides/shadow-dom/. The fix could be to use getRootNode() for attaching event listeners which will pick the shadow root if present. For reference, you can see the fix done for tree item in #36225.

[oliviertassinari]

Shadow DOM is a niche use case, but it seems to be a low effort, it would make sense. We also support different windows (popup, iframes) with ownerDocument() which is another niche use case.