Bug fix/currency selector dropdown

src/sections/Pricing/feature_data.json

@@ -925,7 +925,7 @@
       "teamOperator": "x",
       "enterprise": "x"
     },
-    "docs": ""
+    "docs": "https://docs.layer5.io/cloud/catalog/exploring-the-catalog/"
   },
   {
     "theme": "",
@@ -1183,4 +1183,4 @@
     },
     "docs": ""
   }
-]
+]

src/sections/Pricing/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import PricingWrapper from "./pricing.style";
 import Comparison from "./comparison";
 import FAQ from "../General/Faq";
@@ -42,8 +42,72 @@ const getCustomToggleButtonStyle = (isActive, baseStyle) => ({
 });
 
 export const CurrencySelect = ({ currency, setCurrency }) => {
+  const [open, setOpen] = useState(false);
+
+  const containerRef = useRef(null);
+  const toggleRef = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const el = toggleRef.current ?? containerRef.current;
+    if (!el) return;
+
+    if ("IntersectionObserver" in window) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (!entry.isIntersecting) {
+              setOpen(false);
+            }
+          });
+        },
+        { root: null, threshold: 0.1 }
+      );
+
+      observer.observe(el);
+      return () => observer.disconnect();
+    }
+
+    let ticking = false;
+    const checkRect = () => {
+      const currentEl = toggleRef.current ?? containerRef.current;
+      if (!currentEl) return;
+
+      const rect = currentEl.getBoundingClientRect();
+      const isOutOfView =
+        rect.bottom < 0 ||
+        rect.top > window.innerHeight ||
+        rect.right < 0 ||
+        rect.left > window.innerWidth;
+
+      if (isOutOfView) {
+        setOpen(false);
+      }
+    };
+
+    const onScroll = () => {
+      if (!ticking) {
+        ticking = true;
+        window.requestAnimationFrame(() => {
+          checkRect();
+          ticking = false;
+        });
+      }
+    };
+
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    window.addEventListener("resize", checkRect, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      window.removeEventListener("resize", checkRect);
+    };
+  }, [open]);
+
   return (
     <FormControl
+      ref={containerRef}
       variant="outlined"
       size="small"
       sx={{
@@ -70,19 +134,38 @@ export const CurrencySelect = ({ currency, setCurrency }) => {
       }}
     >
       <InputLabel id="currency-selector-label">Currency</InputLabel>
+
       <Select
+        ref={toggleRef}
         labelId="currency-selector-label"
         value={currency}
-        onChange={(e) => {
-          setCurrency(e.target.value);
-        }}
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+        onChange={(e) => setCurrency(e.target.value)}
         label="Currency"
         renderValue={(value) => (
           <Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#fff" }}>
             <Typography variant="body1">{Currencies[value]?.symbol}</Typography>
             <Typography variant="body2">{Currencies[value]?.name}</Typography>
           </Box>
         )}
+        MenuProps={{
+          disablePortal: true,
+          disableScrollLock: true,
+          PaperProps: {
+            sx: {
+              backgroundColor: "#1E1E1E",
+              color: "white",
+              maxHeight: 300,
+              overflowY: "auto",
+              position: "absolute",
+            },
+          },
+          anchorOrigin: { vertical: "bottom", horizontal: "left" },
+          transformOrigin: { vertical: "top", horizontal: "left" },
+          marginThreshold: 0,
+        }}
       >
         {Object.entries(Currencies).map(([code, { symbol, name }]) => (
           <MenuItem key={code} value={code}>
@@ -97,6 +180,7 @@ export const CurrencySelect = ({ currency, setCurrency }) => {
   );
 };
 
+
 const Pricing = () => {
   // const [monthly, setMonthly] = useState(false);
   const [isYearly, setIsYearly] = useState(false);