vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
470 stars 82 forks source link

[PolylitMixin] Should not trigger update when assigning the same value to a sync property #8221

Open vursen opened 4 days ago

vursen commented 4 days ago

Description

Assigning the same value to a sync property currently causes PolylitMixin to trigger a sync update, which leads to an early flush of all property updates that were in the queue at that time.

Minimal reproducible example

<script>
  import { LitElement, html } from 'lit';
  import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';

  class MyElement extends PolylitMixin(LitElement) {
    static get properties() {
      return {
        asyncProperty: {
          type: String,
          value: '',
          observer: 'asyncPropertyChanged',
        },

        syncProperty: {
          type: String,
          sync: true,
          value: '',
        }
      }
    }

    onClick() {
      this.asyncProperty = 'foo';
      this.syncProperty = '';
      this.asyncProperty = 'bar';
    }

    asyncPropertyChanged(value) {
      if (value) {
        console.log('asyncProperty changed to', value);
      }
    }

    render() {
      return html`
        <button @click="${this.onClick}">Click me</button>
      `;
    }
  }
  customElements.define('my-element', MyElement);
</script>

<my-element></my-element>

Steps to reproduce

  1. Click the button
  2. Observe that the browser log shows two messages: asyncProperty changed to foo and asyncProperty changed to bar whereas only the last update would be expected to be reported.

Environment

Vaadin version(s): 24.6 and earlier OS: Mac OS

Browsers

No response