From 1a1f600c24a667a02d8497a13c38d32b5de5d176 Mon Sep 17 00:00:00 2001
From: Tim Sielemann <tim.sielemann@googlemail.com>
Date: Thu, 28 Nov 2024 15:01:06 +0100
Subject: [PATCH] fix(core): submit buttons leads to refresh in firefox (#608)

Co-authored-by: Tim Sielemann <tim.sielemann@haiilo.com>
---
 angular/projects/catalyst-demo/src/app/app.component.html | 3 +++
 angular/projects/catalyst-demo/src/app/app.component.ts   | 4 ++++
 angular/projects/catalyst-demo/src/app/app.module.ts      | 5 +++--
 core/src/components/cat-button/cat-button.tsx             | 5 ++++-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/angular/projects/catalyst-demo/src/app/app.component.html b/angular/projects/catalyst-demo/src/app/app.component.html
index 40d5f611..b5f2096c 100644
--- a/angular/projects/catalyst-demo/src/app/app.component.html
+++ b/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>
diff --git a/angular/projects/catalyst-demo/src/app/app.component.ts b/angular/projects/catalyst-demo/src/app/app.component.ts
index 3776c1f5..554ac9cb 100644
--- a/angular/projects/catalyst-demo/src/app/app.component.ts
+++ b/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);
+  }
 }
diff --git a/angular/projects/catalyst-demo/src/app/app.module.ts b/angular/projects/catalyst-demo/src/app/app.module.ts
index fde5f997..4cb06867 100644
--- a/angular/projects/catalyst-demo/src/app/app.module.ts
+++ b/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]
diff --git a/core/src/components/cat-button/cat-button.tsx b/core/src/components/cat-button/cat-button.tsx
index f5745f11..c09e7d16 100644
--- a/core/src/components/cat-button/cat-button.tsx
+++ b/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();
     }
   }