diff --git a/packages/field/src/FormRegistrarPortalMixin.js b/packages/field/src/FormRegistrarPortalMixin.js index 1f9e31c2e..223eceb8c 100644 --- a/packages/field/src/FormRegistrarPortalMixin.js +++ b/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() { diff --git a/packages/field/test-suites/FormRegistrationMixins.suite.js b/packages/field/test-suites/FormRegistrationMixins.suite.js index 08c60faa4..93b0e2858 100644 --- a/packages/field/test-suites/FormRegistrationMixins.suite.js +++ b/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}>`); + const portal = await fixture(html` + <${portalTag} .registrationTarget=${el}> + <${childTag}> + + `); + const otherPlace = await fixture(html` +
+ `); + otherPlace.appendChild(portal); + const newField = await fixture(html` + <${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) {