diff --git a/.changeset/little-sloths-punch.md b/.changeset/little-sloths-punch.md new file mode 100644 index 000000000..9ee43cd65 --- /dev/null +++ b/.changeset/little-sloths-punch.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[form-core] make sure that slots with property fallbacks ignore initialization updates (undefined on firstUpdated). See https://stackblitz.com/edit/vitejs-vite-encdg2xd?file=lion-demo.js diff --git a/packages/ui/components/form-core/src/FormControlMixin.js b/packages/ui/components/form-core/src/FormControlMixin.js index 25227f010..e2af48ebe 100644 --- a/packages/ui/components/form-core/src/FormControlMixin.js +++ b/packages/ui/components/form-core/src/FormControlMixin.js @@ -293,11 +293,11 @@ const FormControlMixinImplementation = superclass => ); } - if (changedProperties.has('label') && this._labelNode) { + if (changedProperties.has('label') && this.__label && this._labelNode) { this._labelNode.textContent = this.label; } - if (changedProperties.has('helpText') && this._helpTextNode) { + if (changedProperties.has('helpText') && this.__helpText && this._helpTextNode) { this._helpTextNode.textContent = this.helpText; } diff --git a/packages/ui/components/form-core/test/FormControlMixin.test.js b/packages/ui/components/form-core/test/FormControlMixin.test.js index 940b4956d..cae68ad51 100644 --- a/packages/ui/components/form-core/test/FormControlMixin.test.js +++ b/packages/ui/components/form-core/test/FormControlMixin.test.js @@ -52,11 +52,13 @@ describe('FormControlMixin', () => { const elElem = /** @type {FormControlMixinClass} */ ( await fixture(html` <${tag}> - + ${inputSlot} `) ); expect(elElem.label).to.equal('Email address', 'as an element'); + // @ts-expect-error + expect(elElem._labelNode.innerHTML).to.equal('Email address', 'html as an element'); }); it('has a label that supports inner html', async () => { @@ -68,6 +70,8 @@ describe('FormControlMixin', () => { `) ); expect(el.label).to.equal('Email address'); + // @ts-expect-error + expect(el._labelNode.innerHTML).to.equal('Email address'); }); it('only takes label of direct child', async () => { @@ -139,11 +143,13 @@ describe('FormControlMixin', () => { const elElem = /** @type {FormControlMixinClass} */ ( await fixture(html` <${tag}> -
We will not send you any spam
+
We will not send you any spam
${inputSlot} `) ); expect(elElem.helpText).to.equal('We will not send you any spam', 'as an element'); + // @ts-expect-error + expect(elElem._helpTextNode.innerHTML).to.equal('We will not send you any spam'); }); it('can have a help-text that supports inner html', async () => { @@ -155,6 +161,8 @@ describe('FormControlMixin', () => { `) ); expect(el.helpText).to.equal('We will not send you any spam'); + // @ts-expect-error + expect(el._helpTextNode.innerHTML).to.equal('We will not send you any spam'); }); it('only takes help-text of direct child', async () => {