Do not change focus when ESF keyboard navigation active element is fi… (#13687)

Author: mddragnev

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -769,8 +769,8 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
 
     private onArrowUpKeyDown() {
         if (this.focusedItem && this.focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
-            this.searchInput.focus();
-            this.onFocusOut();
+            // on ArrowUp the focus stays on the same element if it is the first focused
+            return;
         } else {
             this.navigateItem(this.focusedItem ? this.focusedItem.index - 1 : 0);
         }
@@ -780,8 +780,8 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     private onArrowDownKeyDown() {
         const lastIndex = this.virtDir.igxForOf.length - 1;
         if (this.focusedItem && this.focusedItem.index === lastIndex) {
-            this.cancelButton.nativeElement.focus();
-            this.onFocusOut();
+            // on ArrowDown the focus stays on the same element if it is the last focused
+            return;
         } else {
             this.navigateItem(this.focusedItem ? this.focusedItem.index + 1 : 0);
         }

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

@@ -5480,6 +5480,25 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             });
         }));
 
+        it('Should not lose focus with arrowUp/arrowDown when navigating inside search list', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
+            const list = searchComponent.querySelector('igx-list');
+            list.dispatchEvent(new Event('focus'));
+            tick(DEBOUNCETIME);
+            fix.detectChanges();
+            const listItems = list.querySelectorAll('igx-list-item');
+
+            // we expect only the first list item to be active when the list is focused
+            expect(listItems[0].classList.contains("igx-list__item-base--active")).toBeTrue();
+            expect(listItems[1].classList.contains("igx-list__item-base--active")).toBeFalse();
+
+            // on arrow up the focus should stay on the first element and not on the search input
+            UIInteractions.triggerKeyDownEvtUponElem('arrowup', list, true);
+            fix.detectChanges();
+            expect(listItems[0].classList.contains("igx-list__item-base--active")).toBeTrue();
+        }));
+
         it('Should add list items to current filtered items when "Add to current filter selection" is selected.', fakeAsync(() => {
             const totalListItems = [];