diff --git a/packages/validate/src/LionValidationFeedback.js b/packages/validate/src/LionValidationFeedback.js
index 993911e0f..ea175630a 100644
--- a/packages/validate/src/LionValidationFeedback.js
+++ b/packages/validate/src/LionValidationFeedback.js
@@ -26,7 +26,15 @@ export class LionValidationFeedback extends LitElement {
super.updated();
if (this.feedbackData && this.feedbackData[0]) {
this.setAttribute('type', this.feedbackData[0].type);
- } else {
+ this.currentType = this.feedbackData[0].type;
+ window.clearTimeout(this.removeMessage);
+ if (this.currentType === 'success') {
+ this.removeMessage = window.setTimeout(() => {
+ this.removeAttribute('type');
+ this.feedbackData = '';
+ }, 3000);
+ }
+ } else if (this.currentType !== 'success') {
this.removeAttribute('type');
}
}
diff --git a/packages/validate/test/lion-validation-feedback.test.js b/packages/validate/test/lion-validation-feedback.test.js
index 8b59713bd..46374359c 100644
--- a/packages/validate/test/lion-validation-feedback.test.js
+++ b/packages/validate/test/lion-validation-feedback.test.js
@@ -1,7 +1,8 @@
/* eslint-disable no-unused-vars, no-param-reassign */
+import sinon from 'sinon';
import { fixture, html, expect } from '@open-wc/testing';
import '../lion-validation-feedback.js';
-import { AlwaysInvalid } from '../test-helpers.js';
+import { AlwaysInvalid, AlwaysValid } from '../test-helpers.js';
describe('lion-validation-feedback', () => {
it('renders a validation message', async () => {
@@ -30,4 +31,49 @@ describe('lion-validation-feedback', () => {
await el.updateComplete;
expect(el.getAttribute('type')).to.equal('warning');
});
+
+ it('success message clears after 3s', async () => {
+ const el = await fixture(
+ html`
+
+ `,
+ );
+
+ const clock = sinon.useFakeTimers();
+
+ el.feedbackData = [{ message: 'hello', type: 'success', validator: new AlwaysValid() }];
+ await el.updateComplete;
+ expect(el.getAttribute('type')).to.equal('success');
+
+ clock.tick(2900);
+
+ expect(el.getAttribute('type')).to.equal('success');
+
+ clock.tick(200);
+
+ expect(el).to.not.have.attribute('type');
+
+ clock.restore();
+ });
+
+ it('does not clear error messages', async () => {
+ const el = await fixture(
+ html`
+
+ `,
+ );
+
+ const clock = sinon.useFakeTimers();
+
+ el.feedbackData = [{ message: 'hello', type: 'success', validator: new AlwaysValid() }];
+ await el.updateComplete;
+ expect(el.getAttribute('type')).to.equal('success');
+
+ el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
+ await el.updateComplete;
+ clock.tick(3100);
+ expect(el.getAttribute('type')).to.equal('error');
+
+ clock.restore();
+ });
});