Fix pointer events on new map controls (#674)

Fixed the issue addressed [here](#672) on the new map component.
NASA-IMPACT · Oct 2, 2023 · 2d8b371 · 2d8b371
2 parents 0a33ddb + 9185f00
commit 2d8b371
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/app/scripts/components/common/map/controls/coords.tsx b/app/scripts/components/common/map/controls/coords.tsx
@@ -11,8 +11,10 @@ import { CopyField } from '$components/common/copy-field';
 const MapCoordsWrapper = styled.div`
   /* Large width so parent will wrap */
   width: 100vw;
+  pointer-events: none !important;
 
   ${Button} {
+    pointer-events: auto;
     background: ${themeVal('color.base-400a')};
     font-weight: ${themeVal('type.base.regular')};
     font-size: 0.75rem;

diff --git a/app/scripts/components/common/map/mapbox-style-override.ts b/app/scripts/components/common/map/mapbox-style-override.ts
@@ -27,11 +27,15 @@ const MapboxStyleOverride = css`
       gap: ${variableGlsp(0.5)};
       align-items: flex-start;
       float: none;
-      pointer-events: auto;
     }
 
     .mapboxgl-ctrl {
       margin: 0;
+      pointer-events: none;
+
+      > * {
+        pointer-events: auto;
+      }
     }
 
     .mapboxgl-ctrl-attrib {