Interval menu position

BrunoQuaresma · BrunoQuaresma · commit ad8a4aee1afe · 2023-10-02T15:06:47.000Z
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
@@ -4,7 +4,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import { useState, MouseEvent } from "react";
+import { useState, useRef } from "react";
 
 export const insightsIntervals = {
   day: {
@@ -24,35 +24,42 @@ export const IntervalMenu = ({
   value: InsightsInterval;
   onChange: (value: InsightsInterval) => void;
 }) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
   const handleClose = () => {
-    setAnchorEl(null);
+    setOpen(false);
   };
 
   return (
     <div>
       <Button
+        ref={anchorRef}
         id="interval-button"
         aria-controls={open ? "interval-menu" : undefined}
         aria-haspopup="true"
         aria-expanded={open ? "true" : undefined}
-        onClick={handleClick}
+        onClick={() => setOpen(true)}
         endIcon={<ExpandMoreOutlined />}
       >
         {insightsIntervals[value].label}
       </Button>
       <Menu
         id="interval-menu"
-        anchorEl={anchorEl}
+        anchorEl={anchorRef.current}
         open={open}
         onClose={handleClose}
         MenuListProps={{
           "aria-labelledby": "interval-button",
         }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
       >
         {Object.keys(insightsIntervals).map((interval) => {
           const { label } = insightsIntervals[interval as InsightsInterval];
