Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix isVisible false positives from deep nesting or alternate means #33960

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
May 20, 2021
Merged

fix isVisible false positives from deep nesting or alternate means #33960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
84374ca
fix isVisible false positives from deep nesting or alternate means
RyanBerliner May 13, 2021
c2c1407
Update index.js
XhmikosR May 13, 2021
697f2d4
fix visibility property checking
RyanBerliner May 15, 2021
368d80f
Fix typo
alpadev May 16, 2021
a1e6a6c
remove <area> handling, allowing simpler refactor
RyanBerliner May 18, 2021
008fdfd
Merge branch 'main' into fix-is-visible
RyanBerliner May 20, 2021
728fec3
remove redundant element check, add back additional visibility test
RyanBerliner May 20, 2021
b8cf600
Merge branch 'main' into fix-is-visible
GeoSot May 20, 2021
b21a5cf
Merge branch 'main' into fix-is-visible
GeoSot May 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 2 additions & 11 deletions js/src/util/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,20 +159,11 @@ const typeCheckConfig = (componentName, config, configTypes) => {
}

const isVisible = element => {
if (!element) {
if (!isElement(element) || element.getClientRects().length === 0) {
return false
}

if (element.style && element.parentNode && element.parentNode.style) {
const elementStyle = getComputedStyle(element)
const parentNodeStyle = getComputedStyle(element.parentNode)

return elementStyle.display !== 'none' &&
parentNodeStyle.display !== 'none' &&
elementStyle.visibility !== 'hidden'
}

return false
return getComputedStyle(element).getPropertyValue('visibility') === 'visible'
}

const isDisabled = element => {
Expand Down
52 changes: 50 additions & 2 deletions js/tests/unit/util/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,10 +326,14 @@ describe('Util', () => {
expect(Util.isVisible(div)).toEqual(false)
})

it('should return false if the parent element is not visible', () => {
it('should return false if an ancestor element is display none', () => {
fixtureEl.innerHTML = [
'<div style="display: none;">',
' <div class="content"></div>',
' <div>',
' <div>',
' <div class="content"></div>',
' </div>',
' </div>',
'</div>'
].join('')

Expand All @@ -338,6 +342,38 @@ describe('Util', () => {
expect(Util.isVisible(div)).toEqual(false)
})

it('should return false if an ancestor element is visibility hidden', () => {
fixtureEl.innerHTML = [
'<div style="visibility: hidden;">',
' <div>',
' <div>',
' <div class="content"></div>',
' </div>',
' </div>',
'</div>'
].join('')

const div = fixtureEl.querySelector('.content')

expect(Util.isVisible(div)).toEqual(false)
})

it('should return true if an ancestor element is visibility hidden, but reverted', () => {
fixtureEl.innerHTML = [
'<div style="visibility: hidden;">',
' <div style="visibility: visible;">',
' <div>',
' <div class="content"></div>',
' </div>',
' </div>',
'</div>'
].join('')

const div = fixtureEl.querySelector('.content')

expect(Util.isVisible(div)).toEqual(true)
})

it('should return true if the element is visible', () => {
fixtureEl.innerHTML = [
'<div>',
Expand All @@ -349,6 +385,18 @@ describe('Util', () => {

expect(Util.isVisible(div)).toEqual(true)
})

it('should return false if the element is hidden, but not via display or visibility', () => {
fixtureEl.innerHTML = [
'<details>',
' <div id="element"></div>',
'</details>'
].join('')

const div = fixtureEl.querySelector('#element')

expect(Util.isVisible(div)).toEqual(false)
})
})

describe('isDisabled', () => {
Expand Down