diff --git a/packages/react-utilities/src/hooks/useOnClickOutside.ts b/packages/react-utilities/src/hooks/useOnClickOutside.ts index e8c8fa72e5401..c46a5f4086e43 100644 --- a/packages/react-utilities/src/hooks/useOnClickOutside.ts +++ b/packages/react-utilities/src/hooks/useOnClickOutside.ts @@ -33,6 +33,7 @@ export type UseOnClickOutsideOptions = { */ export const useOnClickOutside = (options: UseOnClickOutsideOptions) => { const { refs, callback, element, disabled, contains: containsProp } = options; + const timeoutId = React.useRef(undefined); const listener = useEventCallback((ev: MouseEvent | TouchEvent) => { const contains: UseOnClickOutsideOptions['contains'] = @@ -65,9 +66,17 @@ export const useOnClickOutside = (options: UseOnClickOutsideOptions) => { element?.addEventListener('touchstart', conditionalHandler); } + // Garbage collect this event after it's no longer useful to avoid memory leaks + timeoutId.current = setTimeout(() => { + currentEvent = undefined; + }, 1); + return () => { element?.removeEventListener('click', conditionalHandler); element?.removeEventListener('touchstart', conditionalHandler); + + clearTimeout(timeoutId.current); + currentEvent = undefined; }; }, [listener, element, disabled]); };