Merge branch '21.1.x' into iminchev/fix-16493

Author: IMinchev64

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

@@ -1866,6 +1866,40 @@ describe('igxCombo', () => {
                     expect(document.activeElement).toEqual(combo.comboInput.nativeElement);
                     expect(combo.selection.length).toEqual(0);
                 }));
+                it('should stop Escape keydown event propagation when the dropdown is open', fakeAsync(() => {
+                    const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+                    spyOn(escapeEvent, 'stopPropagation');
+
+                    combo.comboInput.nativeElement.focus();
+                    fixture.detectChanges();
+
+                    combo.toggle();
+                    fixture.detectChanges();
+                    expect(combo.collapsed).toBeFalsy();
+
+                    combo.onEscape(escapeEvent);
+                    tick();
+                    fixture.detectChanges();
+
+                    expect(escapeEvent.stopPropagation).toHaveBeenCalled();
+                }));
+                it('should stop Escape key propagation when the combo is collapsed and has a selection', fakeAsync(() => {
+                    combo.comboInput.nativeElement.focus();
+                    fixture.detectChanges();
+
+                    combo.select([combo.data[0][combo.valueKey]]);
+                    expect(combo.selection.length).toEqual(1);
+                    fixture.detectChanges();
+
+                    const keyEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+                    const stopPropSpy = spyOn(keyEvent, 'stopPropagation');
+
+                    combo.onEscape(keyEvent);
+                    tick();
+                    fixture.detectChanges();
+
+                    expect(stopPropSpy).toHaveBeenCalledTimes(1);
+                }));
                 it('should close the combo and preserve the focus when Escape key is pressed', fakeAsync(() => {
                     combo.comboInput.nativeElement.focus();
                     fixture.detectChanges();

projects/igniteui-angular/combo/src/combo/combo.component.ts

@@ -187,6 +187,7 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
 
     @HostListener('keydown.Escape', ['$event'])
     public onEscape(event: Event) {
+        event.stopPropagation();
         if (this.collapsed) {
             this.deselectAllItems(true, event);
         }

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.
      */

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);
+            }));
         });
     });
 

projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts

@@ -5162,7 +5162,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             // Verify the calendar is scrolled to previous month.
             const headerLabel = document.querySelector('igx-calendar').querySelector('.igx-calendar-picker__date') as HTMLElement;
             const today = new Date();
-            const prevMonth = new Date(today.setMonth(today.getMonth() - 1));
+            const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
             const monthName = prevMonth.toLocaleString('default', { month: 'short' });
             expect(headerLabel.innerText.trim()).toMatch(`${monthName}`);
         }));

projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts

@@ -1134,6 +1134,38 @@ describe('IgxSimpleCombo', () => {
             expect(combo.selection).not.toBeDefined();
         }));
 
+        it('should stop Escape keydown event propagation when the dropdown is open', fakeAsync(() => {
+            const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+            spyOn(escapeEvent, 'stopPropagation');
+
+            combo.open();
+            fixture.detectChanges();
+            expect(combo.collapsed).toBeFalsy();
+
+            combo.handleKeyDown(escapeEvent);
+            tick();
+            fixture.detectChanges();
+
+            expect(escapeEvent.stopPropagation).toHaveBeenCalled();
+        }));
+
+        it('should stop Escape key propagation when the combo is collapsed and has a selection', fakeAsync(() => {
+            combo.comboInput.nativeElement.focus();
+            fixture.detectChanges();
+
+            combo.select(combo.data[2][combo.valueKey]);
+            fixture.detectChanges();
+            expect(combo.selection).toBeDefined();
+
+            const keyEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+            const stopPropSpy = spyOn(keyEvent, 'stopPropagation');
+
+            combo.handleKeyDown(keyEvent);
+            fixture.detectChanges();
+
+            expect(stopPropSpy).toHaveBeenCalledTimes(1);
+        }));
+
         it('should clear the selection on tab/blur if the search text does not match any value', () => {
             // allowCustomValues does not matter
             combo.select(combo.data[2][combo.valueKey]);

projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts

@@ -350,6 +350,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             }
         }
         if (event.key === this.platformUtil.KEYMAP.ESCAPE) {
+            event.stopPropagation();
             if (this.collapsed) {
                 const oldSelection = this.selection;
                 this.clearSelection(true);

skills/igniteui-angular-components/references/directives.md

@@ -23,7 +23,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 ```html
 <!-- Text buttons -->
 <button igxButton="flat">Flat</button>
-<button igxButton="raised">Raised</button>
+<button igxButton="contained">Contained</button>
 <button igxButton="outlined">Outlined</button>
 <button igxButton="fab">
   <igx-icon>add</igx-icon>
@@ -35,10 +35,10 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 <button igxIconButton="contained"><igx-icon>save</igx-icon></button>
 
 <!-- Disabled state -->
-<button igxButton="raised" [disabled]="isLoading()">Submit</button>
+<button igxButton="contained" [disabled]="isLoading()">Submit</button>
 ```
 
-Button variants for `igxButton`: `'flat'`, `'raised'`, `'outlined'`, `'fab'`.
+Button variants for `igxButton`: `'flat'`, `'contained'`, `'outlined'`, `'fab'`.
 Button variants for `igxIconButton`: `'flat'`, `'outlined'`, `'contained'`.
 
 ## Button Group
@@ -166,14 +166,14 @@ import { IgxRippleDirective } from 'igniteui-angular/directives';
 
 ```html
 <!-- Add to any clickable element for Material-style ink ripple -->
-<button igxButton="raised" igxRipple>Click me</button>
+<button igxButton="contained" igxRipple>Click me</button>
 <div igxRipple igxRippleTarget=".my-class" class="custom-surface">Interactive div</div>
 ```
 
 Inputs: `[igxRipple]` (ripple color), `[igxRippleCentered]` (always start from center), `[igxRippleDisabled]`.
 
 ```html
-<button igxButton="raised" igxRipple="#ff4081" [igxRippleCentered]="true">Pink ripple</button>
+<button igxButton="contained" igxRipple="#ff4081" [igxRippleCentered]="true">Pink ripple</button>
 ```
 
 ## Tooltip

skills/igniteui-angular-components/references/feedback.md

@@ -34,11 +34,11 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
   <p>Are you sure you want to delete this item? This action cannot be undone.</p>
   <div igxDialogActions>
     <button igxButton="flat" (click)="confirmDialog.close()">Cancel</button>
-    <button igxButton="raised" (click)="deleteItem(); confirmDialog.close()">Delete</button>
+    <button igxButton="contained" (click)="deleteItem(); confirmDialog.close()">Delete</button>
   </div>
 </igx-dialog>
 
-<button igxButton="raised" (click)="confirmDialog.open()">Delete Item</button>
+<button igxButton="contained" (click)="confirmDialog.open()">Delete Item</button>
 ```
 
 Programmatic control: