fix(form): remove disconnected elements from Form Registrar Manager

Author: Tom Herni

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);
       }

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'));

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`
+      <form-registrar>
+        <form-registrar>
+          <form-registering></form-registering>
+        </form-registrar>
+        <form-registrar id="remove">
+          <form-registering></form-registering>
+        </form-registrar>
+      </form-registrar>
+    `);
+    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) {