fix(snackbar): add type="button" - 22.2.x

CHANGELOG.md

@@ -2,7 +2,6 @@
 
 All notable changes for each version of this project will be documented in this file.
 
-
 ## 22.2.2
 
 ### New Features
@@ -11,6 +10,11 @@ All notable changes for each version of this project will be documented in this
     - Added the `$header-background` parameter to the tabs theme. It paints the whole tabs header, behind the tab items, and follows `$item-background` unless set. Thus a translucent `$item-background` composites over the header color instead of stacking on a copy of itself, and the header can be made transparent on its own. Both the header and the items are painted in all themes now; before, the header was painted in the Material and Bootstrap themes only.
     - The header keeps its height when there are no tabs, 48px in the Material and Bootstrap themes, 44px in Fluent and 40px in Indigo, as in Web Components. Before, it collapsed and lost its styles, since they were attached to the tab item component.
 
+### Bug Fixes
+
+- `IgxSnackbarComponent`
+    - The default action button now renders with `type="button"`. Previously, when the snackbar was inside a `form` (for example as part of a grid), pressing Enter in an input of the form submitted it.
+
 ## 22.2.1
 
 ### New Features

projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.html

@@ -6,7 +6,7 @@
     <ng-content select="[igxButton]"></ng-content>
 </div>
 @if (!customButton.children.length && actionText) {
-    <button igxButton (click)="triggerAction()">
+    <button type="button" igxButton (click)="triggerAction()">
         {{ actionText }}
     </button>
 }

projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.spec.ts

@@ -94,6 +94,18 @@ describe('IgxSnackbar', () => {
         expect(snackbar.clicked.emit).toHaveBeenCalledWith(snackbar);
     }));
 
+    it('should render the action button with type="button" to prevent form submission', fakeAsync(() => {
+        snackbar.actionText = 'undo';
+        snackbar.displayTime = 100;
+
+        snackbar.open();
+        tick(100);
+        fixture.detectChanges();
+
+        const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
+        expect(button.getAttribute('type')).toBe('button');
+    }));
+
     it('should emit opening when snackbar is shown', fakeAsync(() => {
         spyOn(snackbar.opening, 'emit');
         snackbar.open();