Merge pull request #424 from ing-bank/fix/registrationPortalMove

fix(field): support moving of a portal node

packages/field/src/FormRegistrarPortalMixin.js

@@ -21,6 +21,7 @@ export const FormRegistrarPortalMixin = dedupeMixin(
         super();
         this.formElements = [];
         this.registrationTarget = undefined;
+        this.__hasBeenRendered = false;
         this.__readyForRegistration = false;
         this.registrationReady = new Promise(resolve => {
           this.__resolveRegistrationReady = resolve;
@@ -34,6 +35,9 @@ export const FormRegistrarPortalMixin = dedupeMixin(
         this.__checkRegistrationTarget();
 
         formRegistrarManager.add(this);
+        if (this.__hasBeenRendered) {
+          formRegistrarManager.becomesReady();
+        }
 
         this.__redispatchEventForFormRegistrarPortalMixin = ev => {
           ev.stopPropagation();
@@ -67,6 +71,7 @@ export const FormRegistrarPortalMixin = dedupeMixin(
         this.__resolveRegistrationReady();
         this.__readyForRegistration = true;
         formRegistrarManager.becomesReady(this);
+        this.__hasBeenRendered = true;
       }
 
       __checkRegistrationTarget() {

packages/field/test-suites/FormRegistrationMixins.suite.js

@@ -221,6 +221,30 @@ export const runRegistrationSuite = customConfig => {
         expect(registerSpy.args[2][0].target.tagName).to.equal(childEl.tagName);
       });
 
+      it('keeps working if moving the portal itself', async () => {
+        const el = await fixture(html`<${parentTag}></${parentTag}>`);
+        const portal = await fixture(html`
+          <${portalTag} .registrationTarget=${el}>
+            <${childTag}></${childTag}>
+          </${portalTag}>
+        `);
+        const otherPlace = await fixture(html`
+          <div></div>
+        `);
+        otherPlace.appendChild(portal);
+        const newField = await fixture(html`
+          <${childTag}></${childTag}>
+        `);
+
+        expect(el.formElements.length).to.equal(1);
+
+        portal.appendChild(newField);
+        expect(el.formElements.length).to.equal(2);
+
+        portal.removeChild(newField);
+        expect(el.formElements.length).to.equal(1);
+      });
+
       it('works for portals that have a delayed render', async () => {
         const delayedPortalString = defineCE(
           class extends FormRegistrarPortalMixin(LitElement) {