From 14c7dc1e886015f2ed845f0f8e88d3597694250f Mon Sep 17 00:00:00 2001
From: Ryan Berliner <22206986+RyanBerliner@users.noreply.github.com>
Date: Thu, 13 Jan 2022 03:55:05 -0500
Subject: Fix: `isVisible` function behavior in case of a `<details>` element,
 on chrome 97 (#35682)

---
 js/src/util/index.js             | 21 ++++++++++++++++++++-
 js/tests/unit/util/index.spec.js | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)

(limited to 'js')

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 => {
diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index 52e64faa91..9d8c5ed986 100644
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -320,6 +320,42 @@ describe('Util', () => {
 
       expect(Util.isVisible(div)).toBeFalse()
     })
+
+    it('should return true if its a closed details element', () => {
+      fixtureEl.innerHTML = '<details id="element"></details>'
+
+      const div = fixtureEl.querySelector('#element')
+
+      expect(Util.isVisible(div)).toBeTrue()
+    })
+
+    it('should return true if the element is visible inside an open details element', () => {
+      fixtureEl.innerHTML = [
+        '<details open>',
+        '  <div id="element"></div>',
+        '</details>'
+      ].join('')
+
+      const div = fixtureEl.querySelector('#element')
+
+      expect(Util.isVisible(div)).toBeTrue()
+    })
+
+    it('should return true if the element is a visible summary in a closed details element', () => {
+      fixtureEl.innerHTML = [
+        '<details>',
+        '  <summary id="element-1">',
+        '    <span id="element-2"></span>',
+        '  </summary>',
+        '</details>'
+      ].join('')
+
+      const element1 = fixtureEl.querySelector('#element-1')
+      const element2 = fixtureEl.querySelector('#element-2')
+
+      expect(Util.isVisible(element1)).toBeTrue()
+      expect(Util.isVisible(element2)).toBeTrue()
+    })
   })
 
   describe('isDisabled', () => {
-- 
cgit v1.2.3