重复问题
- 我已搜索现有的问题
最新版本
- 我已测试了最新版本
重现步骤 🕹
链接到实时示例： https://codesandbox.io/s/lingering-water-wr6cqx
步骤：
- 将浏览器切换为移动模式并尝试从底部滑动
当前行为 😯
如果MuiModal使用ShadowDom作为容器，则忽略移动触摸事件。
预期行为 🤔
在移动设备上工作
上下文 🔦
- 无响应*
您的环境 🌎
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
5条答案
按热度按时间x6492ojm1#
在Shadow DOM内部使用可滑动抽屉组件的用途是什么？
ohfgkhjo2#
你好，@ZeeshanTamboli。我有一个WordPress插件，其中包含自定义的React组件和自定义主题。为了避免CSS覆盖，我使用了Shadow DOM。
dzhpxtsq3#
@ZeeshanTamboli 我认为我也有同样的问题。
似乎onTouchStart事件监听器存在问题。
监听器被添加到ownerDocument,它总是文档元素。
当SwipeableDrawer的handleBodyTouchStart方法被onTouchStart调用时，nativeEvent.target始终指向shadow dom根元素。
但在
SwipeableDrawer.js:524中，条件期望nativeEvent.target与swipeAreaRef.current相同。swipeAreaRef.current指向shadow dom内的div。
这就是为什么滑动会被忽略的原因。
是否有已知的解决方法或修复？
dffbzjpn4#
尽管影子DOM并不常用，但我将其标记为一个bug,因为我们在https://mui.com/material-ui/guides/shadow-dom/中有关于它的文档。修复方法是使用
getRootNode()来附加事件监听器，如果存在shadow root,它将选择shadow root。作为参考，您可以在#36225中查看为树形项所做的修复。qeeaahzv5#
Shadow DOM是一个小众的使用案例，但它似乎只需要很少的努力就能实现。我们还支持使用
ownerDocument()来处理不同的窗口(弹出窗口、iframes),这也是一个小众的使用案例。