diff --git a/.changeset/red-oranges-nail.md b/.changeset/red-oranges-nail.md new file mode 100644 index 000000000..a2a74095f --- /dev/null +++ b/.changeset/red-oranges-nail.md @@ -0,0 +1,5 @@ +--- +'@lion/form-core': minor +--- + +Updated the ValidateMixin \_\_setupValidators method to sync the calendar date with validator params with reference to this issue : https://github.com/ing-bank/lion/pull/1641/files#diff-bed9319548b16e509dd4a5c3d9c7c31175b577f91e433ee55a945e05339d2796R632 diff --git a/packages/form-core/src/validate/ValidateMixin.js b/packages/form-core/src/validate/ValidateMixin.js index 5e639106c..41c6b5fad 100644 --- a/packages/form-core/src/validate/ValidateMixin.js +++ b/packages/form-core/src/validate/ValidateMixin.js @@ -252,8 +252,8 @@ export const ValidateMixinImplementation = superclass => */ this.__childModelValueChanged = false; - /** @private */ - this.__onValidatorUpdated = this.__onValidatorUpdated.bind(this); + /** @protected */ + this._onValidatorUpdated = this._onValidatorUpdated.bind(this); /** @protected */ this._updateFeedbackComponent = this._updateFeedbackComponent.bind(this); } @@ -580,9 +580,9 @@ export const ValidateMixinImplementation = superclass => /** * @param {Event|CustomEvent} e - * @private + * @protected */ - __onValidatorUpdated(e) { + _onValidatorUpdated(e) { if (e.type === 'param-changed' || e.type === 'config-changed') { this.validate(); } @@ -597,7 +597,7 @@ export const ValidateMixinImplementation = superclass => this.__prevValidators.forEach(v => { events.forEach(e => { if (v.removeEventListener) { - v.removeEventListener(e, this.__onValidatorUpdated); + v.removeEventListener(e, this._onValidatorUpdated); } }); v.onFormControlDisconnect(this); @@ -621,9 +621,15 @@ export const ValidateMixinImplementation = superclass => console.error(errorMessage, this); throw new Error(errorMessage); } - events.forEach(e => { + /** Updated the code to fix issue #1607 to sync the calendar date with validators params + * Here _onValidatorUpdated is responsible for responding to the event + */ + events.forEach(eventName => { if (v.addEventListener) { - v.addEventListener(e, this.__onValidatorUpdated); + v.addEventListener(eventName, e => { + // @ts-ignore for making validator param dynamic + this._onValidatorUpdated(e, { validator: v }); + }); } }); v.onFormControlConnect(this); diff --git a/packages/form-core/test-suites/ValidateMixin.suite.js b/packages/form-core/test-suites/ValidateMixin.suite.js index 8ab767288..9312a348a 100644 --- a/packages/form-core/test-suites/ValidateMixin.suite.js +++ b/packages/form-core/test-suites/ValidateMixin.suite.js @@ -173,6 +173,25 @@ export function runValidateMixinSuite(customConfig) { expect(validateSpy.callCount).to.equal(1); }); + it('revalidates when validator "param-changed"', async () => { + const validator = new MinLength(3); + const el = /** @type {ValidateElement} */ ( + await fixture(html` + <${tag} + .validators=${[validator]} + .modelValue=${'myValue'} + >${lightDom} + `) + ); + + const validateSpy = sinon.spy(el, 'validate'); + expect(validateSpy.callCount).to.equal(0); + + validator.param = 4; + + expect(validateSpy.callCount).to.equal(1); + }); + it('clears current results when ".modelValue" changes', async () => { const el = /** @type {ValidateElement} */ ( await fixture(html`