Fix popup issue (#1368)

## Launch Checklist

When clicking the map to create a popup and then clicking on the map
again without closing the popup something breaks in react.
This PR fixes it.

Steps to reproduce:
1. Click on the map
2. Click on the map but not on the popup

The following malformed popup appears:
Before:
<img width="610" height="626" alt="image"
src="https://github.com/user-attachments/assets/99cbdf9a-0b3c-436d-ab13-f219ee3c6e75"
/>

After - popup looks good.
<img width="610" height="626" alt="image"
src="https://github.com/user-attachments/assets/6b379c0d-cbbf-40ed-916d-3cc10eaf4410"
/>

I couldn't make cypress reproduce the exact scenario, but I added some
basic tests for popups.

 - [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

cypress/e2e/map.cy.ts

@@ -29,4 +29,23 @@ describe("map", () => {
       then(get.searchControl()).shouldBeVisible();
     });
   });
+
+  describe("popup", () => {
+    beforeEach(() => {
+      when.setStyle("rectangles");
+    })
+    it("should open on feature click", () => {
+      when.clickCenter("maplibre:map");
+      then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
+    });
+
+    it("should open a second feature after closing popup", () => {
+      when.clickCenter("maplibre:map");
+      then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
+      when.closePopup();
+      then(get.elementByTestId("feature-layer-popup")).shouldNotExist();
+      when.clickCenter("maplibre:map");
+      then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
+    });
+  });
 });

cypress/e2e/maputnik-cypress-helper.ts

@@ -21,6 +21,11 @@ export default class MaputnikCypressHelper {
       this.helper.when.wait(1);
       this.helper.get.elementByTestId(targetElement).realMouseUp();
     },
+    clickCenter: (element: string) => {
+      this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
+      this.helper.when.wait(200);
+      this.helper.get.elementByTestId(element).realMouseUp();
+    },
     ...this.helper.when,
   };
 

cypress/e2e/maputnik-driver.ts

@@ -78,6 +78,13 @@ export class MaputnikDriver {
           fixture: "geojson-raster-style.json",
         },
       });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "rectangles-style.json",
+        response: {
+          fixture: "rectangles-style.json",
+        },
+      });
       this.helper.given.interceptAndMockResponse({
         method: "GET",
         url: "*example.local/*",
@@ -107,7 +114,7 @@ export class MaputnikDriver {
         .selectFile("cypress/fixtures/example-style.json", { force: true });
     },
     setStyle: (
-      styleProperties: "geojson" | "raster" | "both" | "layer" | "",
+      styleProperties: "geojson" | "raster" | "both" | "layer" | "rectangles" | "",
       zoom?: number
     ) => {
       const url = new URL(baseUrl);
@@ -124,7 +131,11 @@ export class MaputnikDriver {
       case "layer":
         url.searchParams.set("style", baseUrl + "example-layer-style.json");
         break;
+      case "rectangles":
+        url.searchParams.set("style", baseUrl + "rectangles-style.json");
+        break;
       }
+
       if (zoom) {
         url.hash = `${zoom}/41.3805/2.1635`;
       }
@@ -164,6 +175,10 @@ export class MaputnikDriver {
         .clear()
         .type(text, { parseSpecialCharSequences: false });
     },
+
+    closePopup: () => {
+      this.helper.get.element(".maplibregl-popup-close-button").click();
+    }
   };
 
   public get = {

cypress/fixtures/rectangles-style.json

@@ -0,0 +1,92 @@
+{
+  "version": 8,
+  "sources": {
+    "rectangles": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [
+                  [
+                    -130.78125,
+                    -33.13755119234615
+                  ],
+                  [
+                    -130.78125,
+                    63.548552232036414
+                  ],
+                  [
+                    15.468749999999998,
+                    63.548552232036414
+                  ],
+                  [
+                    15.468749999999998,
+                    -33.13755119234615
+                  ],
+                  [
+                    -130.78125,
+                    -33.13755119234615
+                  ]
+                ]
+              ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [
+                  [
+                    -48.515625,
+                    -54.97761367069625
+                  ],
+                  [
+                    -48.515625,
+                    36.5978891330702
+                  ],
+                  [
+                    169.45312499999997,
+                    36.5978891330702
+                  ],
+                  [
+                    169.45312499999997,
+                    -54.97761367069625
+                  ],
+                  [
+                    -48.515625,
+                    -54.97761367069625
+                  ]
+                ]
+              ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "white"
+      }
+    },
+    {
+      "id": "rectangles",
+      "type": "fill",
+      "source": "rectangles",
+      "paint": {
+        "fill-opacity": 0.3
+      }
+    }
+  ]
+}