(null);
React.useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
- const popover = document.getElementById('dashkit-popover-portal');
+ const popover = portalRef.current;
if (
containerRef.current && !containerRef.current.contains(event.target as Node) &&
(!popover || !popover.contains(event.target as Node))
@@ -69,6 +71,7 @@ export function usePopover() {
setTriggerRect,
triggerElement,
setTriggerElement,
- containerRef
+ containerRef,
+ portalRef
};
}
diff --git a/src/dashkit/Select/Select.tsx b/src/dashkit/Select/Select.tsx
index 1b827df..424b6b7 100644
--- a/src/dashkit/Select/Select.tsx
+++ b/src/dashkit/Select/Select.tsx
@@ -38,6 +38,7 @@ export function Select({
side,
containerRef,
buttonRef,
+ portalRef,
selectedOption,
handleKeyDown
} = useSelect({ options, value, disabled });
@@ -74,7 +75,7 @@ export function Select({
{isOpen && triggerRect && createPortal(
('bottom');
const containerRef = useRef(null);
const buttonRef = useRef(null);
+ const portalRef = useRef(null);
const selectedOption = options.find(opt => opt.value === value);
@@ -34,7 +35,7 @@ export function useSelect({ options, value, disabled }: UseSelectProps) {
};
const handleScroll = (event: Event) => {
- const menu = document.getElementById('dashkit-select-portal');
+ const menu = portalRef.current;
if (isOpen && menu && !menu.contains(event.target as Node)) {
setIsOpen(false);
}
@@ -48,13 +49,13 @@ export function useSelect({ options, value, disabled }: UseSelectProps) {
return () => {
window.removeEventListener('resize', updateRect);
- window.removeEventListener('scroll', () => setIsOpen(false), true);
+ window.removeEventListener('scroll', handleScroll, true);
};
}, [isOpen]);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
- const menu = document.getElementById('dashkit-select-portal');
+ const menu = portalRef.current;
if (
containerRef.current && !containerRef.current.contains(event.target as Node) &&
(!menu || !menu.contains(event.target as Node))
@@ -89,6 +90,7 @@ export function useSelect({ options, value, disabled }: UseSelectProps) {
side,
containerRef,
buttonRef,
+ portalRef,
selectedOption,
handleKeyDown
};
diff --git a/src/dashkit/utils/scrollLock.test.ts b/src/dashkit/utils/scrollLock.test.ts
new file mode 100644
index 0000000..745fc56
--- /dev/null
+++ b/src/dashkit/utils/scrollLock.test.ts
@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { lockBodyScroll } from './scrollLock';
+
+describe('lockBodyScroll', () => {
+ beforeEach(() => {
+ document.body.style.overflow = '';
+ });
+
+ it('locks the body on first acquire and restores on last release', () => {
+ const release = lockBodyScroll();
+ expect(document.body.style.overflow).toBe('hidden');
+
+ release();
+ expect(document.body.style.overflow).toBe('');
+ });
+
+ it('keeps the body locked while a stacked overlay holds a lock', () => {
+ // e.g. a Drawer opened on top of a Modal
+ const releaseModal = lockBodyScroll();
+ const releaseDrawer = lockBodyScroll();
+
+ // Closing the Drawer must not unlock the page (Modal is still open)
+ releaseDrawer();
+ expect(document.body.style.overflow).toBe('hidden');
+
+ releaseModal();
+ expect(document.body.style.overflow).toBe('');
+ });
+
+ it('ignores repeated releases from the same lock', () => {
+ const releaseOuter = lockBodyScroll();
+ const releaseInner = lockBodyScroll();
+
+ releaseInner();
+ releaseInner(); // double cleanup must not drop the outer lock
+
+ expect(document.body.style.overflow).toBe('hidden');
+
+ releaseOuter();
+ expect(document.body.style.overflow).toBe('');
+ });
+
+ it('restores a previously set overflow value', () => {
+ document.body.style.overflow = 'scroll';
+
+ const release = lockBodyScroll();
+ expect(document.body.style.overflow).toBe('hidden');
+
+ release();
+ expect(document.body.style.overflow).toBe('scroll');
+ });
+});
diff --git a/src/dashkit/utils/scrollLock.ts b/src/dashkit/utils/scrollLock.ts
new file mode 100644
index 0000000..ece390a
--- /dev/null
+++ b/src/dashkit/utils/scrollLock.ts
@@ -0,0 +1,28 @@
+let lockCount = 0;
+let previousOverflow = '';
+
+/**
+ * Lock body scroll with reference counting, so stacked overlays (e.g. a Drawer
+ * opened over a Modal) keep the page locked until the last one closes.
+ *
+ * Returns a release function that must be called on cleanup; it is safe to
+ * call more than once.
+ */
+export function lockBodyScroll(): () => void {
+ if (lockCount === 0) {
+ previousOverflow = document.body.style.overflow;
+ document.body.style.overflow = 'hidden';
+ }
+ lockCount += 1;
+
+ let released = false;
+ return () => {
+ if (released) return;
+ released = true;
+
+ lockCount = Math.max(0, lockCount - 1);
+ if (lockCount === 0) {
+ document.body.style.overflow = previousOverflow;
+ }
+ };
+}
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index 5666410..48ed3b2 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -23,11 +23,9 @@ export function NotFound() {
-
- }>
- Back to Home
-
-
+ }>
+ Back to Home
+