Fix issues with dragging collapsed lanes

src/components/Item/Item.tsx

@@ -144,13 +144,19 @@ export const DraggableItem = memo(function DraggableItem(props: DraggableItemPro
 
   const { itemIndex, ...innerProps } = props;
 
-  useDragHandle(measureRef, measureRef);
+  const bindHandle = useDragHandle(measureRef, measureRef);
 
   const isMatch = search?.query ? innerProps.item.data.titleSearch.includes(search.query) : false;
   const classModifiers: string[] = getItemClassModifiers(innerProps.item);
 
   return (
-    <div ref={measureRef} className={c('item-wrapper')}>
+    <div
+      ref={(el) => {
+        measureRef.current = el;
+        bindHandle(el);
+      }}
+      className={c('item-wrapper')}
+    >
       <div ref={elementRef} className={classcat([c('item'), ...classModifiers])}>
         {props.isStatic ? (
           <ItemInner

src/components/Lane/Lane.tsx

@@ -58,7 +58,7 @@ function DraggableLaneRaw({
   const measureRef = useRef<HTMLDivElement>(null);
   const dragHandleRef = useRef<HTMLDivElement>(null);
 
-  useDragHandle(measureRef, dragHandleRef);
+  const bindHandle = useDragHandle(measureRef, dragHandleRef);
 
   const shouldMarkItemsComplete = !!lane.data.shouldMarkItemsComplete;
   const isCollapsed = !!lane.data.isCollapsed || !!forceCollapse;
@@ -152,7 +152,7 @@ function DraggableLaneRaw({
         >
           <CollapsedDropArea {...dropAreaProps}>
             <LaneHeader
-              dragHandleRef={dragHandleRef}
+              bindHandle={bindHandle}
               laneIndex={laneIndex}
               lane={lane}
               setIsItemInputVisible={isCompactPrepend ? setEditState : undefined}

src/components/Lane/LaneHeader.tsx

@@ -1,6 +1,6 @@
 import update from 'immutability-helper';
 import { Menu } from 'obsidian';
-import { RefObject, memo } from 'preact/compat';
+import { memo } from 'preact/compat';
 import { Dispatch, StateUpdater, useCallback, useContext, useEffect, useState } from 'preact/hooks';
 import { useNestedEntityPath } from 'src/dnd/components/Droppable';
 import { t } from 'src/lang/helpers';
@@ -19,7 +19,7 @@ import { LaneLimitCounter, LaneTitle } from './LaneTitle';
 interface LaneHeaderProps {
   lane: Lane;
   laneIndex: number;
-  dragHandleRef: RefObject<HTMLDivElement>;
+  bindHandle: (el: HTMLElement) => void;
   setIsItemInputVisible?: Dispatch<StateUpdater<EditState>>;
   isCollapsed: boolean;
   toggleIsCollapsed: () => void;
@@ -83,7 +83,7 @@ function LaneButtons({
 export const LaneHeader = memo(function LaneHeader({
   lane,
   laneIndex,
-  dragHandleRef,
+  bindHandle,
   setIsItemInputVisible,
   isCollapsed,
   toggleIsCollapsed,
@@ -134,7 +134,7 @@ export const LaneHeader = memo(function LaneHeader({
         onDblClick={onDoubleClick}
         className={c('lane-header-wrapper')}
       >
-        <div className={c('lane-grip')} ref={dragHandleRef}>
+        <div className={c('lane-grip')} ref={bindHandle}>
           <GripIcon />
         </div>
 

src/dnd/managers/DragManager.ts

@@ -1,5 +1,5 @@
 import boxIntersect from 'box-intersect';
-import { RefObject, useCallback, useContext, useEffect } from 'preact/compat';
+import { RefObject, useCallback, useContext, useRef } from 'preact/compat';
 import { StateManager } from 'src/StateManager';
 import { handleDragOrPaste } from 'src/components/Item/helpers';
 
@@ -360,17 +360,19 @@ export function useDragHandle(
   handleElement: RefObject<HTMLElement | null>
 ) {
   const dndManager = useContext(DndManagerContext);
+  const unbind = useRef(() => {});
 
-  useEffect(() => {
-    const droppable = droppableElement.current;
-    const handle = handleElement.current;
-
-    if (!dndManager || !droppable || !handle) {
-      return;
+  return useCallback((el: HTMLElement) => {
+    if (handleElement.current !== el) {
+      unbind.current();
+      unbind.current = () => {};
     }
+    if (!el) return;
 
+    const handle = el;
     const onPointerDown = (e: PointerEvent) => {
-      if (e.defaultPrevented) return;
+      if (e.defaultPrevented || !dndManager || !droppableElement.current) return;
+      const droppable = droppableElement.current;
 
       let node = e.targetNode;
       while (node) {
@@ -486,7 +488,7 @@ export function useDragHandle(
       handle.removeEventListener('pointerdown', onPointerDown);
       handle.removeEventListener('touchstart', swallowTouchEvent);
     };
-  }, [droppableElement, handleElement, dndManager]);
+  }, []);
 }
 
 export function createHTMLDndHandlers(stateManager: StateManager) {

src/settings/MetadataSettings.tsx

@@ -42,7 +42,7 @@ function Item({
   const measureRef = useRef<HTMLDivElement>(null);
   const dragHandleRef = useRef<HTMLDivElement>(null);
 
-  useDragHandle(measureRef, dragHandleRef);
+  const bindHandle = useDragHandle(measureRef, dragHandleRef);
 
   const body = (
     <div className={c('setting-controls-wrapper')}>
@@ -108,7 +108,7 @@ function Item({
           <div
             className="mobile-option-setting-drag-icon clickable-icon"
             aria-label={t('Drag to rearrange')}
-            ref={dragHandleRef}
+            ref={bindHandle}
           >
             <Icon name="lucide-grip-horizontal" />
           </div>

src/settings/TagSortSettings.tsx

@@ -46,7 +46,7 @@ function Item({ isStatic, tagIndex, tag, deleteTag, updateTag }: ItemProps) {
   const measureRef = useRef<HTMLDivElement>(null);
   const dragHandleRef = useRef<HTMLDivElement>(null);
 
-  useDragHandle(measureRef, dragHandleRef);
+  const bindHandle = useDragHandle(measureRef, dragHandleRef);
 
   const body = (
     <div className={c('setting-controls-wrapper')}>
@@ -85,7 +85,7 @@ function Item({ isStatic, tagIndex, tag, deleteTag, updateTag }: ItemProps) {
           <div
             className="mobile-option-setting-drag-icon clickable-icon"
             aria-label={t('Drag to rearrange')}
-            ref={dragHandleRef}
+            ref={bindHandle}
           >
             <Icon name="lucide-grip-horizontal" />
           </div>