fix the drag and drop overflow scroll (#36)

benhoneywill · Mar 21, 2022 · e0f1004 · e0f1004
1 parent bf76505
commit e0f1004
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 60 deletions.
diff --git a/app/components/drag-and-drop/components/category-drop-zone.tsx b/app/components/drag-and-drop/components/category-drop-zone.tsx
@@ -2,7 +2,7 @@ import type { FC } from "react";
 
 import { useContext } from "react";
 
-import { Box } from "@chakra-ui/layout";
+import { Box, HStack } from "@chakra-ui/layout";
 import { Droppable } from "react-beautiful-dnd";
 import { Button } from "@chakra-ui/button";
 import { useColorModeValue } from "@chakra-ui/react";
@@ -22,54 +22,63 @@ const CategoryDropZone: FC = () => {
   const dragColor = useColorModeValue("blue.200", "blue.700");
 
   return (
-    <Droppable
-      droppableId="category"
-      type="category"
-      isDropDisabled={readonly}
-      direction="horizontal"
-    >
-      {(provided, snapshot) => (
-        <Box
-          {...provided.droppableProps}
-          ref={provided.innerRef}
-          bg={snapshot.isDraggingOver ? dragColor : ""}
-          width="100%"
-          height="100%"
-          userSelect="none"
-        >
-          <HorizontalScroller>
-            {categories.map((category, index) => (
-              <DraggableCategory
-                key={category.id}
-                category={category}
-                index={index}
-              />
-            ))}
+    <HorizontalScroller>
+      <Droppable
+        droppableId="category"
+        type="category"
+        isDropDisabled={readonly}
+        direction="horizontal"
+      >
+        {(provided, snapshot) => (
+          <Box
+            {...provided.droppableProps}
+            ref={provided.innerRef}
+            bg={snapshot.isDraggingOver ? dragColor : ""}
+            height="100%"
+            userSelect="none"
+          >
+            <HStack
+              spacing={0}
+              alignItems="flex-start"
+              width="100%"
+              height="100%"
+              px={3}
+              py={6}
+            >
+              {categories.map((category, index) => (
+                <DraggableCategory
+                  key={category.id}
+                  category={category}
+                  index={index}
+                />
+              ))}
 
-            {provided.placeholder}
+              {provided.placeholder}
 
-            {addCategory && (
-              <Box
-                width="290px"
-                flex="0 0 290px"
-                padding={2}
-                borderRadius="md"
-                mx={1}
-              >
-                <Button
-                  isFullWidth
-                  size="sm"
-                  colorScheme="blue"
-                  onClick={addCategory}
+              {addCategory && (
+                <Box
+                  width="290px"
+                  flex="0 0 290px"
+                  padding={2}
+                  borderRadius="md"
+                  mx={1}
+                  onMouseDown={(e) => e.stopPropagation()}
                 >
-                  New category
-                </Button>
-              </Box>
-            )}
-          </HorizontalScroller>
-        </Box>
-      )}
-    </Droppable>
+                  <Button
+                    isFullWidth
+                    size="sm"
+                    colorScheme="blue"
+                    onClick={addCategory}
+                  >
+                    New category
+                  </Button>
+                </Box>
+              )}
+            </HStack>
+          </Box>
+        )}
+      </Droppable>
+    </HorizontalScroller>
   );
 };
 

diff --git a/app/components/drag-and-drop/components/draggable-category.tsx b/app/components/drag-and-drop/components/draggable-category.tsx
@@ -20,7 +20,12 @@ const DraggableCategory: FC<DraggableCategoryProps> = memo(
     const { readonly } = useContext(dragAndDropContext);
 
     return (
-      <Box key={category.id} height="100%" pointerEvents="none">
+      <Box
+        key={category.id}
+        height="100%"
+        pointerEvents="none"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
         <Draggable
           draggableId={category.id}
           index={index}

diff --git a/app/components/drag-and-drop/components/horizontal-scroller.tsx b/app/components/drag-and-drop/components/horizontal-scroller.tsx
@@ -2,7 +2,7 @@ import type { FC } from "react";
 
 import { useEffect, useRef, useState } from "react";
 
-import { HStack } from "@chakra-ui/layout";
+import { Box } from "@chakra-ui/layout";
 import {
   useBreakpointValue,
   useColorModeValue,
@@ -70,31 +70,24 @@ const HorizontalScroller: FC = ({ children }) => {
   }, [isDown, bgDragEnabled, scrollLeft, startX]);
 
   return (
-    <HStack
-      spacing={0}
+    <Box
       overflowX="auto"
-      alignItems="flex-start"
       width="100%"
       height="100%"
       css={bgDragEnabled && scrollBarStyles}
-      px={3}
-      pt={6}
-      pb={bgDragEnabled ? 2 : 6}
       ref={scroller}
+      display="flex"
+      justifyContent="stretch"
       onMouseDown={(e) => {
-        if (
-          scroller.current &&
-          e.target === scroller.current &&
-          bgDragEnabled
-        ) {
+        if (scroller.current && bgDragEnabled) {
           setIsDown(true);
           setStartX(e.pageX - scroller.current?.offsetLeft);
           setScrollLeft(scroller.current?.scrollLeft);
         }
       }}
     >
       {children}
-    </HStack>
+    </Box>
   );
 };