diff --git a/.changeset/lemon-shoes-doubt.md b/.changeset/lemon-shoes-doubt.md new file mode 100644 index 000000000..34734d30b --- /dev/null +++ b/.changeset/lemon-shoes-doubt.md @@ -0,0 +1,5 @@ +--- +'@lion/checkbox-group': patch +--- + +recover possibility to registrer without [] diff --git a/.changeset/loud-rocks-teach.md b/.changeset/loud-rocks-teach.md new file mode 100644 index 000000000..b2624195e --- /dev/null +++ b/.changeset/loud-rocks-teach.md @@ -0,0 +1,5 @@ +--- +'@lion/overlays': patch +--- + +only focus elements after hide when OverlayController has ownership diff --git a/packages/checkbox-group/src/LionCheckboxGroup.js b/packages/checkbox-group/src/LionCheckboxGroup.js index 6ad4b89f2..22cf96a7b 100644 --- a/packages/checkbox-group/src/LionCheckboxGroup.js +++ b/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 "[]".'); - } - } } diff --git a/packages/checkbox-group/test/lion-checkbox-group.test.js b/packages/checkbox-group/test/lion-checkbox-group.test.js index 847128a60..5483f756c 100644 --- a/packages/checkbox-group/test/lion-checkbox-group.test.js +++ b/packages/checkbox-group/test/lion-checkbox-group.test.js @@ -104,17 +104,4 @@ describe('', () => { `); await expect(el).to.be.accessible(); }); - - it("should throw exception if name doesn't end in []", async () => { - const el = await fixture(html``); - 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 "[]".'); - }); }); diff --git a/packages/overlays/src/OverlayController.js b/packages/overlays/src/OverlayController.js index df74b416b..bddab5239 100644 --- a/packages/overlays/src/OverlayController.js +++ b/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 (this.elementToFocusAfterHide) { - this.elementToFocusAfterHide.focus(); - } else if ( - document.activeElement && - this.__contentWrapperNode?.contains(document.activeElement) + if ( + activeElement && + /** @type {HTMLElement} */ (this.__contentWrapperNode).contains(activeElement) ) { - /** @type {HTMLElement} */ (document.activeElement).blur(); + if (this.elementToFocusAfterHide) { + this.elementToFocusAfterHide.focus(); + } else { + activeElement.blur(); + } } } diff --git a/packages/overlays/test/OverlayController.test.js b/packages/overlays/test/OverlayController.test.js index 927e98815..47c0e3dec 100644 --- a/packages/overlays/test/OverlayController.test.js +++ b/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('')); + const outsideButton = /** @type {HTMLButtonElement} */ (await fixture('')); + const contentNode = /** @type {HTMLElement} */ (await fixture('
/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('')); const contentNode = /** @type {HTMLElement} */ (await fixture(