Fix form interaction

This commit is contained in:
trading_peter 2022-11-15 20:24:13 +01:00
parent 3ca37a3918
commit 837b3abeb2
2 changed files with 24 additions and 1 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@tp/tp-button", "name": "@tp/tp-button",
"version": "1.0.1", "version": "1.0.2",
"description": "", "description": "",
"main": "tp-button.js", "main": "tp-button.js",
"scripts": { "scripts": {

View File

@ -216,6 +216,9 @@ class TpButton extends EventHelpers(LitElement) {
this.submit = false; this.submit = false;
} else { } else {
this.listen(this, 'click', '_submitOnTap'); 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(); 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() { _findSubmitTarget() {
let target; let target;
const root = this.getRootNode() || document; const root = this.getRootNode() || document;