From 0d4bcd2758671f2b68508a8ec1cafa5158311342 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 1 Sep 2023 11:23:43 +0530
Subject: [PATCH] fix: Gantt chart bugs (#2024)

* fix: only left mouse button should trigger all the events

* fix: extra block shadow
---
 .../app/components/gantt-chart/helpers/draggable.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx
index 20423ff59..b665bf5d3 100644
--- a/apps/app/components/gantt-chart/helpers/draggable.tsx
+++ b/apps/app/components/gantt-chart/helpers/draggable.tsx
@@ -73,9 +73,11 @@ export const ChartDraggable: React.FC<Props> = ({
   };
 
   // handle block resize from the left end
-  const handleBlockLeftResize = () => {
+  const handleBlockLeftResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (!currentViewData || !resizableRef.current || !block.position) return;
 
+    if (e.button !== 0) return;
+
     const resizableDiv = resizableRef.current;
 
     const columnWidth = currentViewData.data.width;
@@ -126,9 +128,11 @@ export const ChartDraggable: React.FC<Props> = ({
   };
 
   // handle block resize from the right end
-  const handleBlockRightResize = () => {
+  const handleBlockRightResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (!currentViewData || !resizableRef.current || !block.position) return;
 
+    if (e.button !== 0) return;
+
     const resizableDiv = resizableRef.current;
 
     const columnWidth = currentViewData.data.width;
@@ -173,6 +177,8 @@ export const ChartDraggable: React.FC<Props> = ({
   const handleBlockMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (!enableBlockMove || !currentViewData || !resizableRef.current || !block.position) return;
 
+    if (e.button !== 0) return;
+
     e.preventDefault();
     e.stopPropagation();
 
@@ -266,7 +272,7 @@ export const ChartDraggable: React.FC<Props> = ({
       <div
         id={`block-${block.id}`}
         ref={resizableRef}
-        className="relative group cursor-pointer font-medium rounded shadow-sm h-full inline-flex items-center transition-all"
+        className="relative group cursor-pointer font-medium h-full inline-flex items-center transition-all"
         style={{
           marginLeft: `${block.position?.marginLeft}px`,
           width: `${block.position?.width}px`,