Merge pull request #777 from ibi-group/fix-popup-focustraps

Fix Map Popups (and focus traps)
opentripplanner · Sep 18, 2024 · 5c9f316 · 5c9f316
2 parents dc9c14e + 45820a9
commit 5c9f316
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/packages/map-popup/src/__snapshots__/MapPopup.story.tsx.snap b/packages/map-popup/src/__snapshots__/MapPopup.story.tsx.snap
@@ -59,7 +59,7 @@ exports[`Map Popup FloatingCarEntity smoke-test 1`] = `
 
 exports[`Map Popup FloatingVehicleEntity smoke-test 1`] = `
 <div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
-  <div id="focus-bike_6861-popup-focus-trap"
+  <div id="focus-22bike_686122-popup-focus-trap"
        role="presentation"
   >
     <header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
@@ -116,7 +116,7 @@ exports[`Map Popup FloatingVehicleEntity smoke-test 1`] = `
 
 exports[`Map Popup StationEntity smoke-test 1`] = `
 <div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
-  <div id="focus-hub_1580-popup-focus-trap"
+  <div id="focus-22hub_158022-popup-focus-trap"
        role="presentation"
   >
     <header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">

diff --git a/packages/map-popup/src/index.tsx b/packages/map-popup/src/index.tsx
@@ -101,7 +101,7 @@ function entityIsStation(entity: Entity): entity is Station {
 /**
  * Renders a map popup for a stop, scooter, or shared bike
  */
-export function MapPopup({ closePopup = null, configCompanies, entity, getEntityName, setLocation, setViewedStop }: Props): JSX.Element {
+export function MapPopup({ closePopup = () => {}, configCompanies, entity, getEntityName, setLocation, setViewedStop }: Props): JSX.Element {
   const intl = useIntl()
   if (!entity) return <></>
 
@@ -115,7 +115,7 @@ export function MapPopup({ closePopup = null, configCompanies, entity, getEntity
   const stopId = !bikesAvailablePresent && entity?.code || entity.id.split(":")[1] || entity.id
 
   // Double quotes make the query invalid, so remove them from the id just in case
-  const id = `focus-${entity.id}-popup`.replace(/"/g, "")
+  const id = `focus-${encodeURIComponent(entity.id).replace(/%/g, "")}-popup`
 
   return (
     <Styled.MapOverlayPopup>

diff --git a/packages/otp2-tile-overlay/src/index.tsx b/packages/otp2-tile-overlay/src/index.tsx
@@ -192,6 +192,7 @@ const OTP2TileLayerWithPopup = ({
           onClose={() => setClickedEntity(null)}
         >
           <EntityPopup
+            closePopup={() => setClickedEntity(null)}
             configCompanies={configCompanies}
             entity={{ ...clickedEntity, id: clickedEntity?.id || clickedEntity?.gtfsId }}
             setLocation={setLocation ? (location) => { setClickedEntity(null); setLocation(location) } : null}