fix: run dynamic property observer after complex observer (#8271)

vaadin · Dec 4, 2024 · 91db0a0 · 91db0a0
1 parent d62ba30
commit 91db0a0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/packages/component-base/src/polylit-mixin.js b/packages/component-base/src/polylit-mixin.js
@@ -220,14 +220,14 @@ const PolylitMixinImplementation = (superclass) => {
         this.__runObservers(props, this.constructor.__observers);
       }
 
-      if (this.__dynamicPropertyObservers) {
-        this.__runDynamicObservers(props, this.__dynamicPropertyObservers);
-      }
-
       if (this.constructor.__complexObservers) {
         this.__runComplexObservers(props, this.constructor.__complexObservers);
       }
 
+      if (this.__dynamicPropertyObservers) {
+        this.__runDynamicObservers(props, this.__dynamicPropertyObservers);
+      }
+
       if (this.__dynamicMethodObservers) {
         this.__runComplexObservers(props, this.__dynamicMethodObservers);
       }

diff --git a/packages/component-base/test/polylit-mixin.test.js b/packages/component-base/test/polylit-mixin.test.js
@@ -637,6 +637,7 @@ describe('PolylitMixin', () => {
   describe('dynamic property observer', () => {
     let element;
     let valueChangedSpy;
+    let complexSpy;
 
     const tag = defineCE(
       class extends PolylitMixin(LitElement) {
@@ -648,19 +649,26 @@ describe('PolylitMixin', () => {
           };
         }
 
+        static get observers() {
+          return ['_valueChangedComplex(value)'];
+        }
+
         render() {
           return html`${this.value}`;
         }
 
         _valueChanged(_value, _oldValue) {}
 
         _valueChangedOther(_value, _oldValue) {}
+
+        _valueChangedComplex(_value) {}
       },
     );
 
     beforeEach(async () => {
       element = fixtureSync(`<${tag}></${tag}>`);
       valueChangedSpy = sinon.spy(element, '_valueChanged');
+      complexSpy = sinon.spy(element, '_valueChangedComplex');
       await element.updateComplete;
     });
 
@@ -697,6 +705,13 @@ describe('PolylitMixin', () => {
       expect(valueChangedSpy.calledOnce).to.be.true;
       expect(otherObserverSpy.calledOnce).to.be.true;
     });
+
+    it('should run dynamic property observer after complex observer', async () => {
+      element._createPropertyObserver('value', '_valueChanged');
+      element.value = 'bar';
+      await element.updateComplete;
+      expect(complexSpy.calledBefore(valueChangedSpy)).to.be.true;
+    });
   });
 
   describe('dynamic method observer', () => {