diff --git a/packages/component-base/src/focus-utils.js b/packages/component-base/src/focus-utils.js index dcfbc99f80..98138f3a0e 100644 --- a/packages/component-base/src/focus-utils.js +++ b/packages/component-base/src/focus-utils.js @@ -188,7 +188,9 @@ export function isElementHidden(element) { // `offsetParent` is `null` when the element itself // or one of its ancestors is hidden with `display: none`. // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent - if (element.offsetParent === null) { + // However `offsetParent` is also null when the element is using fixed + // positioning, so additionally check if the element takes up layout space. + if (element.offsetParent === null && element.clientWidth === 0 && element.clientHeight === 0) { return true; } diff --git a/packages/component-base/test/focus-utils.test.js b/packages/component-base/test/focus-utils.test.js index c2439cce4b..948bc88b8a 100644 --- a/packages/component-base/test/focus-utils.test.js +++ b/packages/component-base/test/focus-utils.test.js @@ -15,7 +15,7 @@ describe('focus-utils', () => { beforeEach(() => { element = fixtureSync(`
-
+
foo
`); }); @@ -43,6 +43,11 @@ describe('focus-utils', () => { it('should return false for visible elements', () => { expect(isElementHidden(element)).to.be.false; }); + + it('should return false when using fixed positioning', () => { + element.style.position = 'fixed'; + expect(isElementHidden(element)).to.be.false; + }); }); describe('isElementFocusable', () => {