Replies: 1 comment
-
OK, I stumbled upon the answer after doing lots of tests. Unrelated to MUI altogether -- the issue is that the background layer behind the dialog is a masonry grid of media including youtube embeds. Youtube embed iframes seem to override the z-index of the page unless you add the query param This explains why opening the inspector console (thus shifting the offset of the page so the dialog was no longer hovering above a youtube video) was allowing the dropzone to work. So adding this param to my youtube embeds resolved the issue. |
Beta Was this translation helpful? Give feedback.
-
I'm wondering if anyone else has encountered this issue or anything similar.
I have a very simple React app, using the latest versions of
react
(18.2.0),react-dropzone
(14.2.3), and@mui/material
(5.14.16). My dropzone is inside a MUI dialog, and for some reason when I drag a file over the dropzone in Chromium browsers, the browser opens the file in a new tab instead of activating the dropzone. The dropzone works fine in Firefox & Safari. The particularly weird thing about this bug is that the dropzone feature works when my inspector tab is open in Chrome, for some reason.The closest related issue I've found is this bug report from 2019, which seems to imply that the issue is with the UI framework they were using: #875
My issue also seems to be related to the MUI dialog component, since I can add a dropzone to the body of the page and the feature works.
Seeing as MUI is a pretty common framework I wonder if anyone has come across this or knows a fix?
Beta Was this translation helpful? Give feedback.
All reactions