Fix popup switching to avoid extra click

src/components/Map.js

@@ -22,8 +22,13 @@ class Map extends Component {
     },
   };
 
-  closePopup = () => {
-    this.setState({ popup: { ...this.initialPopupState } });
+  // Close popup only if the user _isn't_ trying to invoke a different popup
+  onMapClick = (e) => {
+    const isCircleClick =
+      !e.originalEvent.target.classList.contains("mapboxgl-canvas");
+    if (!isCircleClick && this.state.popup.visible) {
+      this.setState({ popup: { ...this.initialPopupState } });
+    }
   };
 
   render() {
@@ -39,6 +44,7 @@ class Map extends Component {
           process.env.REACT_APP_MAPBOX_TOKEN ??
           "pk.eyJ1IjoibWlsZXN3d2F0a2lucyIsImEiOiJjbG0xcXl5cngzNnFyM2twaXk4cG83NXFyIn0.420VQRr7GT87ST-4uJ_9nA"
         }
+        onClick={this.onMapClick}
       >
         {this.props.data.map((i) => (
           <Marker
@@ -75,9 +81,7 @@ class Map extends Component {
           </Marker>
         ))}
 
-        {this.state.popup.visible && (
-          <MapPopup {...this.state.popup} onClose={this.closePopup} />
-        )}
+        {this.state.popup.visible && <MapPopup {...this.state.popup} />}
       </ReactMapGL>
     );
   }

src/components/MapPopup.js

@@ -3,7 +3,7 @@ import { Popup } from "react-map-gl";
 import { formatFacilityName, reformatDate, isLikelyClosed } from "../utils";
 import "./MapPopup.css";
 
-const MapPopup = ({ location, info, onClose }) => {
+const MapPopup = ({ location, info }) => {
   let availableDates = [];
   if (info.availability) {
     availableDates = Object.entries(info.availability)
@@ -19,15 +19,20 @@ const MapPopup = ({ location, info, onClose }) => {
     <Popup
       {...location}
       closeButton={false}
-      closeOnClick={true}
-      closeOnMove={false}
-      onClose={onClose}
+      // This closing is instead handled by a handler on the map itself, which
+      // is how you can switch between circles' popups without closing them
+      // first
+      closeOnClick={false}
       tipSize={0}
       offsetTop={-10}
       anchor="bottom"
       dynamicPosition={false}
       captureScroll={true}
       maxWidth="300px"
+      // This isn't ideal for accessibility, but if this _isn't_ set to `false`
+      // then the first anchor tag in the first popup that's opened gets an
+      // undesirable focus/highlight in macOS Safari
+      focusAfterOpen={false}
     >
       <div className="Map-Popup">
         <span className="Map-Popup-header">