diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js index 88ac734c14..5991f49a2b 100644 --- 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 index 0173314300..302fcac177 100644 --- 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' });