Fix: `isVisible` function behavior in case of a `<details>` element, on chrome 97 (#35682)

1 files changed, 20 insertions, 1 deletions

diff --git a/js/src/util/index.js b/js/src/util/index.js
index 8bd614d40c..4e52fd3eb0 100644
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -128,7 +128,26 @@ const isVisible = element => {
     return false
   }
 
-  return getComputedStyle(element).getPropertyValue('visibility') === 'visible'
+  const elementIsVisible = getComputedStyle(element).getPropertyValue('visibility') === 'visible'
+  // Handle `details` element as its content may falsie appear visible when it is closed
+  const closedDetails = element.closest('details:not([open])')
+
+  if (!closedDetails) {
+    return elementIsVisible
+  }
+
+  if (closedDetails !== element) {
+    const summary = element.closest('summary')
+    if (summary && summary.parentNode !== closedDetails) {
+      return false
+    }
+
+    if (summary === null) {
+      return false
+    }
+  }
+
+  return elementIsVisible
 }
 
 const isDisabled = element => {