Merge remote-tracking branch 'origin/master' into copilot/increase-code-coverage-tests

ChronosSF · ChronosSF · commit e222444b69d6 · 2026-03-31T16:39:59.000+03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
@@ -306,7 +306,7 @@
         %filtering-row-input-overrides {
             igx-input-group {
                 width: 100%;
-                max-width: rem(200px);
+                max-width: rem(240px);
                 min-width: rem(140px);
 
                 @if $variant != 'fluent' {
@@ -2482,6 +2482,16 @@
                 margin: rem(4px);
             }
         }
+
+        .igx-grid__filtering-row-percent-hint {
+            display: inline-block;
+            max-width: rem(56px);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            vertical-align: middle;
+            flex-shrink: 1;
+        }
     }
 
     %igx-grid__filtering-dropdown-items {
diff --git a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts
@@ -1,5 +1,5 @@
 import {
-    Directive, OnInit, OnDestroy, Output, ElementRef, ViewContainerRef,
+    Directive, OnInit, OnDestroy, Output, ViewContainerRef,
     Input, EventEmitter, booleanAttribute, TemplateRef, ComponentRef, Renderer2,
     EnvironmentInjector,
     createComponent,
@@ -380,6 +380,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     private _positionSettings: PositionSettings = TooltipPositionSettings;
     private _showTriggers = new Set(['pointerenter']);
     private _hideTriggers = new Set(['pointerleave', 'click']);
+    private _pendingShowTrigger: string | null = null;
 
     private _abortController = new AbortController();
 
@@ -400,15 +401,20 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     /**
      * @hidden
      */
-    public onShow(): void {
-        this._checksBeforeShowing(() => this._showOnInteraction());
+    public onShow(event?: Event): void {
+        this._checksBeforeShowing(() => this._showOnInteraction(event));
     }
 
     /**
      * @hidden
      */
-    public onHide(): void {
-        if (this.tooltipDisabled || this.target.collapsed) {
+    public onHide(event?: Event): void {
+        if (this.target.collapsed) {
+            this._cancelPendingShow(event);
+            return;
+        }
+
+        if (this.tooltipDisabled) {
             return;
         }
 
@@ -538,7 +544,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         }, withDelay ? this.hideDelay : 0);
     }
 
-    private _showTooltip(withDelay: boolean, withEvents: boolean): void {
+    private _showTooltip(withDelay: boolean, withEvents: boolean, triggerEvent?: Event): void {
         if (!this.target.collapsed && !this._isForceClosed) {
             return;
         }
@@ -555,17 +561,19 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         }
 
         this._evaluateStickyState();
+        this._pendingShowTrigger = triggerEvent?.type ?? null;
 
         this.target.timeoutId = setTimeout(() => {
             // Call open() of IgxTooltipDirective
+            this._pendingShowTrigger = null;
             this.target.open(this._mergedOverlaySettings);
         }, withDelay ? this.showDelay : 0);
     }
 
 
-    private _showOnInteraction(): void {
+    private _showOnInteraction(triggerEvent?: Event): void {
         this._stopTimeoutAndAnimation();
-        this._showTooltip(true, true);
+        this._showTooltip(true, true, triggerEvent);
     }
 
     private _hideOnInteraction(): void {
@@ -594,6 +602,26 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         this.target.stopAnimations();
     }
 
+    /**
+     * Used when a hide trigger occurs before the tooltip opens.
+     * Clears the pending timeout and resets the tracked show trigger
+     * so the tooltip does not open after the user has already left the target.
+     */
+    private _cancelPendingShow(event?: Event): void {
+        if (!this.target.timeoutId) {
+            return;
+        }
+
+        // Keep same-event show/hide trigger combinations acting as toggle behavior.
+        if (event?.type && event.type === this._pendingShowTrigger) {
+            return;
+        }
+
+        clearTimeout(this.target.timeoutId);
+        this.target.timeoutId = null;
+        this._pendingShowTrigger = null;
+    }
+
     /**
      * Used when a single tooltip is used for multiple targets.
      */
diff --git a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.spec.ts
@@ -519,6 +519,19 @@ describe('IgxTooltip', () => {
                 flush();
                 verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
             }));
+
+            it('should not open when pointer leaves before the show delay elapses', fakeAsync(() => {
+                tooltipTarget.showDelay = 500;
+                fix.detectChanges();
+
+                hoverElement(button);
+                tick(300);
+                verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
+
+                unhoverElement(button);
+                tick(300);
+                verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
+            }));
         });
     });
 
