Skip to content

fix(grid): improve focusout handling to clear active node correctly - master #16810

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

Open
IMinchev64 wants to merge 4 commits into
base: master
Choose a base branch
from
+69 −0
Open

fix(grid): improve focusout handling to clear active node correctly - master #16810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6bd30fe
test(grid): test for remerging child grid cells on focus out from par…
IMinchev64 Jan 26, 2026
e1d18b2
fix(grid): improve focusout handling to clear active node correctly
IMinchev64 Jan 26, 2026
7e33e82
fix(grid): update focus handling to use focusin event for clearing ac…
IMinchev64 Jan 27, 2026
d726059
fix(grid): update focusout handling to clear active node and manage m…
IMinchev64 Feb 3, 2026
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
61 changes: 61 additions & 0 deletions projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1112,6 +1112,67 @@ describe('IgxGrid - Cell merging #grid', () => {
]);
});

it('should remerge child grid cells when focus moves to parent grid.', async () => {
const ri = fix.componentInstance.rowIsland;
ri.cellMergeMode = 'always';
ri.getColumnByName('ProductName').merge = true;
fix.detectChanges();

const firstRow = grid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
firstRow.toggle();
fix.detectChanges();

const childGrid = grid.gridAPI.getChildGrids(false)[0] as IgxHierarchicalGridComponent;
expect(childGrid).toBeDefined();

const childCol = childGrid.getColumnByName('ProductName');
GridFunctions.verifyColumnMergedState(childGrid, childCol, [
{ value: 'Product A', span: 2 },
{ value: 'Product B', span: 1 },
{ value: 'Product A', span: 1 }
]);

await wait(1);
fix.detectChanges();

const allGrids = fix.debugElement.queryAll(By.directive(IgxHierarchicalGridComponent));
const childGridDE = allGrids.find(x => x.componentInstance === childGrid);
expect(childGridDE).toBeDefined();
const childRows = childGridDE.queryAll(By.css(CSS_CLASS_GRID_ROW));
childRows.shift();
const childRowDE = childRows[0];
const childCells = childRowDE.queryAll(By.css('.igx-grid__td'));
const childCellDE = childCells[1];
UIInteractions.simulateClickAndSelectEvent(childCellDE.nativeElement);
await wait(1);
fix.detectChanges();

GridFunctions.verifyColumnMergedState(childGrid, childCol, [
{ value: 'Product A', span: 1 },
{ value: 'Product A', span: 1 },
{ value: 'Product B', span: 1 },
{ value: 'Product A', span: 1 }
]);

const rootGridDE = allGrids.find(x => x.componentInstance === grid);
expect(rootGridDE).toBeDefined();
const parentRows = rootGridDE.queryAll(By.css(CSS_CLASS_GRID_ROW));
parentRows.shift();
const parentRowDE = parentRows[0];
const parentCells = parentRowDE.queryAll(By.css('.igx-grid__td'));
const parentCellDE = parentCells[1];
UIInteractions.simulateClickAndSelectEvent(parentCellDE.nativeElement);
parentCellDE.nativeElement.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
await wait(1);
fix.detectChanges();

GridFunctions.verifyColumnMergedState(childGrid, childCol, [
{ value: 'Product A', span: 2 },
{ value: 'Product B', span: 1 },
{ value: 'Product A', span: 1 }
]);
});

});

describe('TreeGrid', () => {
Expand Down
8 changes: 8 additions & 0 deletions projects/igniteui-angular/grids/grid/src/grid-base.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3711,6 +3711,14 @@ export abstract class IgxGridBaseDirective implements GridType,
const destructor = takeUntil<any>(this.destroy$);
fromEvent(this.nativeElement, 'focusout').pipe(filter(() => !!this.navigation.activeNode), destructor).subscribe((event) => {
const activeNode = this.navigation.activeNode;

// In hierarchical grids, activation can be cleared by child highlight logic, leaving an empty object.
// If merging is enabled, clear cached active indexes to allow merge state to restore.
if (!Object.keys(activeNode).length && this.hasCellsToMerge) {
Copy link
Contributor

@MayaKirova MayaKirova Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is the best place to clear _activeRowIndexes , especially since this is very specific to the hierarchical grid.

Maybe in the clearActivation method in the hgrid navigation service, since that seems to be the thing that clears the active node:

Image

Or alternatively maybe emit the activeNodeChange event, since there's already an handler that listens for that event and updates the collection.

this._activeRowIndexes = null;
this.notifyChanges();
}

if (!this.crudService.cell && !!activeNode &&
((event.target === this.tbody.nativeElement && activeNode.row >= 0 &&
activeNode.row < this.dataView.length)
Expand Down
Loading