🐞 Admin Portal: Ceremony key drop opens the file when the language menu is active

packages/ui-essentials/src/components/CustomDropFile/CustomDropFile.tsx

@@ -1,7 +1,13 @@
 // SPDX-FileCopyrightText: 2025 Sequent Tech Inc <legal@sequentech.io>
 //
 // SPDX-License-Identifier: AGPL-3.0-only
-import React, {PropsWithChildren, useState, DragEventHandler, ChangeEventHandler} from "react"
+import React, {
+    PropsWithChildren,
+    useEffect,
+    useState,
+    DragEventHandler,
+    ChangeEventHandler,
+} from "react"
 import {styled} from "@mui/material/styles"
 import Box from "@mui/material/Box"
 import {useForwardedRef} from "@sequentech/ui-core"
@@ -62,6 +68,22 @@ export const CustomDropFile = React.forwardRef<HTMLInputElement, PropsWithChildr
         const [dragActive, setDragActive] = useState(false)
         const [fileName, setFileName] = useState<string>("")
 
+        useEffect(() => {
+            const preventFileNavigation = (event: DragEvent) => {
+                if (Array.from(event.dataTransfer?.types ?? []).includes("Files")) {
+                    event.preventDefault()
+                }
+            }
+
+            document.addEventListener("dragover", preventFileNavigation)
+            document.addEventListener("drop", preventFileNavigation)
+
+            return () => {
+                document.removeEventListener("dragover", preventFileNavigation)
+                document.removeEventListener("drop", preventFileNavigation)
+            }
+        }, [])
+
         // handle drag events
         const handleDrag: DragEventHandler<HTMLElement> = (e) => {
             e.preventDefault()

packages/ui-essentials/src/components/LanguageMenu/LanguageMenu.tsx

@@ -41,6 +41,24 @@ const LanguageMenu: React.FC<{
         setAnchorEl(null)
     }
 
+    React.useEffect(() => {
+        if (!open) {
+            return
+        }
+
+        const closeOnFileDrag = (event: DragEvent) => {
+            if (Array.from(event.dataTransfer?.types ?? []).includes("Files")) {
+                setAnchorEl(null)
+            }
+        }
+
+        document.addEventListener("dragenter", closeOnFileDrag, true)
+
+        return () => {
+            document.removeEventListener("dragenter", closeOnFileDrag, true)
+        }
+    }, [open])
+
     const changeLanguage = async (lang: string) => {
         handleClose()
         await i18n.changeLanguage(lang)
@@ -73,6 +91,7 @@ const LanguageMenu: React.FC<{
                 anchorEl={anchorEl}
                 open={open}
                 onClose={handleClose}
+                transitionDuration={0}
                 MenuListProps={{
                     "aria-labelledby": "lang-button",
                 }}