diff --git a/src/material/Menu.tsx b/src/material/Menu.tsx index 04b8d86..a80a423 100644 --- a/src/material/Menu.tsx +++ b/src/material/Menu.tsx @@ -13,10 +13,12 @@ import { animateShrinkToTopRight, } from "../platform/anim"; +type Anchor = Pick + type Props = { open?: boolean; onClose?: JSX.EventHandlerUnion; - anchor: () => DOMRect; + anchor: () => Anchor; }; function px(n?: number) { diff --git a/src/profiles/TootFilterButton.tsx b/src/profiles/TootFilterButton.tsx index 5b9343c..a2a98bc 100644 --- a/src/profiles/TootFilterButton.tsx +++ b/src/profiles/TootFilterButton.tsx @@ -1,15 +1,5 @@ -import { - Button, - MenuItem, - Checkbox, - ListItemText, -} from "@suid/material"; -import { - createMemo, - createSignal, - createUniqueId, - For, -} from "solid-js"; +import { Button, MenuItem, Checkbox, ListItemText } from "@suid/material"; +import { createMemo, createSignal, createUniqueId, For } from "solid-js"; import Menu from "../material/Menu"; import { FilterList, FilterListOff } from "@suid/icons-material"; @@ -68,9 +58,20 @@ function TootFilterButton>(props: Props) { ); }; + let anchor: { left: number; top: number; right: number }; + + const onClick = (event: MouseEvent) => { + anchor = { + left: event.clientX, + right: event.clientX, + top: event.clientY, + }; + setOpen(true); + }; + return ( <> - - - document.getElementById(buttonId)!.getBoundingClientRect() - } - > + anchor}> {(item, idx) => ( <>