Bugfix for custom Callout (#58)

* Modify example to reproduce issue * Implement fix * Restore storybook example
Nicolapps · May 20, 2024 · dcaf080 · dcaf080
1 parent 9083961
commit dcaf080
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 68 deletions.
diff --git a/src/components/Annotation.tsx b/src/components/Annotation.tsx
@@ -223,48 +223,46 @@ export default function Annotation({
  forwardMapkitEvent(annotation, 'drag-end', onDragEnd, dragEndParameters);
  forwardMapkitEvent(annotation, 'dragging', onDragging, draggingParameters);
 
- if (calloutEnabled) {
- return (
- <>
- {calloutContent !== undefined && createPortal(
+ return (
+ <>
+ {createPortal(
+ <div style={{ display: 'none' }}>
+ {(calloutContent !== undefined) && (
  <CalloutContainer
  ref={calloutContentRef}
  type="content"
  >
  {calloutContent}
- </CalloutContainer>,
- document.body,
- )}
- {calloutLeftAccessory !== undefined && createPortal(
+ </CalloutContainer>
+ )}
+ {(calloutLeftAccessory !== undefined) && (
  <CalloutContainer
  ref={calloutLeftAccessoryRef}
  type="left"
  >
  {calloutLeftAccessory}
- </CalloutContainer>,
- document.body,
- )}
- {calloutRightAccessory !== undefined && createPortal(
+ </CalloutContainer>
+ )}
+ {(calloutRightAccessory !== undefined) && (
  <CalloutContainer
  ref={calloutRightAccessoryRef}
  type="right"
  >
  {calloutRightAccessory}
- </CalloutContainer>,
- document.body,
- )}
- {calloutElement !== undefined && createPortal(
+ </CalloutContainer>
+ )}
+ {(calloutElement !== undefined) && (
  <CalloutContainer
  ref={calloutElementRef}
  type="container"
  >
  {calloutElement}
- </CalloutContainer>,
- document.body,
- )}
- {createPortal(children, contentEl)}
- </>
- );
- }
- return createPortal(children, contentEl);
+ </CalloutContainer>
+ )}
+ </div>,
+ document.body,
+ )}
+  {createPortal(children, contentEl)}
+  </>
+ );
 }
diff --git a/src/components/Marker.tsx b/src/components/Marker.tsx
@@ -235,47 +235,41 @@ export default function Marker({
  forwardMapkitEvent(marker, 'drag-end', onDragEnd, dragEndParameters);
  forwardMapkitEvent(marker, 'dragging', onDragging, draggingParameters);
 
- if (calloutEnabled) {
- return (
- <>
- {calloutContent !== undefined && createPortal(
- <CalloutContainer
- ref={calloutContentRef}
- type="content"
- >
- {calloutContent}
- </CalloutContainer>,
- document.body,
- )}
- {calloutLeftAccessory !== undefined && createPortal(
- <CalloutContainer
- ref={calloutLeftAccessoryRef}
- type="left"
- >
- {calloutLeftAccessory}
- </CalloutContainer>,
- document.body,
- )}
- {calloutRightAccessory !== undefined && createPortal(
- <CalloutContainer
- ref={calloutRightAccessoryRef}
- type="right"
- >
- {calloutRightAccessory}
- </CalloutContainer>,
- document.body,
- )}
- {calloutElement !== undefined && createPortal(
- <CalloutContainer
- ref={calloutElementRef}
- type="container"
- >
- {calloutElement}
- </CalloutContainer>,
- document.body,
- )}
- </>
- );
- }
- return null;
+ return createPortal(
+ <div style={{ display: 'none' }}>
+ {(calloutContent !== undefined) && (
+ <CalloutContainer
+ ref={calloutContentRef}
+ type="content"
+ >
+ {calloutContent}
+ </CalloutContainer>
+ )}
+ {(calloutLeftAccessory !== undefined) && (
+ <CalloutContainer
+ ref={calloutLeftAccessoryRef}
+ type="left"
+ >
+ {calloutLeftAccessory}
+ </CalloutContainer>
+ )}
+ {(calloutRightAccessory !== undefined) && (
+ <CalloutContainer
+ ref={calloutRightAccessoryRef}
+ type="right"
+ >
+ {calloutRightAccessory}
+ </CalloutContainer>
+ )}
+ {(calloutElement !== undefined) && (
+ <CalloutContainer
+ ref={calloutElementRef}
+ type="container"
+ >
+ {calloutElement}
+ </CalloutContainer>
+ )}
+ </div>,
+ document.body,
+ );
 }
diff --git a/src/stories/Marker.stories.tsx b/src/stories/Marker.stories.tsx
@@ -201,7 +201,9 @@ export const MarkerClustering = () => {
 MarkerClustering.storyName = 'Clustering three markers into one';
 
 function CustomCalloutElement(
- { title, subtitle, url }: { title: string, subtitle: string, url: string },
+ {
+ title, subtitle, url,
+ }: { title: string, subtitle: string, url: string },
 ) {
  return (
  <div className="landmark">