From a9b9cf6bf50f08723896659634f2e6afc17bcd42 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Wed, 29 Apr 2026 00:37:56 +0200 Subject: chore: switch from biome to eslint + prettier; fix ton of lint issues --- apps/web/src/hooks/use-committed-ref.ts | 11 +++++++++++ apps/web/src/hooks/use-focus-lock.ts | 15 +++++++++------ 2 files changed, 20 insertions(+), 6 deletions(-) create mode 100644 apps/web/src/hooks/use-committed-ref.ts (limited to 'apps/web/src/hooks') diff --git a/apps/web/src/hooks/use-committed-ref.ts b/apps/web/src/hooks/use-committed-ref.ts new file mode 100644 index 00000000..ff064985 --- /dev/null +++ b/apps/web/src/hooks/use-committed-ref.ts @@ -0,0 +1,11 @@ +import { useLayoutEffect, useRef } from "react"; + +export function useCommittedRef(value: T) { + const ref = useRef(value); + + useLayoutEffect(() => { + ref.current = value; + }, [value]); + + return ref; +} diff --git a/apps/web/src/hooks/use-focus-lock.ts b/apps/web/src/hooks/use-focus-lock.ts index 236d2623..86092aec 100644 --- a/apps/web/src/hooks/use-focus-lock.ts +++ b/apps/web/src/hooks/use-focus-lock.ts @@ -1,4 +1,5 @@ import { useEffect, useRef } from "react"; +import { useCommittedRef } from "@/hooks/use-committed-ref"; type FocusLockCursor = "text" | "default" | "pointer" | "crosshair"; @@ -37,8 +38,7 @@ export function useFocusLock({ allowSelector?: string; }) { const containerRef = useRef(null); - const onDismissRef = useRef(onDismiss); - onDismissRef.current = onDismiss; + const onDismissRef = useCommittedRef(onDismiss); useEffect(() => { if (!isActive) return; @@ -53,10 +53,13 @@ export function useFocusLock({ const handleOutsidePointerDown = (event: PointerEvent) => { if (event.button !== 0) return; - if (container.contains(event.target as Node)) return; + const target = event.target; + if (target instanceof Node && container.contains(target)) return; - const target = event.target as Element | null; - const isAllowedTarget = allowSelector && target?.closest(allowSelector); + const isAllowedTarget = + allowSelector && + target instanceof Element && + target.closest(allowSelector); if (isAllowedTarget) return; onDismissRef.current(); @@ -73,7 +76,7 @@ export function useFocusLock({ container.removeAttribute(DATA_ATTR); focusLockStyle.remove(); }; - }, [isActive, cursor, allowSelector]); + }, [isActive, cursor, allowSelector, onDismissRef]); return { containerRef }; } -- cgit v1.3.1