fix: keyboard navigation when using position fixed (#5792) (#5794)

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
vaadin · Apr 27, 2023 · a1a413d · a1a413d
1 parent cc7ceef
commit a1a413d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -15,7 +15,7 @@ describe('focus-utils', () => {
     beforeEach(() => {
       element = fixtureSync(`
         <div class="parent">
-          <div class="child"></div>
+          <div class="child">foo</div>
         </div>
       `);
     });
@@ -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', () => {