fix: focus overlay on mouseup when focus moves to body (#6887)

vaadin · Dec 5, 2023 · 25bb261 · 25bb261
1 parent 0e8635b
commit 25bb261
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/packages/overlay/src/vaadin-overlay-mixin.js b/packages/overlay/src/vaadin-overlay-mixin.js
@@ -118,6 +118,14 @@ export const OverlayMixin = (superClass) =>
       // and <vaadin-context-menu>).
       this.addEventListener('click', () => {});
       this.$.backdrop.addEventListener('click', () => {});
+
+      this.addEventListener('mouseup', () => {
+        // In Chrome, focus moves to body on overlay content mousedown
+        // See https://github.com/vaadin/flow-components/issues/5507
+        if (document.activeElement === document.body && this.$.overlay.getAttribute('tabindex') === '0') {
+          this.$.overlay.focus();
+        }
+      });
     }
 
     /** @protected */

diff --git a/packages/overlay/test/interactions.common.js b/packages/overlay/test/interactions.common.js
@@ -4,11 +4,13 @@ import {
   enterKeyDown,
   escKeyDown,
   fixtureSync,
+  middleOfNode,
   mousedown,
   mouseup,
   nextRender,
   oneEvent,
 } from '@vaadin/testing-helpers';
+import { resetMouse, sendMouse } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { createOverlay } from './helpers.js';
 
@@ -67,7 +69,11 @@ describe('interactions', () => {
       parent = document.createElement('div');
       overlay = fixtureSync('<vaadin-overlay></vaadin-overlay>', parent);
       overlay.renderer = (root) => {
-        root.textContent = 'overlay content';
+        if (!root.firstChild) {
+          const div = document.createElement('div');
+          div.textContent = 'overlay content';
+          root.appendChild(div);
+        }
       };
       await nextRender();
       overlayPart = overlay.$.overlay;
@@ -293,5 +299,33 @@ describe('interactions', () => {
         expect(overlay.opened).to.be.true;
       });
     });
+
+    describe('mousedown on content', () => {
+      afterEach(async () => {
+        await resetMouse();
+      });
+
+      it('should focus overlay part on clicking the content element', async () => {
+        const div = overlay.querySelector('div');
+        const { x, y } = middleOfNode(div);
+
+        await sendMouse({ type: 'click', position: [Math.floor(x), Math.floor(y)] });
+        await nextRender();
+
+        expect(document.activeElement).to.be.equal(overlay);
+      });
+
+      it('should not focus overlay part if tabindex attribute removed', async () => {
+        overlay.$.overlay.removeAttribute('tabindex');
+
+        const div = overlay.querySelector('div');
+        const { x, y } = middleOfNode(div);
+
+        await sendMouse({ type: 'click', position: [Math.floor(x), Math.floor(y)] });
+        await nextRender();
+
+        expect(document.activeElement).to.be.equal(document.body);
+      });
+    });
   });
 });