diff --git a/packages/app/src/components/app/play/ui/hotbar/index.jsx b/packages/app/src/components/app/play/ui/hotbar/index.jsx
index 888e360..c927a22 100644
--- a/packages/app/src/components/app/play/ui/hotbar/index.jsx
+++ b/packages/app/src/components/app/play/ui/hotbar/index.jsx
@@ -22,7 +22,7 @@ const HotbarComponent = (props) => {
       key={i}
       item={item}
       className={activeSlotIndex === i ? styles.active : ''}
-      onClick={(event) => {
+      onMouseDown={(event) => {
         if (selfEntity) {
           selfEntity.activeSlotIndex = i;
         }
diff --git a/packages/app/src/components/app/play/ui/item-slot/index.jsx b/packages/app/src/components/app/play/ui/item-slot/index.jsx
index d872378..c23481d 100644
--- a/packages/app/src/components/app/play/ui/item-slot/index.jsx
+++ b/packages/app/src/components/app/play/ui/item-slot/index.jsx
@@ -14,7 +14,7 @@ const ItemSlotComponent = (props) => {
     children,
     className,
     item,
-    onClick,
+    onMouseDown,
   } = props;
   const [qty, setQty] = useState(undefined);
   useEvent(item, 'qtyChanged', useCallback(() => setQty(item.qty), [item]));
@@ -43,7 +43,7 @@ const ItemSlotComponent = (props) => {
   }
   return (
     <button
-      onClick={onClick}
+      onMouseDown={onMouseDown}
       className={classnames(
         styles['item-slot'],
         'unselectable',
@@ -66,7 +66,7 @@ ItemSlotComponent.defaultProps = {
   children: null,
   className: '',
   item: null,
-  onClick: () => {},
+  onMouseDown: () => {},
 };
 
 ItemSlotComponent.propTypes = {
@@ -79,7 +79,7 @@ ItemSlotComponent.propTypes = {
     qty: PropTypes.number,
     imageForSlot: PropTypes.func,
   }),
-  onClick: PropTypes.func,
+  onMouseDown: PropTypes.func,
 };
 
 export default ItemSlotComponent;