ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(button): delay adding prevent event leakage handler by one frame

Browse source
This commit is contained in:
Joren Broekema 2021-01-28 16:42:37 +01:00
parent 1a5e353f7f
commit 33f639e885
2 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/friendly-pianos-wonder.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/button': patch
---
Delay adding prevent event leakage handler by one frame. This is because it takes 1 frame longer for older browsers such as Firefox ESR 60, IE11 and old Edge to have the native form available as a property on the native button.

13
packages/button/src/LionButton.js
View file

@ -190,7 +190,11 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
connectedCallback() {
super.connectedCallback();
this.__setupEvents();
this.__setupSubmitAndResetHelperOnConnected();
// Old browsers (IE11, Old Edge, Firefox ESR 60) don't have the `.form`
// property defined immediately on the native button, so do this after first render on connected.
this.updateComplete.then(() => {
this.__setupSubmitAndResetHelperOnConnected();
});
}
disconnectedCallback() {
@ -221,7 +225,12 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
* without side effects caused by the click bubbling back up to lion-button.
* @param {Event} ev
*/
__clickDelegationHandler(ev) {
async __clickDelegationHandler(ev) {
// Wait for updateComplete if form is not yet available
if (!this._form) {
await this.updateComplete;
}
if ((this.type === 'submit' || this.type === 'reset') && ev.target === this && this._form) {
/**
* Here, we make sure our button is compatible with a native form, by firing a click