Fix: `isVisible` function behavior in case of a `<details>` element, on chrome 97 (#35682)
This commit is contained in:
parent
d581737f78
commit
14c7dc1e88
|
@ -128,7 +128,26 @@ const isVisible = element => {
|
||||||
return false
|
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 => {
|
const isDisabled = element => {
|
||||||
|
|
|
@ -320,6 +320,42 @@ describe('Util', () => {
|
||||||
|
|
||||||
expect(Util.isVisible(div)).toBeFalse()
|
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', () => {
|
describe('isDisabled', () => {
|
||||||
|
|
Loading…
Reference in New Issue