ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(form-core): make sure that slots with property fallbacks ignore initialization updates (undefined on firstUpdated)

Browse source
This commit is contained in:
Thijs Louisse 2025-04-29 17:09:13 +02:00 committed by Thijs Louisse
parent c6ef6b134d
commit c3021f8e7f
3 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/little-sloths-punch.md Normal file
View file

@ -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

4
packages/ui/components/form-core/src/FormControlMixin.js
View file

@ -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; this._labelNode.textContent = this.label;
} }
if (changedProperties.has('helpText') && this._helpTextNode) { if (changedProperties.has('helpText') && this.__helpText && this._helpTextNode) {
this._helpTextNode.textContent = this.helpText; this._helpTextNode.textContent = this.helpText;
} }

12
packages/ui/components/form-core/test/FormControlMixin.test.js
View file

@ -52,11 +52,13 @@ describe('FormControlMixin', () => {
const elElem = /** @type {FormControlMixinClass} */ ( const elElem = /** @type {FormControlMixinClass} */ (
await fixture(html` await fixture(html`
<${tag}> <${tag}>
<label slot="label">Email address</label> <label slot="label"><b>Email</b> address</label>
${inputSlot} ${inputSlot}
</${tag}>`) </${tag}>`)
); );
expect(elElem.label).to.equal('Email address', 'as an element'); expect(elElem.label).to.equal('Email address', 'as an element');
// @ts-expect-error
expect(elElem._labelNode.innerHTML).to.equal('<b>Email</b> address', 'html as an element');
}); });
it('has a label that supports inner html', async () => { it('has a label that supports inner html', async () => {
@ -68,6 +70,8 @@ describe('FormControlMixin', () => {
</${tag}>`) </${tag}>`)
); );
expect(el.label).to.equal('Email address'); expect(el.label).to.equal('Email address');
// @ts-expect-error
expect(el._labelNode.innerHTML).to.equal('Email <span>address</span>');
}); });
it('only takes label of direct child', async () => { it('only takes label of direct child', async () => {
@ -139,11 +143,13 @@ describe('FormControlMixin', () => {
const elElem = /** @type {FormControlMixinClass} */ ( const elElem = /** @type {FormControlMixinClass} */ (
await fixture(html` await fixture(html`
<${tag}> <${tag}>
<div slot="help-text">We will not send you any spam</div> <div slot="help-text">We will <b>not</b> send you any spam</div>
${inputSlot} ${inputSlot}
</${tag}>`) </${tag}>`)
); );
expect(elElem.helpText).to.equal('We will not send you any spam', 'as an element'); 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 <b>not</b> send you any spam');
}); });
it('can have a help-text that supports inner html', async () => { it('can have a help-text that supports inner html', async () => {
@ -155,6 +161,8 @@ describe('FormControlMixin', () => {
</${tag}>`) </${tag}>`)
); );
expect(el.helpText).to.equal('We will not send you any spam'); 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 <span>spam</span>');
}); });
it('only takes help-text of direct child', async () => { it('only takes help-text of direct child', async () => {