diff --git a/packages/ui-essentials/src/components/CustomDropFile/CustomDropFile.tsx b/packages/ui-essentials/src/components/CustomDropFile/CustomDropFile.tsx index 0af18bf5e44..a773ccb3cd0 100644 --- a/packages/ui-essentials/src/components/CustomDropFile/CustomDropFile.tsx +++ b/packages/ui-essentials/src/components/CustomDropFile/CustomDropFile.tsx @@ -1,7 +1,13 @@ // SPDX-FileCopyrightText: 2025 Sequent Tech Inc // // 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("") + 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 = (e) => { e.preventDefault() diff --git a/packages/ui-essentials/src/components/LanguageMenu/LanguageMenu.tsx b/packages/ui-essentials/src/components/LanguageMenu/LanguageMenu.tsx index 891bd794570..0c8b5b2220e 100644 --- a/packages/ui-essentials/src/components/LanguageMenu/LanguageMenu.tsx +++ b/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", }}