Events firing more than once on DrawingManagerF.

[Gonzalo9823]

If you use DrawingManagerF inside a component that re renders, the events fires more than once.

I'm using the component like this:

<DrawingManagerF
  onPolygonComplete={(polygon) => {
    console.log(polygon);
  }}
  options={{
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_RIGHT,
      drawingModes: [google.maps.drawing.OverlayType.POLYGON],
    },
  }}
/>

inside a Form and everything works fine before validation but after the form starts validating (on every change) the listener starts firing more than once.

I think the problem is that

google.maps.event.removeListener(polygoncompleteListener)

its not removing the listener because if you change the useEffect and clear the listener with:

if (polygoncompleteListener !== null) {
    google.maps.event.clearListeners(instance, 'polygoncomplete');
}

its stops firing more than once.

It's this an acceptable solution? Should I create a PR?

Your Environment

os: mac

node --version: v18.12.1

react version: ^18.2.0 (NextJS: 13.1.1)

webpack version: N/A

@babel version: N/A

@react-google-maps/api version: ^2.17.1

How does it behave?

onPolygonComplete will be fired twice after drawing a polygon.

How should it behave correctly?

onPolygonComplete should only be fire once.

Basic implementation of incorrect behavior in codesandbox.com

https://edlhcy-3000.preview.csb.app/

1.- Draw a Polygon: If you see the logs the event will only be fired once. 2.- Press submit (without adding any data): now the form is validating. 3.- Draw a Polygon: If you see the logs the event will be fired more than once.

[StevenLangbroek]

Hey! We're running into this as well. What happens is on the first step of a process we're building, we just display the map. On the 2nd step, we want to add the DrawingManager, so based on a currentStop proper we render specific {children} under the GoogleMap component. We've tried wrapping it in React.memo, in an IIFE, but nothing seems to work. The result is always:

[StevenLangbroek]

🤦 ~~I'll see if hacking in a destructor return on the useEffect block solves the issue, and if so, submit a PR. ~~

edit: there is already a destructor of course, apologies.

[Gonzalo9823]

Hi! I have also experience this "problem" but I already tried setting reactStrictMode to false. And my problem still persist. It does fixes the problem of having 2 Drawing Managers tho.

[StevenLangbroek]

@Gonzalo9823 that's right, but when you do a production build, it works normally for me.

[vrahikka]

I was able to solve this issue by memoizing (useCallback) the function passed to the onPolygonComplete.