@rpg-engine/long-bow 0.7.48 → 0.7.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.48",
+  "version": "0.7.50",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -142,7 +142,7 @@ export const ItemSlot = React.memo(
       const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
         []
       );
-      const [isDragStarted, setIsDragStarted] = useState(false);
+      const [dragStartTime, setDragStartTime] = useState<number | null>(null);
 
       useEffect(() => {
         setDragState(prev => ({
@@ -201,7 +201,6 @@ export const ItemSlot = React.memo(
 
       const onDraggableStop: DraggableEventHandler = (e, data) => {
         setDraggingItem(null);
-        setIsDragStarted(false);
 
         const target = e.target as HTMLElement;
         if (!target) return;
@@ -217,6 +216,9 @@ export const ItemSlot = React.memo(
         // to prevent the item from being dragged again
         target.classList.remove('react-draggable-dragging');
 
+        const dragEndTime = Date.now();
+        const dragDuration = dragStartTime ? dragEndTime - dragStartTime : 0;
+
         if (dragState.wasDragged && item && !isSelectingShortcut) {
           //@ts-ignore
           const classes: string[] = Array.from(e.target?.classList);
@@ -268,13 +270,13 @@ export const ItemSlot = React.memo(
               }));
             }
           }, 50);
-        } else if (item && !isDragStarted) {
+        } else if (item && dragDuration < 200) {
+          // Consider it a click if drag duration is less than 200ms
           let isTouch = false;
           if (
             !isContextMenuDisabled &&
             e.type === 'touchend' &&
-            !isSelectingShortcut &&
-            !dragState.wasDragged
+            !isSelectingShortcut
           ) {
             isTouch = true;
             setTooltipState(prev => ({ ...prev, mobileVisible: true }));
@@ -313,7 +315,7 @@ export const ItemSlot = React.memo(
           return;
         }
 
-        setIsDragStarted(true);
+        setDragStartTime(Date.now());
 
         if (onDragStart && containerType) {
           onDragStart(item, slotIndex, containerType);