Merge pull request #14575 from IgniteUI/aahmedov/fix-searchValueInputFocus-14521-18.1.x

fix(query-builder): Fix for dateTime's searchValueInput focus -18.1.x

Author: kacheshmarova

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

@@ -3113,9 +3113,39 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             GridFunctions.clickAdvancedFilteringColumnSelect(fix);
             fix.detectChanges();
             const dropdownValues = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix).map((x: any) => x.innerText);
-            const expectedValues = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'Another Field'];
+            const expectedValues = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'Another Field', 'DateTimeCreated'];
             expect(expectedValues).toEqual(dropdownValues);
         }));
+
+        it('Should correctly focus the search value input when editing the filtering expression', fakeAsync(() => {
+            // Open dialog through API.
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            //Create dateTime filtering expression
+            const tree = new FilteringExpressionsTree(FilteringLogic.And);
+            tree.filteringOperands.push({
+                fieldName: 'DateTimeCreated', searchVal: '11/11/2000 10:11:11 AM', condition: IgxStringFilteringOperand.instance().condition('equals')
+            });
+
+            grid.advancedFilteringExpressionsTree = tree;
+            fix.detectChanges();
+
+            // Hover the last visible expression chip
+            const expressionItem = fix.nativeElement.querySelectorAll(`.${ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS}`)[0];
+            expressionItem.dispatchEvent(new MouseEvent('mouseenter'));
+            tick();
+            fix.detectChanges();
+
+            // Click the edit icon to enter edit mode of the expression.
+            GridFunctions.clickAdvancedFilteringTreeExpressionChipEditIcon(fix, [0]);
+            tick();
+            fix.detectChanges();
+
+            //Check for the active element
+            let searchValueInput = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+            expect(document.activeElement).toBe(searchValueInput, 'The input should be the active element.');
+        }));
     });
 
     describe('External - ', () => {

projects/igniteui-angular/src/lib/query-builder/query-builder.component.html

@@ -338,6 +338,7 @@ <h6 class="igx-filter-empty__title">
             >
                 <input
                     #input
+                    #searchValueInput
                     igxInput
                     tabindex="0"
                     [placeholder]="

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1278,8 +1278,8 @@ export class IgxGridExternalAdvancedFilteringComponent extends BasicGridComponen
             <igx-column width="100px" [field]="'Released'" dataType="boolean"></igx-column>
             <igx-column width="100px" [field]="'ReleaseDate'" dataType="date" headerClasses="header-release-date"></igx-column>
         </igx-column-group>
-        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" dataType="string" [filters]="customFilter">
-        </igx-column>
+        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" dataType="string" [filters]="customFilter"></igx-column>
+        <igx-column width="100px" [field]="'DateTimeCreated'" dataType="dateTime"></igx-column>
     </igx-grid>`,
     standalone: true,
     imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]