diff --git a/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.html b/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.html
@@ -38,6 +38,9 @@
             (keyup)="onInputKeyUp()"/>
         @if (value || value === 0) {
             <igx-suffix>
+                @if (column.dataType === 'percent') {
+                    <span class="igx-grid__filtering-row-percent-hint">{{ value | percent:column.pipeArgs.digitsInfo:filteringService.grid.locale }}</span>
+                }
                 <igx-icon
                     (keydown)="onCommitKeyDown($event)"
                     (click)="onCommitClick()"
diff --git a/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts
@@ -26,16 +26,22 @@ import { IBaseChipEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'ign
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
 import { IgxDatePickerComponent } from 'igniteui-angular/date-picker';
-import { AbsoluteScrollStrategy, ColumnType, ConnectedPositioningStrategy, DataUtil, FilteringLogic, GridColumnDataType, HorizontalAlignment, IFilteringExpression, IFilteringOperation, IgxPickerClearComponent, IgxPickerToggleComponent, isEqual, OverlaySettings, PlatformUtil, ɵSize, VerticalAlignment } from 'igniteui-angular/core';
+import { AbsoluteScrollStrategy, ColumnType, ConnectedPositioningStrategy, DataUtil, FilteringLogic, GridColumnDataType, HorizontalAlignment, IFilteringExpression, IFilteringOperation, IgxPercentFormatterPipe, IgxPickerClearComponent, IgxPickerToggleComponent, isEqual, OverlaySettings, PlatformUtil, ɵSize, VerticalAlignment } from 'igniteui-angular/core';
 import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
 import { IgxButtonDirective, IgxDateTimeEditorDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
+/**
+ * Default debounce time (ms) for filtering row inputs.
+ * @hidden
+ */
+export const INPUT_DEBOUNCE_TIME_DEFAULT = 350;
+
 /**
  * Injection token for setting the debounce time used in filtering row inputs.
  * @hidden
  */
 export const INPUT_DEBOUNCE_TIME = /*@__PURE__*/new InjectionToken<number>('INPUT_DEBOUNCE_TIME', {
-    factory: () => 350
+    factory: () => INPUT_DEBOUNCE_TIME_DEFAULT
 });
 
 /**
@@ -65,7 +71,8 @@ export const INPUT_DEBOUNCE_TIME = /*@__PURE__*/new InjectionToken<number>('INPU
         IgxButtonDirective,
         NgClass,
         IgxRippleDirective,
-        IgxIconButtonDirective
+        IgxIconButtonDirective,
+        IgxPercentFormatterPipe
     ]
 })
 export class IgxGridFilteringRowComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -280,6 +287,7 @@ export class IgxGridFilteringRowComponent implements OnInit, AfterViewInit, OnDe
                 return 'text';
             case GridColumnDataType.Number:
             case GridColumnDataType.Currency:
+            case GridColumnDataType.Percent:
                 return 'number';
         }
     }
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.html b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.html
@@ -33,6 +33,11 @@
         [(ngModel)]="expressionUI.expression.searchVal"
         (blur)="updateSearchValueOnBlur($event)"
     />
+    @if (column.dataType === 'percent' && (expressionUI.expression.searchVal || expressionUI.expression.searchVal === 0)) {
+        <igx-suffix>
+            <span class="igx-grid__filtering-row-percent-hint">{{ expressionUI.expression.searchVal | percent:column.pipeArgs.digitsInfo:grid.locale }}</span>
+        </igx-suffix>
+    }
 </igx-input-group>
 
 @if (!isSingle) {
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts
@@ -1,9 +1,9 @@
 import { Component, AfterViewInit, Input, Output, EventEmitter, ChangeDetectorRef, ViewChild, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ExpressionUI } from './common';
-import { AbsoluteScrollStrategy, ColumnType, ConnectedPositioningStrategy, DataUtil, FilteringLogic, GridColumnDataType, IBaseEventArgs, IFilteringOperation, IgxOverlayOutletDirective, OverlaySettings, PlatformUtil } from 'igniteui-angular/core';
+import { AbsoluteScrollStrategy, ColumnType, ConnectedPositioningStrategy, DataUtil, FilteringLogic, GridColumnDataType, IBaseEventArgs, IFilteringOperation, IgxOverlayOutletDirective, IgxPercentFormatterPipe, OverlaySettings, PlatformUtil } from 'igniteui-angular/core';
 import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
-import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective } from 'igniteui-angular/input-group';
+import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
 import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
