fix(editable): change drag handle to be on top part only (#1475)

Co-authored-by: seaerchin <[email protected]>
isomerpages · Sep 7, 2023 · b1fb23c · b1fb23c
1 parent 0385f1b
commit b1fb23c
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 6 deletions.
diff --git a/src/layouts/components/ContactUs/LocationCard.tsx b/src/layouts/components/ContactUs/LocationCard.tsx
@@ -133,9 +133,7 @@ export const LocationCard = ({
               isEmpty={frontMatter.operating_hours.length === 0}
             >
               <Editable.Accordion>
-                {/* Note: contentEditable is required to stop drag and drop
-                    from hitting the first level drag and drop */}
-                <VStack p={0} spacing="0.75rem" contentEditable>
+                <VStack p={0} spacing="1.125rem">
                   {frontMatter.operating_hours.map(
                     (operatingHour, operatingHourIndex) => (
                       <Editable.DraggableAccordionItem

diff --git a/src/layouts/components/Editable/Editable.tsx b/src/layouts/components/Editable/Editable.tsx
@@ -319,7 +319,7 @@ const DraggableAccordionItem = ({
           borderRadius={isNested ? "0.375rem" : "0.5rem"}
           {...draggableProvided.draggableProps}
           ref={draggableProvided.innerRef}
-          {...draggableProvided.dragHandleProps}
+          boxShadow="sm"
           position="relative"
         >
           {({ isExpanded }) => (
@@ -379,6 +379,7 @@ const DraggableAccordionItem = ({
                   borderRadius: isNested ? "0.375rem" : "0.5rem",
                 }}
                 bgColor="none"
+                {...draggableProvided.dragHandleProps}
               >
                 {isNested && (
                   <IconButton

diff --git a/src/layouts/components/NavBar/GroupMenuBody.tsx b/src/layouts/components/NavBar/GroupMenuBody.tsx
@@ -76,8 +76,7 @@ export const GroupMenuBody = ({
               <Editable.Accordion>
                 <VStack p={0} spacing="1.25rem">
                   {sublinks.map((sublink, sublinkIndex) => (
-                    // Note: contentEditable is required to stop drag and drop from hitting the first level drag and drop
-                    <VStack contentEditable w="100%">
+                    <VStack w="100%">
                       <Editable.DraggableAccordionItem
                         draggableId={`sublink-${index}-${sublinkIndex}-draggable`}
                         index={sublinkIndex}