fix: map zoom and markers

src/app/[locale]/incident/add/components/MapDialog.tsx

@@ -104,13 +104,13 @@ const MapDialog = ({
       singular: field?.meta.language.objectTypeSingular || t('object'),
       plural: field?.meta.language.objectTypePlural || t('objects'),
     }),
-    [field?.meta.language]
+    [field?.meta.language, t]
   )
 
   const [viewState, setViewState] = useState<ViewState>({
     latitude: 0,
     longitude: 0,
-    zoom: 15,
+    zoom: 18,
     bearing: 0,
     padding: {
       top: 0,
@@ -124,8 +124,8 @@ const MapDialog = ({
   // Set viewState coordinates to configured ones
   useEffect(() => {
     if (!loading && config) {
-      setViewState({
-        ...viewState,
+      setViewState((currentState) => ({
+        ...currentState,
         latitude:
           formState.coordinates[0] === 0
             ? config.base.map.center[0]
@@ -134,7 +134,7 @@ const MapDialog = ({
           formState.coordinates[1] === 0
             ? config.base.map.center[1]
             : formState.coordinates[1],
-      })
+      }))
     }
   }, [loading, config, formState.coordinates])
 
@@ -169,7 +169,7 @@ const MapDialog = ({
 
       setMapFeatures({ ...features, features: featuresWithId })
     }
-  }, [features])
+  }, [features, field])
 
   // memoize list of features to show in left sidebar
   const featureList = useMemo(() => {
@@ -185,7 +185,7 @@ const MapDialog = ({
     }
 
     return []
-  }, [formState.selectedFeatures, mapFeatures?.features, dialogMap?.getZoom()])
+  }, [config, dialogMap, formState.selectedFeatures, mapFeatures])
 
   // Update position, flyTo position, after this set the marker position
   const updatePosition = (lat: number, lng: number) => {
@@ -391,7 +391,7 @@ const MapDialog = ({
       // @ts-ignore
       canvas?.removeEventListener('keydown', eventHandler)
     }
-  }, [dialogMap, onMapReady])
+  }, [dialogMap, keyDownHandler, onMapReady])
 
   const assetSelectFeatureLabel =
     isAssetSelect && field ? field.meta.language.title || field.meta.label : ''
@@ -434,7 +434,10 @@ const MapDialog = ({
               </ButtonGroup>
             </form>
           </AlertDialog>
-          <div className="col-span-1 flex flex-col min-h-[100vh] max-h-[100vh] md:max-h-screen gap-4">
+          <form
+            method="dialog"
+            className="col-span-1 flex flex-col min-h-[100vh] max-h-[100vh] md:max-h-screen gap-4"
+          >
             <div className="flex flex-col overflow-y-auto gap-4 p-4">
               <Heading level={1}>
                 {field?.meta.language.title
@@ -513,6 +516,7 @@ const MapDialog = ({
               <Button
                 appearance="primary-action-button"
                 className="ml-4 mr-4 mb-4"
+                type="submit"
               >
                 {isAssetSelect
                   ? formState.selectedFeatures.length === 0
@@ -536,7 +540,7 @@ const MapDialog = ({
                   : t('choose_this_location')}
               </Button>
             </Dialog.Close>
-          </div>
+          </form>
           {config && (
             <div
               className="col-span-1 md:col-span-2 min-h-[100vh] max-h-[50vh] md:max-h-screen relative"

src/app/[locale]/incident/add/components/questions/AssetSelect.tsx

@@ -73,15 +73,18 @@ export const AssetSelect = ({ field }: AssetSelectProps) => {
     }
 
     if (dialogMap) {
-      dialogMap.on('moveend', setNewFeatures)
+      dialogMap.on('load', setNewFeatures)
+
+      dialogMap.on('move', setNewFeatures)
     }
 
     return () => {
       if (dialogMap) {
-        dialogMap.off('moveend', setNewFeatures)
+        dialogMap.off('load', setNewFeatures)
+        dialogMap.off('move', setNewFeatures)
       }
     }
-  }, [dialogMap])
+  }, [config, dialogMap, field])
 
   // If formStoreState.selectedFeatures changes, populate form with selected assets
   useEffect(() => {
@@ -124,7 +127,7 @@ export const AssetSelect = ({ field }: AssetSelectProps) => {
     }
 
     populateFormValueWithAssets()
-  }, [formStoreState.selectedFeatures])
+  }, [config, field, formStoreState.selectedFeatures, setValue])
 
   return (
     <Fieldset invalid={Boolean(errorMessage)} className="w-full">

src/components/ui/AddressCombobox.tsx

@@ -85,18 +85,23 @@ export const AddressCombobox = ({
       updateForm({
         ...formState,
         address: selectedAddress,
-        coordinates: [
+        coordinates: selectedAddress && [
           selectedAddress.coordinates[1],
           selectedAddress.coordinates[0],
         ],
       })
+    } else {
+      updateForm({
+        ...formState,
+        address: selectedAddress,
+      })
+    }
 
-      if (updatePosition) {
-        updatePosition(
-          selectedAddress.coordinates[1],
-          selectedAddress.coordinates[0]
-        )
-      }
+    if (selectedAddress && updatePosition) {
+      updatePosition(
+        selectedAddress.coordinates[1],
+        selectedAddress.coordinates[0]
+      )
     }
 
     if (setIsMapSelected) {