diff --git a/.changeset/big-bags-provide.md b/.changeset/big-bags-provide.md new file mode 100644 index 000000000..7e859a4c0 --- /dev/null +++ b/.changeset/big-bags-provide.md @@ -0,0 +1,10 @@ +--- +'@lion/fieldset': patch +'@lion/form-core': patch +--- + +Field population fix + +#### Bugfixes + +- allow population conditionally rendered fields in formGroup/fieldset/form diff --git a/packages/fieldset/test/lion-fieldset.test.js b/packages/fieldset/test/lion-fieldset.test.js index 613c34efb..24fb8f9c7 100644 --- a/packages/fieldset/test/lion-fieldset.test.js +++ b/packages/fieldset/test/lion-fieldset.test.js @@ -342,6 +342,33 @@ describe('', () => { expect(el.modelValue).to.eql({ lastName: 'Bar' }); }); + it('does not fail when conditional (not rendered) formElements are populated', async () => { + const showC = false; + const el = await fixture(html` + <${tag}> + + <${childTag} name="a"> + <${childTag} name="b"> + ${showC ? html`<${childTag} name="c">` : ''} + + `); + expect(el.formElements.a).to.be.not.undefined; + expect(el.formElements.b).to.be.not.undefined; + expect(el.formElements.c).to.be.undefined; + + let wasSuccessful = false; + try { + // c does not exist, because it is not render + el.serializedValue = { a: 'x', b: 'y', c: 'z' }; + wasSuccessful = true; + // eslint-disable-next-line no-empty + } catch (_) {} + + expect(wasSuccessful).to.be.true; + expect(el.formElements.a.serializedValue).to.equal('x'); + expect(el.formElements.b.serializedValue).to.equal('y'); + }); + describe('Validation', () => { it('validates on init', async () => { class IsCat extends Validator { diff --git a/packages/form-core/src/form-group/FormGroupMixin.js b/packages/form-core/src/form-group/FormGroupMixin.js index bdf515ab8..a98f85c11 100644 --- a/packages/form-core/src/form-group/FormGroupMixin.js +++ b/packages/form-core/src/form-group/FormGroupMixin.js @@ -332,7 +332,9 @@ export const FormGroupMixin = dedupeMixin( el[property] = values[name][index]; // eslint-disable-line no-param-reassign }); } - this.formElements[name][property] = values[name]; + if (this.formElements[name]) { + this.formElements[name][property] = values[name]; + } }); } }