Fix Custom Callout Unmount (#63)

Nicolapps · Jun 17, 2024 · 9a48478 · 9a48478
1 parent 8446d73
commit 9a48478
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 34 deletions.
diff --git a/src/components/Annotation.tsx b/src/components/Annotation.tsx
@@ -4,6 +4,7 @@ import React, {
   useState,
   useMemo,
   useRef,
+  useLayoutEffect,
 } from 'react';
 import { createPortal } from 'react-dom';
 import MapContext from '../context/MapContext';
@@ -63,22 +64,6 @@ export default function Annotation({
   const contentEl = useMemo<HTMLDivElement>(() => document.createElement('div'), []);
   const map = useContext(MapContext);
 
-  // Coordinates
-  useEffect(() => {
-    if (map === null) return undefined;
-
-    const a = new mapkit.Annotation(
-      new mapkit.Coordinate(latitude, longitude),
-      () => contentEl,
-    );
-    map.addAnnotation(a);
-    setAnnotation(a);
-
-    return () => {
-      map.removeAnnotation(a);
-    };
-  }, [map, latitude, longitude]);
-
   // Padding
   useEffect(() => {
     if (!annotation) return;
@@ -103,7 +88,7 @@ export default function Annotation({
   const calloutElementRef = useRef<HTMLDivElement>(null);
 
   // Callout
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!annotation) return;
 
     const callOutObj: mapkit.AnnotationCalloutDelegate = {};
@@ -137,6 +122,12 @@ export default function Annotation({
       // @ts-expect-error
       delete annotation.callout;
     }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      // @ts-expect-error
+      delete annotation.callout;
+    };
   }, [
     annotation,
     calloutElement,
@@ -223,6 +214,23 @@ export default function Annotation({
   forwardMapkitEvent(annotation, 'drag-end', onDragEnd, dragEndParameters);
   forwardMapkitEvent(annotation, 'dragging', onDragging, draggingParameters);
 
+  // Coordinates - This needs to be the last useEffect,
+  // as removing the annotation needs to be the last unmount action
+  useLayoutEffect(() => {
+    if (map === null) return undefined;
+
+    const a = new mapkit.Annotation(
+      new mapkit.Coordinate(latitude, longitude),
+      () => contentEl,
+    );
+    map.addAnnotation(a);
+    setAnnotation(a);
+
+    return () => {
+      map.removeAnnotation(a);
+    };
+  }, [map, latitude, longitude]);
+
   return (
     <>
       {createPortal(

diff --git a/src/components/Marker.tsx b/src/components/Marker.tsx
@@ -1,5 +1,5 @@
 import React, {
-  useContext, useEffect, useRef, useState,
+  useContext, useEffect, useLayoutEffect, useRef, useState,
 } from 'react';
 import { createPortal } from 'react-dom';
 import MapContext from '../context/MapContext';
@@ -61,21 +61,6 @@ export default function Marker({
   const [marker, setMarker] = useState<mapkit.MarkerAnnotation | null>(null);
   const map = useContext(MapContext);
 
-  // Coordinates
-  useEffect(() => {
-    if (map === null) return undefined;
-
-    const m = new mapkit.MarkerAnnotation(
-      new mapkit.Coordinate(latitude, longitude),
-    );
-    map.addAnnotation(m);
-    setMarker(m);
-
-    return () => {
-      map.removeAnnotation(m);
-    };
-  }, [map, latitude, longitude]);
-
   // Enum properties
   useEffect(() => {
     if (!marker) return;
@@ -110,7 +95,7 @@ export default function Marker({
   const calloutElementRef = useRef<HTMLDivElement>(null);
 
   // Callout
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!marker) return;
 
     const callOutObj: mapkit.AnnotationCalloutDelegate = {};
@@ -144,6 +129,12 @@ export default function Marker({
       // @ts-expect-error
       delete marker.callout;
     }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      // @ts-expect-error
+      delete marker.callout;
+    };
   }, [
     marker,
     calloutElement,
@@ -235,6 +226,21 @@ export default function Marker({
   forwardMapkitEvent(marker, 'drag-end', onDragEnd, dragEndParameters);
   forwardMapkitEvent(marker, 'dragging', onDragging, draggingParameters);
 
+  // Coordinates
+  useLayoutEffect(() => {
+    if (map === null) return undefined;
+
+    const m = new mapkit.MarkerAnnotation(
+      new mapkit.Coordinate(latitude, longitude),
+    );
+    map.addAnnotation(m);
+    setMarker(m);
+
+    return () => {
+      map.removeAnnotation(m);
+    };
+  }, [map, latitude, longitude]);
+
   return createPortal(
     <div style={{ display: 'none' }}>
       {(calloutContent !== undefined) && (