diff --git a/.changeset/fifty-chairs-bow.md b/.changeset/fifty-chairs-bow.md new file mode 100644 index 000000000..2fb6b9359 --- /dev/null +++ b/.changeset/fifty-chairs-bow.md @@ -0,0 +1,5 @@ +--- +'@lion/overlays': patch +--- + +When closing an overlays we check if the active element is/was within the overalys content. If so we blur it to make sure the focus returns to the body. diff --git a/packages/overlays/src/OverlayController.js b/packages/overlays/src/OverlayController.js index 22f69a2f5..6f6ec0588 100644 --- a/packages/overlays/src/OverlayController.js +++ b/packages/overlays/src/OverlayController.js @@ -847,6 +847,11 @@ export class OverlayController extends EventTargetShim { // Otherwise we assume the 'outside world' has, purposefully, taken over if (this.elementToFocusAfterHide) { this.elementToFocusAfterHide.focus(); + } else if ( + document.activeElement && + this.__contentWrapperNode?.contains(document.activeElement) + ) { + /** @type {HTMLElement} */ (document.activeElement).blur(); } } diff --git a/packages/overlays/test/OverlayController.test.js b/packages/overlays/test/OverlayController.test.js index 438bb3fa7..ffb5d97e5 100644 --- a/packages/overlays/test/OverlayController.test.js +++ b/packages/overlays/test/OverlayController.test.js @@ -1,14 +1,6 @@ /* eslint-disable no-new */ import '@lion/core/test-helpers/keyboardEventShimIE.js'; -import { - aTimeout, - defineCE, - expect, - fixture, - html, - nextFrame, - unsafeStatic, -} from '@open-wc/testing'; +import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing'; import { fixtureSync } from '@open-wc/testing-helpers'; import sinon from 'sinon'; import { OverlayController } from '../src/OverlayController.js'; @@ -676,7 +668,6 @@ describe('OverlayController', () => { expect(document.activeElement).to.equal(input); await ctrl.hide(); - await nextFrame(); // moving focus to body takes time? expect(document.activeElement).to.equal(document.body); });