fix(core): submit buttons leads to refresh in firefox (#608)

Co-authored-by: Tim Sielemann <[email protected]>

angular/projects/catalyst-demo/src/app/app.component.html

@@ -129,3 +129,6 @@ <h1>new datetime picker</h1>
     <span slot="hint">Hint</span>
   </cat-tag>
 </form>
+<form class="cat-p-l" (ngSubmit)="submitIt($event)">
+  <cat-button [submit]="true">TEST SUBMIT</cat-button>
+</form>

angular/projects/catalyst-demo/src/app/app.component.ts

@@ -188,4 +188,8 @@ export class AppComponent implements OnInit {
   logChanges($event: any) {
     console.log($event);
   }
+
+  submitIt($event: any) {
+    console.log('hello', $event);
+  }
 }

angular/projects/catalyst-demo/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { CatalystModule } from '@haiilo/catalyst-angular';
 import { FormlyModule } from '@ngx-formly/core';
@@ -14,7 +14,8 @@ import { DialogComponent } from './dialog/dialog.component';
     FormlyModule.forRoot(),
     CatalystModule.forRoot(),
     CatalystFormlyModule,
-    CatalystModule
+    CatalystModule,
+    FormsModule
   ],
   declarations: [AppComponent, DialogComponent],
   bootstrap: [AppComponent]

core/src/components/cat-button/cat-button.tsx

@@ -199,7 +199,10 @@ export class CatButton {
       event.stopImmediatePropagation();
     } else if (this.submit) {
       const form = findClosest('form', this.hostElement);
-      form?.dispatchEvent(new SubmitEvent('submit', { submitter: this.button }));
+      const event = new SubmitEvent('submit', { submitter: this.button, cancelable: true });
+      form?.dispatchEvent(event);
+      event.stopPropagation();
+      event.preventDefault();
     }
   }