diff --git a/.changeset/cold-panthers-tie.md b/.changeset/cold-panthers-tie.md new file mode 100644 index 000000000..dc49b9a3a --- /dev/null +++ b/.changeset/cold-panthers-tie.md @@ -0,0 +1,5 @@ +--- +'@lion/form-core': patch +--- + +filter feedback messages according feedback conditions diff --git a/packages/form-core/src/validate/ValidateMixin.js b/packages/form-core/src/validate/ValidateMixin.js index 4f1dee4d7..9927202e8 100644 --- a/packages/form-core/src/validate/ValidateMixin.js +++ b/packages/form-core/src/validate/ValidateMixin.js @@ -636,7 +636,9 @@ export const ValidateMixinImplementation = superclass => .constructor); const types = ctor.validationTypes; // Sort all validators based on the type provided. - const res = validationResult.sort((a, b) => types.indexOf(a.type) - types.indexOf(b.type)); + const res = validationResult + .filter(v => this._showFeedbackConditionFor(v.type)) + .sort((a, b) => types.indexOf(a.type) - types.indexOf(b.type)); return res.slice(0, this._visibleMessagesAmount); } }; diff --git a/packages/form-core/test-suites/ValidateMixin.suite.js b/packages/form-core/test-suites/ValidateMixin.suite.js index 4bc7ae2a1..fb6d1b8a7 100644 --- a/packages/form-core/test-suites/ValidateMixin.suite.js +++ b/packages/form-core/test-suites/ValidateMixin.suite.js @@ -1165,6 +1165,61 @@ export function runValidateMixinSuite(customConfig) { expect(spy.callCount).to.equal(counter); } }); + + it('filters feedback visibility according interaction states', async () => { + const elTagString = defineCE( + // @ts-expect-error base constructor same return type + class extends ValidateMixin(LitElement) { + static get validationTypes() { + return ['error', 'info']; + } + + static get properties() { + return { + modelValue: { type: String }, + }; + } + + // @ts-ignore + _showFeedbackConditionFor(type) { + switch (type) { + case 'error': + // @ts-ignore + return ['A', 'B'].includes(this.modelValue); + default: + // @ts-ignore + return ['B', 'C'].includes(this.modelValue); + } + } + }, + ); + const elTag = unsafeStatic(elTagString); + const el = /** @type {ValidateElement} */ (await fixture(html` + <${elTag} + .validators=${[ + new AlwaysInvalid({}, { type: 'error' }), + new AlwaysInvalid({}, { type: 'info' }), + ]} + >${lightDom} + `)); + + for (const [modelValue, expected] of [ + ['A', ['error']], + ['B', ['error']], + ['C', ['info']], + ['D', []], + ]) { + el.modelValue = modelValue; + // eslint-disable-next-line no-await-in-loop + await el.updateComplete; + // eslint-disable-next-line no-await-in-loop + await el.feedbackComplete; + + // @ts-ignore + const resultOrder = el._feedbackNode.feedbackData.map(v => v.type); + expect(resultOrder).to.deep.equal(expected); + } + }); }); describe('Changing feedback messages globally', () => {