@rpg-engine/long-bow 0.7.81 → 0.7.82

package/package.json

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

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

@@ -13,6 +13,7 @@ import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useRef } from 'react';
 import Draggable, { DraggableEventHandler } from 'react-draggable';
 import styled from 'styled-components';
+import useTouchTarget from '../../../hooks/useTouchTarget';
 import { IPosition } from '../../../types/eventTypes';
 import { rarityColor } from './ItemSlotRarity';
 import { ItemSlotRenderer } from './ItemSlotRenderer';
@@ -151,6 +152,8 @@ export const ItemSlot: React.FC<IProps> = observer(
       setContextActions,
     } = useItemSlotDetails();
 
+    const getTouchTarget = useTouchTarget();
+
     const {
       isContextMenuVisible,
       clearDetailsState,
@@ -231,7 +234,12 @@ export const ItemSlot: React.FC<IProps> = observer(
           item: null,
         });
 
-        const target = e.target as HTMLElement;
+        let target = e.target as HTMLElement;
+
+        if (isMobile()) {
+          target = getTouchTarget(e as MouseEvent);
+        }
+
         handleShortcutSetter(target);
         removeDraggingClass(target);
 

package/src/hooks/useTouchTarget.ts

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+
+interface IEventWithTarget {
+  target: EventTarget | null;
+}
+
+interface ITouchEvent extends IEventWithTarget {
+  changedTouches?: TouchList;
+
+  touches?: TouchList;
+}
+
+export function useTouchTarget() {
+  const getTouchTarget = useCallback(
+    (e: MouseEvent | TouchEvent | IEventWithTarget): HTMLElement => {
+      // Check if it's a touch event
+      if ('changedTouches' in e || 'touches' in e) {
+        const touchEvent = e as ITouchEvent;
+        const touch = touchEvent.changedTouches?.[0] || touchEvent.touches?.[0];
+
+        if (touch) {
+          return document.elementFromPoint(
+            touch.clientX,
+            touch.clientY
+          ) as HTMLElement;
+        }
+      }
+
+      // If it's not a touch event or touch is not available, fallback to target
+      return (e.target as HTMLElement) || document.body;
+    },
+    []
+  );
+
+  return getTouchTarget;
+}
+
+export default useTouchTarget;