diff --git a/src/components/BacklogView/Issue/DeleteButton.tsx b/src/components/BacklogView/Issue/DeleteButton.tsx index 63ce6fd6..982070ed 100644 --- a/src/components/BacklogView/Issue/DeleteButton.tsx +++ b/src/components/BacklogView/Issue/DeleteButton.tsx @@ -1,6 +1,7 @@ import { ActionIcon, Transition, Popover, Box } from "@mantine/core" import { IconTrash } from "@tabler/icons" import { useEffect, useState } from "react" +import { useHover } from "@mantine/hooks"; import { DeleteIssueAlert } from "../../DetailView/Components/DeleteIssue/DeleteIssueAlert" export function DeleteButton({ @@ -11,15 +12,16 @@ export function DeleteButton({ issueKey: string }) { const [issuePopoverOpened, setIssuePopoverOpened] = useState(false) + const { ref, hovered } = useHover() useEffect(() => { - if (!mounted) { + if (!mounted && !hovered) { setIssuePopoverOpened(false) } - }, [mounted]) + }, [mounted, hovered]) return ( - + setIssuePopoverOpened(!issuePopoverOpened)} + onClick={(e) => { + e.stopPropagation() + setIssuePopoverOpened(!issuePopoverOpened) + }} > @@ -54,6 +59,13 @@ export function DeleteButton({ : theme.white, })} > +
setIssuePopoverOpened(false)} diff --git a/src/components/DetailView/Components/DeleteIssue/DeleteIssueAlert.tsx b/src/components/DetailView/Components/DeleteIssue/DeleteIssueAlert.tsx index 1d614298..c366b340 100644 --- a/src/components/DetailView/Components/DeleteIssue/DeleteIssueAlert.tsx +++ b/src/components/DetailView/Components/DeleteIssue/DeleteIssueAlert.tsx @@ -23,9 +23,10 @@ export function DeleteIssueAlert({ If you delete this issue, all related subtasks will be deleted as well!