diff --git a/lib/Map.js b/lib/Map.js index 964df3ef..c56bac18 100644 --- a/lib/Map.js +++ b/lib/Map.js @@ -47,6 +47,7 @@ export default function Map({ }) { const targetRef = useRef(/** @type {HTMLElement?} */ (null)); const mapRef = useRef(/** @type {OLMap?} */ (null)); + const oldMapPropsRef = useRef({}); const getMap = useCallback(() => { // avoid creating new map when options object is different @@ -76,7 +77,9 @@ export default function Map({ if (!mapRef.current) { return; } - updateInstanceFromProps(map, MAP, {}, mapProps); + const oldMapProps = oldMapPropsRef.current; + oldMapPropsRef.current = mapProps; + updateInstanceFromProps(map, MAP, oldMapProps, mapProps); render(children, map); }, [children, getMap, mapProps, ref]); diff --git a/package.json b/package.json index c7bde21e..6c20e8d0 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "pretest": "npm run lint", "test": "npm-run-all test:*", "test:lib": "vitest run --root ./tests/lib", + "debug-test:lib": "vitest --inspect-brk --browser --root ./tests/lib --test-timeout=0 --no-file-parallelism", "test:rendering": "playwright test --config=tests/rendering/playwright.config.js", "test:unit": "vitest run --root ./tests/unit", "test:types": "npx tsc --noEmit", diff --git a/tests/lib/Map.test.jsx b/tests/lib/Map.test.jsx index dfc08b71..d9a030bc 100644 --- a/tests/lib/Map.test.jsx +++ b/tests/lib/Map.test.jsx @@ -1,6 +1,6 @@ import {cleanup, render, screen} from '@testing-library/react'; import OLMap from 'ol/Map.js'; -import React from 'react'; +import React, {useState} from 'react'; import {afterEach, describe, expect, it} from 'vitest'; import Map from '../../lib/Map.js'; import Zoom from '../../lib/control/Zoom.js'; @@ -74,4 +74,42 @@ describe('', () => { const controls = map.getControls(); expect(controls.getLength()).toBe(0); }); + + it('unregisters event handlers before registering new ones', async () => { + let map; + function Component() { + const [count, setCount] = useState(0); + + return ( + <> + events {count} +
+ (map = r)} + onCustomEvent={() => setCount(c => c + 1)} + /> +
+ + ); + } + + render(); + + await screen.findByText('events 0'); + + map.dispatchEvent('customevent'); + await screen.findByText('events 1'); + + map.dispatchEvent('customevent'); + await screen.findByText('events 2'); + + map.dispatchEvent('customevent'); + await screen.findByText('events 3'); + + map.dispatchEvent('customevent'); + await screen.findByText('events 4'); + + map.dispatchEvent('customevent'); + await screen.findByText('events 5'); + }); });