Merge branch 'master' into 13.1.x

IgniteUI · Mar 21, 2022 · 4c767d6 · 4c767d6
2 parents 5d57e26 + 9f7759f
commit 4c767d6
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 4 deletions.
diff --git a/...gular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html b/...gular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html
@@ -374,6 +374,7 @@ <h6 class="igx-filter-empty__title">
         <div class="igx-excel-filter__clear">
             <button
                 igxButton="flat"
+                type="button"
                 [displayDensity]="displayDensity"
                 (click)="onClearButtonClick($event)">
                     {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}
@@ -382,6 +383,7 @@ <h6 class="igx-filter-empty__title">
         <div class="igx-excel-filter__cancel">
             <button
                 igxButton="flat"
+                type="button"
                 [displayDensity]="displayDensity"
                 (click)="cancelChanges()">
                     {{ grid.resourceStrings.igx_grid_excel_cancel }}
@@ -390,6 +392,7 @@ <h6 class="igx-filter-empty__title">
         <div class="igx-excel-filter__apply">
             <button
                 igxButton="raised"
+                type="button"
                 [displayDensity]="displayDensity"
                 (click)="onApplyButtonClick($event)">
                 {{ grid.resourceStrings.igx_grid_excel_apply }}

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
@@ -359,6 +359,24 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
                 .toBe(false, 'Button indicates there is active filtering.');
         }));
 
+        it('The Clear/Cancel/Apply buttons type should be set to "button"', () => {
+            // Open Advanced Filtering dialog.
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            // Get Clear/Cancel/Apply buttons types.
+            const clearButtonType = GridFunctions.getAdvancedFilteringClearFilterButton(fix).getAttributeNode('type').value;
+            const cancelButtonType = GridFunctions.getAdvancedFilteringCancelButton(fix).getAttributeNode('type').value;
+            const applyButtonType = GridFunctions.getAdvancedFilteringApplyButton(fix).getAttributeNode('type').value;
+
+            const expectedButtonType = 'button';
+
+            // Verify buttons type is set to "button".
+            expect(clearButtonType).toBe(expectedButtonType, 'Clear button type is not "button"');
+            expect(cancelButtonType).toBe(expectedButtonType, 'Cancel button type is not "button"');
+            expect(applyButtonType).toBe(expectedButtonType, 'Apply button type is not "button"');
+        });
+
         it('Should correctly display header name in select dropdown and in chip expression.', fakeAsync(() => {
             // Open Advanced Filtering dialog.
             grid.openAdvancedFilteringDialog();

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts
@@ -10,6 +10,9 @@ import { By } from "@angular/platform-browser";
 const TOOLBAR_TAG = 'igx-grid-toolbar';
 const TOOLBAR_TITLE_TAG = 'igx-grid-toolbar-title';
 const TOOLBAR_ACTIONS_TAG = 'igx-grid-toolbar-actions';
+const TOOLBAR_PINNING_TAG = 'igx-grid-toolbar-pinning';
+const TOOLBAR_HIDING_TAG = 'igx-grid-toolbar-hiding';
+const TOOLBAR_ADVANCED_FILTERING_TAG = 'igx-grid-toolbar-advanced-filtering';
 const TOOLBAR_EXPORTER_TAG = 'igx-grid-toolbar-exporter';
 
 const DATA = [
@@ -114,6 +117,23 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => {
             instance = fixture.componentInstance;
         }));
 
+        it('the buttons type should be set to "button"', fakeAsync(() => {
+            tick();
+            fixture.detectChanges();
+
+            const pinningButtonType = $(TOOLBAR_PINNING_TAG).querySelector('button').getAttributeNode('type').value;
+            const hidingButtonType = $(TOOLBAR_HIDING_TAG).querySelector('button').getAttributeNode('type').value;
+            const advancedFilteringButtonType = $(TOOLBAR_ADVANCED_FILTERING_TAG).querySelector('button').getAttributeNode('type').value;
+            const exporterButtonType = $(TOOLBAR_EXPORTER_TAG).querySelector('button').getAttributeNode('type').value;
+
+            const expectedButtonType = 'button';
+
+            expect(pinningButtonType).toBe(expectedButtonType);
+            expect(hidingButtonType).toBe(expectedButtonType);
+            expect(advancedFilteringButtonType).toBe(expectedButtonType);
+            expect(exporterButtonType).toBe(expectedButtonType);
+        }));
+
         it('toolbar exporter props', () => {
             const exporterButton = $(TOOLBAR_EXPORTER_TAG).querySelector('button');
 

diff --git a/...cts/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html b/...cts/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html
@@ -1,4 +1,4 @@
-<button igxButton="outlined" [displayDensity]="grid.displayDensity" name="btnAdvancedFiltering" igxRipple
+<button igxButton="outlined" type="button" [displayDensity]="grid.displayDensity" name="btnAdvancedFiltering" igxRipple
     [title]="grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip"
     (click)="grid.openAdvancedFilteringDialog()"
     [ngClass]="grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'">

diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.html
@@ -1,5 +1,5 @@
 <button [title]="grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip" [disabled]="isExporting"
-    igxButton="outlined" [displayDensity]="grid.displayDensity" igxRipple #btn (click)="toggle(btn, toggleRef)">
+    igxButton="outlined" type="button" [displayDensity]="grid.displayDensity" igxRipple #btn (click)="toggle(btn, toggleRef)">
 
     <igx-icon>import_export</igx-icon>
     <span #ref>

diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="grid.rendered$ | async">
-    <button [title]="grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip" #btn igxButton="outlined"
+    <button [title]="grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip" #btn igxButton="outlined" type="button"
         name="btnColumnHiding" (click)="toggle(btn, ref, actions)" [displayDensity]="grid.displayDensity">
         <igx-icon>{{ !grid.hiddenColumnsCount ? 'visibility' : 'visibility_off' }}</igx-icon>
         <span>{{ grid.hiddenColumnsCount }}</span>

diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="grid.rendered$ | async">
-    <button [title]="grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip" #btn igxButton="outlined"
+    <button [title]="grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip" #btn igxButton="outlined" type="button"
         name="btnColumnPinning" (click)="toggle(btn, ref, actions)" [displayDensity]="grid.displayDensity">
         <igx-icon family="imx-icons" [name]="!grid.pinnedColumnsCount ? 'unpin-left' : 'pin-left'"></igx-icon>
         <span>{{ grid.pinnedColumnsCount }}</span>