diff --git a/ui/src/components/nodes/utils.tsx b/ui/src/components/nodes/utils.tsx index 51065b44..50f5f22b 100644 --- a/ui/src/components/nodes/utils.tsx +++ b/ui/src/components/nodes/utils.tsx @@ -336,6 +336,8 @@ const WrappedHandle = ({ position, children }) => { const handleClick = (event: React.MouseEvent) => { setAnchorEl(anchorEl ? null : event.currentTarget); }; + const store = useContext(RepoContext)!; + const moved = useStore(store, (state) => state.moved); const open = Boolean(anchorEl); const handler = React.useCallback((e) => { if (e.key === "Escape") { @@ -351,6 +353,10 @@ const WrappedHandle = ({ position, children }) => { document.removeEventListener("keydown", handler); }; }, []); + // Remove the popper when the Canvas is moved. + React.useEffect(() => { + setAnchorEl(null); + }, [moved]); return ( <> { setAnchorEl(null); }} > - setAnchorEl(null)}> - {children} - + + {/* Must wrap the ClickAwayContext.Provider in this elem for the click away functionality to work. */} + setAnchorEl(null)}> + {children} + + diff --git a/ui/src/pages/profile.tsx b/ui/src/pages/profile.tsx index 75e88972..06e46548 100644 --- a/ui/src/pages/profile.tsx +++ b/ui/src/pages/profile.tsx @@ -3,16 +3,9 @@ import Divider from "@mui/material/Divider"; import Typography from "@mui/material/Typography"; import Paper from "@mui/material/Paper"; -import { - Button, - ClickAwayListener, - Container, - Popper, - Stack, -} from "@mui/material"; +import { Container, Stack } from "@mui/material"; import useMe from "../lib/me"; -import React from "react"; export default function Profile() { const { loading, me } = useMe(); @@ -41,8 +34,6 @@ export default function Profile() { Name {me.firstname} {me.lastname} Email: {me.email} - CodePod version 0.4.6 - @@ -51,48 +42,3 @@ export default function Profile() { ); } - -const HandleButton = ({}) => { - const [anchorEl, setAnchorEl] = React.useState(null); - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(anchorEl ? null : event.currentTarget); - }; - const open = Boolean(anchorEl); - - const handler = React.useCallback((e) => { - console.log("keydown", e.key); - if (e.key === "Escape") { - setAnchorEl(null); - } - }, []); - - React.useEffect(() => { - document.addEventListener("keydown", handler); - - return () => { - document.removeEventListener("keydown", handler); - }; - }, []); - return ( - <> - - - - { - console.log("click away!"); - setAnchorEl(null); - }} - > - - - - - - - - ); -};