Unmounting of Callout Elements doesn't work

[nikischin]

I just figured out the unmounting of the callout elements implemented with #55 doesn't work.

I implemented the new feature into my app and whenever you navigate to some other view all the annotations overlay the screen. I first thought it would be something related to React Router having issues with Portals but seems like a rather general issue to me.

I will further investigate these days and probably also submit a PR to fix, though wanted to open this bug already if someone comes up with the same issue.

[nikischin]

So to give you an update on this, I investigated the issue and it's not as trivial as I expected it to be. I build a modified storybook example (Marker with custom callout element) at https://github.com/nikischin/mapkit-react/tree/bugfix/customCallout

The error provided looks like this whenever the map is unmount:

I will try further investigate, if you have any experience with similar issues, let me know

[nikischin]

So while the error above is fixed in my implementation, I still get my app crashing whenever a callout is active and the user navigates to another page where the <Map/> is being unmount. I wasn't able to reproduce this in the storybook so I will further investigate on what's the issue.

[nikischin]

So while the error above is fixed in my implementation, I still get my app crashing whenever a callout is active and the user navigates to another page where the is being unmount. I wasn't able to reproduce this in the storybook so I will further investigate on what's the issue.

So I further investigated and it was really challenging to reproduce the error within storybook. However, I found out that in my use case it is quite likely that two (or more) locations have the exactly same coordinates. This works fine with <Markers/>, however not with <Annotations/>.

For more context why it is likely that two points share the exactly same coordinates in my implementation, imagine you have few contacts you would like to display on a map which might share the same address.

As I am able to reproduce, I will try to further investigate.

[nikischin]

This is the storybook error which gave the chance to further look into the mapkit-js error which does happen here: So what I figured out, as a possible workaround, if the size of the element is set, it will not crash, however, in my implementation, I would like the sizing of the callouts to be dynamic based on the content width if possible. And also this introduces the possibility of other errors for some reason I don't yet understand.

[nikischin]

So I further investigated and still find this quite confusing. What I noticed, is that the Annotations doesn't even need to have the same coordinates in order to cause this issue, it rather depends on the DOM point they are rendered to, though depending on the current zoom level you might or might not encounter this bug. I have a reproduction committed at https://github.com/nikischin/mapkit-react/tree/bugfix/customcallout2 in case you would like to have a look at it.