fix: fire change event after value-changed (#3531)

vaadin · Mar 9, 2022 · 8e44e1e · 8e44e1e
1 parent 247ba84
commit 8e44e1e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js
@@ -434,6 +434,25 @@ export const DatePickerMixin = (subclass) =>
       this.opened = false;
     }
 
+    /**
+     * Override Polymer lifecycle callback to dispatch `change` event if needed.
+     * This is necessary to ensure `change` is fired after `value-changed`.
+     *
+     * @param {!Object} currentProps Current accessor values
+     * @param {?Object} changedProps Properties changed since the last call
+     * @param {?Object} oldProps Previous values for each changed property
+     * @protected
+     * @override
+     */
+    _propertiesChanged(currentProps, changedProps, oldProps) {
+      super._propertiesChanged(currentProps, changedProps, oldProps);
+
+      if ('value' in changedProps && this.__dispatchChange) {
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+        this.__dispatchChange = false;
+      }
+    }
+
     /**
      * Opens the dropdown.
      */
@@ -691,10 +710,6 @@ export const DatePickerMixin = (subclass) =>
 
     /** @private */
     _valueChanged(value, oldValue) {
-      if (this.__dispatchChange) {
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
-        this.__dispatchChange = false;
-      }
       this._handleDateChange('_selectedDate', value, oldValue);
 
       this._toggleHasValue(!!value);

diff --git a/packages/date-picker/test/keyboard-input.test.js b/packages/date-picker/test/keyboard-input.test.js
@@ -511,6 +511,17 @@ describe('keyboard', () => {
       expect(spy.called).to.be.true;
     });
 
+    it('should fire change after value-changed event', async () => {
+      const valueChangedSpy = sinon.spy();
+      datepicker.addEventListener('value-changed', valueChangedSpy);
+
+      await sendKeys({ type: '1/2/2000' });
+      await sendKeys({ press: 'Enter' });
+
+      expect(valueChangedSpy.calledOnce).to.be.true;
+      expect(spy.calledAfter(valueChangedSpy)).to.be.true;
+    });
+
     it('should fire change on selecting date with Enter', async () => {
       // Open the overlay
       await sendKeys({ press: 'ArrowDown' });