diff --git a/packages/field/src/FormRegistrarMixin.js b/packages/field/src/FormRegistrarMixin.js index b3ac82e8f..6b801d454 100644 --- a/packages/field/src/FormRegistrarMixin.js +++ b/packages/field/src/FormRegistrarMixin.js @@ -34,6 +34,13 @@ export const FormRegistrarMixin = dedupeMixin( this.addEventListener('form-element-register', this._onRequestToAddFormElement); } + disconnectedCallback() { + if (super.disconnectedCallback) { + super.disconnectedCallback(); + } + formRegistrarManager.remove(this); + } + isRegisteredFormElement(el) { return this.formElementsArray.some(exitingEl => exitingEl === el); } diff --git a/packages/field/src/formRegistrarManager.js b/packages/field/src/formRegistrarManager.js index 7d9e5c026..d5048528e 100644 --- a/packages/field/src/formRegistrarManager.js +++ b/packages/field/src/formRegistrarManager.js @@ -16,6 +16,10 @@ class FormRegistrarManager { this.ready = false; } + remove(registrar) { + this.__elements.splice(this.__elements.indexOf(registrar)); + } + becomesReady() { if (this.__elements.every(el => el.__readyForRegistration === true)) { this.dispatchEvent(new Event('all-forms-open-for-registration')); diff --git a/packages/field/test/FormRegistrationMixins.test.js b/packages/field/test/FormRegistrationMixins.test.js index a84d2a5d7..06db4c9ce 100644 --- a/packages/field/test/FormRegistrationMixins.test.js +++ b/packages/field/test/FormRegistrationMixins.test.js @@ -2,6 +2,7 @@ import { expect, fixture, html, defineCE, unsafeStatic } from '@open-wc/testing' import sinon from 'sinon'; import { LitElement, UpdatingElement } from '@lion/core'; +import { formRegistrarManager } from '../src/formRegistrarManager.js'; import { FormRegisteringMixin } from '../src/FormRegisteringMixin.js'; import { FormRegistrarMixin } from '../src/FormRegistrarMixin.js'; @@ -36,6 +37,24 @@ describe('FormRegistrationMixins', () => { expect(el.querySelector('form-registrar').formElements.length).to.equal(1); }); + it('forgets disconnected registrars', async () => { + const el = await fixture(html` + + + + + + + + + `); + await el.registrationReady; + expect(formRegistrarManager.__elements.length).to.equal(3); + + el.querySelector('#remove').remove(); + expect(formRegistrarManager.__elements.length).to.equal(2); + }); + it('works for component that have a delayed render', async () => { const tagWrapperString = defineCE( class extends FormRegistrarMixin(LitElement) {