diff --git a/package.json b/package.json index 4664f28..2ad512f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tp/tp-button", - "version": "1.0.1", + "version": "1.0.2", "description": "", "main": "tp-button.js", "scripts": { diff --git a/tp-button.js b/tp-button.js index 68e9681..67de248 100644 --- a/tp-button.js +++ b/tp-button.js @@ -216,6 +216,9 @@ class TpButton extends EventHelpers(LitElement) { this.submit = false; } else { this.listen(this, 'click', '_submitOnTap'); + this.listen(this._form, 'submit', '_onFormSubmit'); + this.listen(this._form, 'invalid', '_onFormFailed'); + this.listen(this._form, 'response', '_onFormSuccess'); } } } @@ -338,6 +341,26 @@ class TpButton extends EventHelpers(LitElement) { this.showSpinner(); } + _onFormSuccess() { + this.isSubmitting(false); + this.showSuccess(); + } + + _onFormFailed(e) { + // Only react if this button instance was the actual pressed button. + // We have to check this in case the parent form has multiple submit buttons. + if (this._form.submitButton === this) { + if (e) { + if (e.composedPath()[0] !== this._form) { + return; + } + } + + this.isSubmitting = false; + this.showError(); + } + } + _findSubmitTarget() { let target; const root = this.getRootNode() || document;