@@ -22,7 +22,7 @@ export interface ILogicOperatorChangedArgs extends IBaseEventArgs {
 @Component({
     selector: 'igx-excel-style-default-expression',
     templateUrl: './excel-style-default-expression.component.html',
-    imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective]
+    imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective, IgxPercentFormatterPipe]
 })
 export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
     public cdr = inject(ChangeDetectorRef);
diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts
@@ -20,7 +20,7 @@ import {
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec';
 import { GridFunctions, GridSummaryFunctions } from '../../../test-utils/grid-functions.spec';
-import { IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core';
+import { IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, INPUT_DEBOUNCE_TIME_DEFAULT, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core';
 import { IgxGridRowComponent } from './grid-row.component';
 import { GridColumnDataType, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core';
 import { IgxButtonDirective, IgxDateTimeEditorDirective } from 'igniteui-angular/directives';
@@ -838,6 +838,77 @@ describe('IgxGrid - Column properties #grid', () => {
             expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('002.700%');
         }));
 
+        it('should show percent suffix in filter row when filtering a percent column', fakeAsync(() => {
+            const fix = TestBed.createComponent(IgxGridPercentColumnComponent);
+            fix.detectChanges();
+
+            const grid = fix.componentInstance.grid;
+            const discountColumn = grid.getColumnByName('Discount');
+            grid.allowFiltering = true;
+            fix.detectChanges();
+
+            GridFunctions.clickFilterCellChip(fix, discountColumn.field);
+            tick(100);
+            fix.detectChanges();
+
+            const filterUIRow = fix.debugElement.query(By.css('igx-grid-filtering-row'));
+            const input = filterUIRow.query(By.directive(IgxInputDirective));
+
+            // Suffix should not be visible before entering a value
+            let percentLabel = filterUIRow.query(By.css('.igx-grid__filtering-row-percent-hint'));
+            expect(percentLabel).toBeNull();
+
+            // Enter a value to trigger the suffix; wait for the filter row input debounce
+            GridFunctions.typeValueInFilterRowInput(0.03, fix, input);
+            tick(INPUT_DEBOUNCE_TIME_DEFAULT);
+            fix.detectChanges();
+
+            percentLabel = filterUIRow.query(By.css('.igx-grid__filtering-row-percent-hint'));
+            expect(percentLabel).not.toBeNull();
+            expect(percentLabel.nativeElement.textContent.trim()).toEqual('3%');
+        }));
+
+        it('should show percent suffix in ESF custom dialog when filtering a percent column', fakeAsync(() => {
+            const fix = TestBed.createComponent(IgxGridPercentColumnComponent);
+            tick();
+            fix.detectChanges();
+
+            const grid = fix.componentInstance.grid;
+            const discountColumn = grid.getColumnByName('Discount');
+            grid.allowFiltering = true;
+            grid.filterMode = 'excelStyleFilter';
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterIcon(fix, discountColumn.field);
+            tick(100);
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Open custom filter dialog by selecting first operator (Equals)
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
+            tick(200);
+            fix.detectChanges();
+
+            const exprComponents = GridFunctions.getExcelCustomFilteringDefaultExpressions(fix);
+            expect(exprComponents.length).toBeGreaterThan(0);
+
+            // Percent label should not be visible before entering a value
+            let percentLabel = exprComponents[0].querySelector('.igx-grid__filtering-row-percent-hint');
+            expect(percentLabel).toBeNull();
+
+            // Enter a value to trigger the suffix
+            GridFunctions.setInputValueESF(fix, 0, 0.05);
+            tick(100);
+            fix.detectChanges();
+
+            percentLabel = exprComponents[0].querySelector('.igx-grid__filtering-row-percent-hint');
+            expect(percentLabel).not.toBeNull();
+            expect(percentLabel.textContent.trim()).toEqual('5%');
+        }));
+
     });
 
     describe('Date, DateTime and Time column tests', () => {
diff --git a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts
@@ -1977,7 +1977,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
         }));
 
         it('should scroll correct chip in view when one is deleted', async () => {
-            grid.width = '800px';
+            grid.width = '840px';
             fix.detectChanges();
             await wait(DEBOUNCE_TIME);
 
diff --git a/src/app/grid-filtering/grid-filtering.sample.ts b/src/app/grid-filtering/grid-filtering.sample.ts
@@ -1,6 +1,6 @@
 import { Component, ViewChild, OnInit, HostBinding } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { FilterMode, FilteringExpressionsTree, FilteringLogic, FormattedValuesFilteringStrategy, GridSelectionMode, IChangeCheckboxEventArgs, IGX_GRID_DIRECTIVES, IgxButtonGroupComponent, IgxCheckboxComponent, IgxGridComponent, IgxIconComponent, IgxStringFilteringOperand } from 'igniteui-angular';
+import { FilterMode, FilteringExpressionsTree, FilteringLogic, FormattedValuesFilteringStrategy, GridSelectionMode, IChangeCheckboxEventArgs, IGX_GRID_DIRECTIVES, IgxButtonDirective, IgxButtonGroupComponent, IgxCheckboxComponent, IgxGridComponent, IgxIconComponent, IgxStringFilteringOperand } from 'igniteui-angular';
 import { SAMPLE_DATA } from '../shared/sample-data';
 
 
@@ -9,7 +9,14 @@ import { SAMPLE_DATA } from '../shared/sample-data';
     selector: 'app-grid-filtering-sample',
     styleUrls: ['grid-filtering.sample.scss'],
     templateUrl: 'grid-filtering.sample.html',
-    imports: [FormsModule, IGX_GRID_DIRECTIVES, IgxCheckboxComponent, IgxButtonGroupComponent, IgxIconComponent]
+    imports: [
+        FormsModule,
+        IGX_GRID_DIRECTIVES,
+        IgxCheckboxComponent,
+        IgxButtonGroupComponent,
+        IgxIconComponent,
+        IgxButtonDirective
+    ]
 })
 export class GridFilteringComponent implements OnInit {
 
diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.html b/src/app/grid-percentage-columns/grid-percantge-widths.sample.html
@@ -1,7 +1,7 @@
 <div class="wrapper">
     <div class="sample-content">
         <div class="sample-column">
-            <igx-grid [data]="data" [locale]="locale" [allowFiltering]="true" [moving]="true" [filterMode]="'excelStyleFilter'" width="420px" height="600px">
+            <igx-grid [data]="data" [locale]="locale" [allowFiltering]="true" [moving]="true" [filterMode]="'excelStyleFilter'" width="100%" height="600px">
                 <igx-column field="ProductName" [pinned]="false" header="Product Name" width="20%" [dataType]="'string'" [sortable]="true" [hasSummary]="false" [editable]="true" [filterable]="true" >
                 </igx-column>
                 <igx-column field="UnitsInStock" [pinned]="false"  header="Units In Stock" width="20%" dataType="currency" [pipeArgs]="pipeArgs" [sortable]="true" [hasSummary]="true" [editable]="true" [filterable]="true" >
@@ -11,10 +11,10 @@
                         {{val | date:'dd/MM/yyyy'}}
                     </ng-template>
                 </igx-column>
-                <igx-column field="Discontinued"   header="Discontinued" width="10%" [dataType]="'boolean'" minWidth="20px"
+                <igx-column field="Discontinued" header="Discontinued" width="10%" [dataType]="'boolean'" minWidth="20px"
                     [sortable]="false" [hasSummary]="false" [editable]="true" [filterable]="false">
                 </igx-column>
-                <igx-column field="ReorderLevel" header="Reorder Level"  dataType="percent" [pipeArgs]="pipeArgs" [hasSummary]="true" width="10%" [sortable]="false"  [editable]="true" >
+                <igx-column field="ReorderLevel" header="Reorder Level" dataType="percent" [pipeArgs]="pipeArgs" [hasSummary]="true" width="10%" [sortable]="false"  [editable]="true" >
                 </igx-column>
                 <igx-column field="SupplierID" header="SupplierID"  width="10%" [sortable]="false"  [editable]="true">
                 </igx-column>
