Skip to content

Commit

Permalink
fix(material): clean up resize events
Browse files Browse the repository at this point in the history
  • Loading branch information
juanrgm committed Jul 17, 2023
1 parent 72e8ae5 commit 9722b74
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 12 deletions.
5 changes: 5 additions & 0 deletions .changeset/violet-moles-travel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@suid/material": patch
---

Clean up resize events
32 changes: 20 additions & 12 deletions packages/material/src/Popover/Popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import debounce from "@suid/utils/debounce";
import ownerDocument from "@suid/utils/ownerDocument";
import ownerWindow from "@suid/utils/ownerWindow";
import clsx from "clsx";
import { createEffect, on, splitProps, mergeProps } from "solid-js";
import { createEffect, on, splitProps, mergeProps, onCleanup } from "solid-js";

const $ = createComponentFactory<PopoverTypeMap>()({
name: "MuiPopover",
Expand Down Expand Up @@ -373,28 +373,36 @@ const Popover = $.defineComponent(function Popover(inProps) {
});
}

let handleResize: ((() => void) & { clear: () => void }) | undefined;
let handleResizeCleanup: (() => void) | undefined;

createEffect(
on(
() => [props.anchorEl, props.open, setPositioningStyles],
() => {
if (!props.open) {
return undefined;
}

const handleResize = debounce(() => {
setPositioningStyles();
});
handleResizeCleanup?.();
if (!props.open) return undefined;

const containerWindow = ownerWindow(resolveAnchorEl(props.anchorEl));
containerWindow.addEventListener("resize", handleResize);
return () => {
handleResize.clear();
containerWindow.removeEventListener("resize", handleResize);

handleResizeCleanup = () => {
if (handleResize) {
handleResize.clear();
containerWindow.removeEventListener("resize", handleResize);
handleResize = undefined;
}
};

containerWindow.addEventListener(
"resize",
(handleResize = debounce(() => setPositioningStyles()))
);
}
)
);

onCleanup(() => handleResizeCleanup?.());

const transitionDuration = () => {
let transitionDuration: undefined | typeof baseProps.transitionDuration =
baseProps.transitionDuration;
Expand Down

0 comments on commit 9722b74

Please sign in to comment.