Merge pull request #1331 from ing-bank/fix/focusElementAfterHideWhenOwned

fix(overlays): only focus controlled elements after hide

.changeset/lemon-shoes-doubt.md

@@ -0,0 +1,5 @@
+---
+'@lion/checkbox-group': patch
+---
+
+recover possibility to registrer without []

.changeset/loud-rocks-teach.md

@@ -0,0 +1,5 @@
+---
+'@lion/overlays': patch
+---
+
+only focus elements after hide when OverlayController has ownership

packages/checkbox-group/src/LionCheckboxGroup.js

@@ -9,12 +9,4 @@ export class LionCheckboxGroup extends ChoiceGroupMixin(FormGroupMixin(LitElemen
     super();
     this.multipleChoice = true;
   }
-
-  /** @param {import('@lion/core').PropertyValues } changedProperties */
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has('name') && !String(this.name).match(/\[\]$/)) {
-      throw new Error('Names should end in "[]".');
-    }
-  }
 }

packages/checkbox-group/test/lion-checkbox-group.test.js

@@ -104,17 +104,4 @@ describe('<lion-checkbox-group>', () => {
     `);
     await expect(el).to.be.accessible();
   });
-
-  it("should throw exception if name doesn't end in []", async () => {
-    const el = await fixture(html`<lion-checkbox-group name="woof[]"></lion-checkbox-group>`);
-    el.name = 'woof';
-    let err;
-    try {
-      await el.updateComplete;
-    } catch (e) {
-      err = e;
-    }
-    expect(err).to.be.an.instanceof(Error);
-    expect(err.message).to.equal('Names should end in "[]".');
-  });
 });

packages/overlays/src/OverlayController.js

@@ -907,15 +907,19 @@ export class OverlayController extends EventTargetShim {
 
   /** @protected */
   _restoreFocus() {
+    const { activeElement } = /** @type {* & ShadowRoot} */ (this
+      .__contentWrapperNode).getRootNode();
     // We only are allowed to move focus if we (still) 'own' it.
     // Otherwise we assume the 'outside world' has, purposefully, taken over
+    if (
+      activeElement &&
+      /** @type {HTMLElement} */ (this.__contentWrapperNode).contains(activeElement)
+    ) {
       if (this.elementToFocusAfterHide) {
         this.elementToFocusAfterHide.focus();
-    } else if (
+      } else {
-      document.activeElement &&
+        activeElement.blur();
-      this.__contentWrapperNode?.contains(document.activeElement)
+      }
-    ) {
-      /** @type {HTMLElement} */ (document.activeElement).blur();
     }
   }
 

packages/overlays/test/OverlayController.test.js

@@ -741,6 +741,25 @@ describe('OverlayController', () => {
         expect(document.activeElement).to.equal(input);
       });
 
+      it(`only sets focus when outside world didn't take over already`, async () => {
+        const input = /** @type {HTMLElement} */ (await fixture('<input />'));
+        const outsideButton = /** @type {HTMLButtonElement} */ (await fixture('<button></button>'));
+        const contentNode = /** @type {HTMLElement} */ (await fixture('<div>/div>'));
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          elementToFocusAfterHide: input,
+          contentNode,
+        });
+
+        await ctrl.show();
+        // an outside element has taken over focus
+        outsideButton.focus();
+        expect(document.activeElement).to.equal(outsideButton);
+
+        await ctrl.hide();
+        expect(document.activeElement).to.equal(outsideButton);
+      });
+
       it('allows to set elementToFocusAfterHide on show', async () => {
         const input = /** @type {HTMLElement} */ (await fixture('<input />'));
         const contentNode = /** @type {HTMLElement} */ (await fixture(