fix coordinates overlay edit

apps/fishing-map/features/map/Map.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { Fragment, useCallback, useEffect, useRef } from 'react'
 import { useSelector } from 'react-redux'
 import { DeckGL, DeckGLRef } from '@deck.gl/react'
 import dynamic from 'next/dynamic'
@@ -135,11 +135,15 @@ const MapWrapper = () => {
       >
         <MapAnnotations />
       </DeckGL>
-      {isMapDrawing && <DrawDialog />}
+      {isMapDrawing && (
+        <Fragment>
+          <CoordinateEditOverlay />
+          <DrawDialog />
+        </Fragment>
+      )}
       <MapPopups />
       <ErrorNotificationDialog />
       <MapAnnotationsDialog />
-      <CoordinateEditOverlay />
       <MapControls mapLoading={mapLoading || isReportAreaLoading} />
       {isWorkspaceLocation && !isReportLocation && (
         <Hint id="fishingEffortHeatmap" className={styles.helpHintLeft} />

apps/fishing-map/features/map/overlays/draw/CoordinateEditOverlay.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { Feature, Polygon } from 'geojson'
 import { Button, IconButton, InputText } from '@globalfishingwatch/ui-components'
@@ -25,6 +25,13 @@ export const CoordinateEditOverlay = () => {
   const editingPointLongitude =
     newPointLongitude !== null ? Number(newPointLongitude) : Number(currentPointCoordinates?.[0])
 
+  useEffect(() => {
+    if (!currentPointCoordinates?.length) {
+      setNewPointLatitude(null)
+      setNewPointLongitude(null)
+    }
+  }, [currentPointCoordinates])
+
   const allowDeletePoint =
     drawingMode === 'polygons'
       ? drawData &&
@@ -65,12 +72,6 @@ export const CoordinateEditOverlay = () => {
     [drawLayer, editingPointLatitude]
   )
 
-  const onDeletePoint = useCallback(() => {
-    if (allowDeletePoint) {
-      drawLayer?.deleteSelectedPosition()
-    }
-  }, [allowDeletePoint, drawLayer])
-
   const resetEditingPoint = useCallback(() => {
     // As this is triggered with clickOutside we need to wait to reset
     // in case before the deleteSelectedPosition is called
@@ -81,6 +82,13 @@ export const CoordinateEditOverlay = () => {
     }, 1)
   }, [drawLayer])
 
+  const onDeletePoint = useCallback(() => {
+    if (allowDeletePoint) {
+      drawLayer?.deleteSelectedPosition()
+      resetEditingPoint()
+    }
+  }, [allowDeletePoint, drawLayer, resetEditingPoint])
+
   const onConfirm = useCallback(() => {
     drawLayer?.setCurrentPointCoordinates([editingPointLongitude, editingPointLatitude])
     resetEditingPoint()