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

.changeset/friendly-pianos-wonder.md

@@ -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.

packages/button/src/LionButton.js

@@ -190,7 +190,11 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
   connectedCallback() {
     super.connectedCallback();
     this.__setupEvents();
+    // 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