diff --git a/docs/docs/systems/overlays/assets/umbrella-form.js b/docs/docs/systems/overlays/assets/umbrella-form.js new file mode 100644 index 000000000..578575026 --- /dev/null +++ b/docs/docs/systems/overlays/assets/umbrella-form.js @@ -0,0 +1,126 @@ +import { LitElement, html } from '@lion/core'; +import { Required, MinLength } from '@lion/form-core'; +import '@lion/form/define'; +import '@lion/fieldset/define'; +import '@lion/input/define'; +import '@lion/input-date/define'; +import '@lion/input-datepicker/define'; +import '@lion/input-amount/define'; +import '@lion/input-iban/define'; +import '@lion/input-email/define'; +import '@lion/checkbox-group/define'; +import '@lion/radio-group/define'; +import '@lion/select/define'; +import '@lion/select-rich/define'; +import '@lion/input-range/define'; +import '@lion/textarea/define'; +import '@lion/button/define'; + +export class UmbrellaForm extends LitElement { + get _lionFormNode() { + return /** @type {import('@lion/form').LionForm} */ (this.shadowRoot?.querySelector( + 'lion-form', + )); + } + + render() { + return html` + +
+ + + + + + + + + + + + + + + + + + + + + + + Red + Hotpink + Teal + + + + + + + + + + + +
+ Submit + { + const lionForm = this._lionFormNode; + lionForm.resetGroup(); + }} + >Reset +
+
+ + `; + } +} +customElements.define('umbrella-form', UmbrellaForm); diff --git a/packages/form-core/src/choice-group/ChoiceGroupMixin.js b/packages/form-core/src/choice-group/ChoiceGroupMixin.js index 3595f5b68..7e62e44eb 100644 --- a/packages/form-core/src/choice-group/ChoiceGroupMixin.js +++ b/packages/form-core/src/choice-group/ChoiceGroupMixin.js @@ -181,7 +181,11 @@ const ChoiceGroupMixinImplementation = superclass => super.disconnectedCallback(); if (this.registrationComplete.done === false) { - this.__rejectRegistrationComplete(); + Promise.resolve().then(() => { + Promise.resolve().then(() => { + this.__rejectRegistrationComplete(); + }); + }); } } diff --git a/packages/form-core/src/form-group/FormGroupMixin.js b/packages/form-core/src/form-group/FormGroupMixin.js index eed4dea46..2190d6ca8 100644 --- a/packages/form-core/src/form-group/FormGroupMixin.js +++ b/packages/form-core/src/form-group/FormGroupMixin.js @@ -184,7 +184,9 @@ const FormGroupMixinImplementation = superclass => this.__hasActiveOutsideClickHandling = false; } if (this.registrationComplete.done === false) { - this.__rejectRegistrationComplete(); + Promise.resolve().then(() => { + this.__rejectRegistrationComplete(); + }); } } diff --git a/packages/form-integrations/test/dialog-integrations.js b/packages/form-integrations/test/dialog-integrations.js new file mode 100644 index 000000000..e661f544b --- /dev/null +++ b/packages/form-integrations/test/dialog-integrations.js @@ -0,0 +1,20 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import './helpers/umbrella-form.js'; +import '@lion/dialog/lion-dialog.js'; + +/** + * @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm + * @typedef {import('@lion/dialog/').LionDialog} LionDialog + */ + +// Test umbrella form inside dialog +describe('Form inside dialog Integrations', () => { + it('"Successfully spawns all form components inside a dialog', async () => { + expect( + await fixture(html` + + + `), + ).to.not.throw(); + }); +});