Fix form interaction
This commit is contained in:
parent
3ca37a3918
commit
837b3abeb2
@ -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": {
|
||||||
|
23
tp-button.js
23
tp-button.js
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user