Fix hovering and delete button issues in backlog view

MaibornWolff · Nov 29, 2023 · deaee26 · deaee26
1 parent a48f96c
commit deaee26
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git 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 (
-    <Box sx={{ position: "absolute", bottom: 5, right: 11 }}>
+    <Box ref={ref} sx={{ position: "absolute", bottom: 5, right: 11 }}>
       <Transition
         mounted={mounted}
         transition="fade"
@@ -41,7 +43,10 @@ export function DeleteButton({
                 size="sm"
                 variant="transparent"
                 style={styles}
-                onClick={() => setIssuePopoverOpened(!issuePopoverOpened)}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setIssuePopoverOpened(!issuePopoverOpened)
+                }}
               >
                 <IconTrash />
               </ActionIcon>
@@ -54,6 +59,13 @@ export function DeleteButton({
                     : theme.white,
               })}
             >
+              <div style={{
+                height: "20px",
+                position: "absolute",
+                width: "inherit",
+                left: "0px",
+                top: "-10px",
+              }} />
               <DeleteIssueAlert
                 issueKey={issueKey}
                 closeModal={() => setIssuePopoverOpened(false)}

diff --git 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!
       </Alert>
       <Button
-        onClick={() => {
-          closeModal()
+        onClick={(e) => {
+          e.stopPropagation()
           deleteIssue.mutate(issueKey)
+          closeModal()
         }}
       >
         Confirm