fix: isPopupVisible logic for AzureMapHtmlMarker

Author: Scott Kang

__mocks__/azure-maps-control.js

@@ -67,6 +67,7 @@ module.exports = {
         isOpen: jest.fn(() => true),
         open: jest.fn(() => false),
         togglePopup: jest.fn(),
+        setOptions: jest.fn(),
         close: jest.fn()
       }
     }))

src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import { Map, Popup } from 'azure-maps-control'
 import React from 'react'
 import { AzureMapsContext } from '../../../contexts/AzureMapContext'
-import AzureMaphtmlMarker from './AzureMapHtmlMarker'
+import AzureMapHtmlMarker from './AzureMapHtmlMarker'
 import { IAzureMapHtmlMarker } from '../../../types'
 import atlas from 'azure-maps-control'
 
@@ -23,7 +23,7 @@ const wrapWithAzureMapContext = (props: IAzureMapHtmlMarker) => {
         mapRef
       }}
     >
-      <AzureMaphtmlMarker {...{ ...props }} />
+      <AzureMapHtmlMarker {...{ ...props }} />
     </AzureMapsContext.Provider>
   )
 }
@@ -81,13 +81,13 @@ describe('AzureMaphtmlMarker tests', () => {
       expect(markerRef.setOptions).toHaveBeenCalledWith({ htmlContent: '<div></div>' })
     })
 
-    it('should close marker popup', () => {
+    it('should open marker popup', () => {
       render(wrapWithAzureMapContext({ isPopupVisible: true, markerContent: <div /> }))
       // Currently we only check if getOptions get called @TODO
       expect(markerRef.getOptions).toHaveBeenCalled()
     })
 
-    it('should open marker popup', () => {
+    it('should close marker popup', () => {
       render(wrapWithAzureMapContext({ isPopupVisible: false, markerContent: <div /> }))
       // Currently we only check if getOptions get called @TODO
       expect(markerRef.getOptions).toHaveBeenCalled()

src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.tsx

@@ -16,7 +16,7 @@ const AzureMapHtmlMarker = memo(
     )
     const { mapRef } = useContext<IAzureMapsContextProps>(AzureMapsContext)
 
-    useCheckRefMount<MapType, boolean>(mapRef, true, mref => {
+    useCheckRefMount<MapType, boolean>(mapRef, true, (mref) => {
       mref.markers.add(markerRef)
       events &&
         events.forEach(({ eventName, callback }) => {
@@ -38,13 +38,14 @@ const AzureMapHtmlMarker = memo(
 
     useEffect(() => {
       if (markerRef && markerRef.getOptions().popup && mapRef) {
-        const isMarkerPopupOpen = markerRef.getOptions().popup?.isOpen()
-        if (isMarkerPopupOpen && isPopupVisible) {
-          markerRef.getOptions().popup?.close()
-        } else if (isMarkerPopupOpen !== undefined) {
-          markerRef.getOptions().popup?.open()
-        } else if ((isPopupVisible && isMarkerPopupOpen) || isPopupVisible) {
-          markerRef.togglePopup()
+        const popupRef = markerRef.getOptions().popup
+        if (isPopupVisible) {
+          popupRef?.setOptions({
+            position: markerRef.getOptions().position
+          })
+          popupRef?.open(mapRef)
+        } else {
+          popupRef?.close()
         }
       }
     }, [isPopupVisible, options, mapRef])