Handle visibility of children in a closed details element

clauderic · Oct 19, 2024 · 0676276 · 0676276
1 parent 118215f
commit 0676276
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/.changeset/details-element.md b/.changeset/details-element.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/dom': patch
+---
+
+Children contained in a closed `details ` element are no longer treated as visible.
diff --git a/packages/dom/src/utilities/bounding-rectangle/isOverflowVisible.ts b/packages/dom/src/utilities/bounding-rectangle/isOverflowVisible.ts
@@ -1,3 +1,5 @@
+import {getWindow} from '../execution-context/getWindow.ts';
+
 /*
  * Check if an element has visible overflow.
  * @param element
@@ -6,9 +8,16 @@
  */
 export function isOverflowVisible(
   element: Element,
-  style = getComputedStyle(element)
+  style?: CSSStyleDeclaration
 ) {
-  const {overflow, overflowX, overflowY} = style;
+  if (
+    element instanceof getWindow(element).HTMLDetailsElement &&
+    element.open === false
+  ) {
+    return false;
+  }
+
+  const {overflow, overflowX, overflowY} = style ?? getComputedStyle(element);
 
   return (
     overflow === 'visible' && overflowX === 'visible' && overflowY === 'visible'