Bind reactive property to sl-button disabled property

[MichaPau]

Binding a boolean reactive property (Lit) to the disabled property on a sl-button gives me this lit warning

Element sl-button scheduled an update (generally because a property was set) after an update completed,.....

It only happens on the disabled property, not on the loading property etc..
Also, I don't get this on a normal html button...

Not a big deal, for sure, still wanted to mention it..

Minimal example:

@customElement('test-dialog')
export class TestDialog extends LitElement {
    
    @property({type:Boolean})
    loading = false;

    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
        const form = this.shadowRoot!.querySelector("#theForm")!;
        form.addEventListener("submit", this.onSubmit);
    }

    timeout(ms:number) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    onSubmit = (async (ev:Event) => {
        ev.preventDefault();
        this.loading = true;

        await this.timeout(1000).then(() => this.loading = false);
    });
    render() {
        return html`
            <form id="theForm">
                <!-- this gives the warning -->
                <sl-button id="theButton" type="submit" ?disabled=${this.loading}>Click me</sl-button>

                <!-- this doesn't give the warning -->
                <!-- <sl-button id="theButton" type="submit" ?loading=${this.loading}>Click me</sl-button> -->
                <!-- <button id="theButton" type="submit" ?disabled=${this.loading}>Click me</button> -->
            </form>
        `;
    }
}

By the way.. thanks for this library, I really enjoy using it...

[claviska]

Hi there. I tried reproducing this, but I'm not seeing that warning. 😕

[MichaPau]

Actually, I also have it only in the Edge WebView2 (because Tauri app)

I tried it in a 'normal' basic vite setup viewed in firefox/chrome and doesn't see it.

Don't know why this should change anything though.

As a workaround I disable the whole form because I don't like to see these warnings :)

Just as a reference, I am using

"dependencies": {
    "@shoelace-style/shoelace": "^2.12.0",
 },
"devDependencies": {
	"lit": "^3.1.0",
	"typescript": "^5.0.2",
	"vite": "^4.4.4"
}

Cheers.