From 9db1844a1ba70af4bcdc4fb560890546b20d0c34 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Sun, 12 Oct 2025 12:55:00 +0200
Subject: [PATCH] fix add item flow

---
 .../Map/Subcomponents/AddButton.tsx           | 42 +++++--------------
 .../Map/Subcomponents/SelectPositionToast.tsx |  2 +-
 2 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/lib/src/Components/Map/Subcomponents/AddButton.tsx b/lib/src/Components/Map/Subcomponents/AddButton.tsx
index 18e1dc5e..8f7854a1 100644
--- a/lib/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/lib/src/Components/Map/Subcomponents/AddButton.tsx
@@ -10,11 +10,7 @@ import { useLayers } from '#components/Map/hooks/useLayers'
 import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
 import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
 
-import type {
-  MouseEvent as ReactMouseEvent,
-  TouchEvent as ReactTouchEvent,
-  PointerEvent as ReactPointerEvent,
-} from 'react'
+import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react'
 
 export default function AddButton({
   triggerAction,
@@ -36,14 +32,15 @@ export default function AddButton({
     DomEvent.disableClickPropagation(container)
     DomEvent.disableScrollPropagation(container)
 
-    const stopPointerPropagation = (event: PointerEvent) => {
+    const handlePointerDown = (event: PointerEvent) => {
       event.stopPropagation()
+      event.preventDefault()
     }
 
-    DomEvent.on(container, 'pointerdown pointerup pointermove', stopPointerPropagation)
+    DomEvent.on(container, 'pointerdown', handlePointerDown)
 
     return () => {
-      DomEvent.off(container, 'pointerdown pointerup pointermove', stopPointerPropagation)
+      DomEvent.off(container, 'pointerdown', handlePointerDown)
     }
   }, [])
 
@@ -62,12 +59,12 @@ export default function AddButton({
   }
 
   const stopPropagation = (
-    event:
-      | ReactMouseEvent<HTMLElement>
-      | ReactTouchEvent<HTMLElement>
-      | ReactPointerEvent<HTMLElement>,
+    event: ReactMouseEvent<HTMLElement> | ReactTouchEvent<HTMLElement>,
   ): void => {
-    event.preventDefault()
+    const shouldPreventDefault = event.type === 'mousedown' || event.type === 'touchstart'
+    if (shouldPreventDefault) {
+      event.preventDefault()
+    }
     event.stopPropagation()
     if (
       'nativeEvent' in event &&
@@ -96,18 +93,9 @@ export default function AddButton({
           <button
             type='button'
             className='tw:z-500 tw:btn tw:btn-circle tw:btn-lg tw:shadow tw:bg-base-100'
-            onPointerDown={(event) => {
-              stopPropagation(event)
-            }}
-            onPointerUp={(event) => {
-              stopPropagation(event)
-            }}
             onMouseDown={(event) => {
               stopPropagation(event)
             }}
-            onMouseUp={(event) => {
-              stopPropagation(event)
-            }}
             onClick={(event) => {
               stopPropagation(event)
               setIsOpen((prev) => !prev)
@@ -115,10 +103,6 @@ export default function AddButton({
             onTouchStart={(event) => {
               stopPropagation(event)
             }}
-            onTouchEnd={(event) => {
-              stopPropagation(event)
-              setIsOpen((prev) => !prev)
-            }}
           >
             <SVG src={PlusSVG} className='tw:h-5 tw:w-5' />
           </button>
@@ -144,18 +128,12 @@ export default function AddButton({
                           onMouseDown={(event) => {
                             stopPropagation(event)
                           }}
-                          onMouseUp={(event) => {
-                            stopPropagation(event)
-                          }}
                           onClick={(event) => {
                             handleLayerSelect(event, layer)
                           }}
                           onTouchStart={(event) => {
                             stopPropagation(event)
                           }}
-                          onTouchEnd={(event) => {
-                            handleLayerSelect(event, layer)
-                          }}
                         >
                           <img
                             src={appState.assetsApi.url + layer.markerIcon.image}
diff --git a/lib/src/Components/Map/Subcomponents/SelectPositionToast.tsx b/lib/src/Components/Map/Subcomponents/SelectPositionToast.tsx
index e4e9efd8..d10addaf 100644
--- a/lib/src/Components/Map/Subcomponents/SelectPositionToast.tsx
+++ b/lib/src/Components/Map/Subcomponents/SelectPositionToast.tsx
@@ -89,7 +89,7 @@ export const SelectPositionToast = ({
         : undefined
 
     return (
-      <div className='tw:relative'>
+      <div>
         <div className='tw:flex tw:flex-row tw:items-center'>
           <div
             className='tw:flex tw:items-center tw:gap-3 tw:p-2 tw:rounded-selector tw:text-white tw:mr-2'