[WEB-1073] fix: Kanban dnd to work as tested on Chrome, Safari and Firefox (#4301)

* fix Kanban dnd to work as tested on Chrome Safari and Firefox

* fix edge cases

* revert back unintentional change

packages/ui/src/control-link/control-link.tsx

@@ -6,10 +6,11 @@ export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   children: React.ReactNode;
   target?: string;
   disabled?: boolean;
+  className?: string;
 };
 
-export const ControlLink: React.FC<TControlLink> = (props) => {
+export const ControlLink = React.forwardRef<HTMLAnchorElement, TControlLink>((props, ref) => {
-  const { href, onClick, children, target = "_self", disabled = false, ...rest } = props;
+  const { href, onClick, children, target = "_self", disabled = false, className, ...rest } = props;
   const LEFT_CLICK_EVENT_CODE = 0;
 
   const handleOnClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -20,11 +21,20 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
     }
   };
 
-  if (disabled) return <>{children}</>;
+  // if disabled but still has a ref or a className then it has to be rendered without a href
-
+  if (disabled && (ref || className))
     return (
-    <a href={href} target={target} onClick={handleOnClick} {...rest}>
+      <a ref={ref} className={className}>
         {children}
       </a>
     );
-};
+
+  // else if just disabled return without the parent wrapper
+  if (disabled) return <>{children}</>;
+
+  return (
+    <a href={href} target={target} onClick={handleOnClick} {...rest} ref={ref} className={className}>
+      {children}
+    </a>
+  );
+});

web/components/issues/issue-layouts/kanban/block.tsx

@@ -103,7 +103,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
     issueIds,
   } = props;
 
-  const cardRef = useRef<HTMLDivElement | null>(null);
+  const cardRef = useRef<HTMLAnchorElement | null>(null);
   const {
     router: { workspaceSlug },
   } = useApplication();
@@ -138,6 +138,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
     return combine(
       draggable({
         element,
+        dragHandle: element,
         canDrag: () => isDragAllowed,
         getInitialData: () => ({ id: issue?.id, type: "ISSUE" }),
         onDragStart: () => {
@@ -151,7 +152,6 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
       }),
       dropTargetForElements({
         element,
-        canDrop: (payload) => payload.source?.data?.id !== issue?.id,
         getData: () => ({ id: issue?.id, type: "ISSUE" }),
         onDragEnter: () => {
           setIsDraggingOverBlock(true);
@@ -181,18 +181,16 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
           href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
             issue.id
           }`}
-          target="_blank"
+          ref={cardRef}
-          onClick={() => handleIssuePeekOverview(issue)}
-          disabled={!!issue?.tempId}
-        >
-          <div
           className={cn(
-              "rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
+            "block rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
             { "hover:cursor-pointer": isDragAllowed },
             { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id },
             { "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
           )}
-            ref={cardRef}
+          target="_blank"
+          onClick={() => handleIssuePeekOverview(issue)}
+          disabled={!!issue?.tempId}
         >
           <RenderIfVisible
             classNames="space-y-2 px-3 py-2"
@@ -209,7 +207,6 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
               isReadOnly={!canEditIssueProperties}
             />
           </RenderIfVisible>
-          </div>
         </ControlLink>
       </div>
     </>