Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Parent: Mass Merge 18.1.x to master
merged 2 commits into from
Aug 14, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d1511e9
fix(query-builder): search value input for dateTime focus
Zneeky Jul 24, 2024
0c04ede
Merge branch '18.1.x' into aahmedov/fix-searchValueInputFocus-14521-1…
Zneeky Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 31 additions & 1 deletion projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 - ', () => {
Expand Down
1 change: 1 addition & 0 deletions projects/igniteui-angular/src/lib/query-builder/query-builder.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,7 @@ <h6 class="igx-filter-empty__title">
>
<input
#input
#searchValueInput
igxInput
tabindex="0"
[placeholder]="
Expand Down
4 changes: 2 additions & 2 deletions projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down