Hierarchical Grid: scrolled child views remain after the root grid has been destroyed

[damyanpetev]

Description

Turned up from a test case
hierarchical-grid.navigation.spec > IgxHierarchicalGrid Complex Navigation > should allow navigating up from parent into nested child grid
that scrolls child instances by a significant size (to last).

Already looked into it with @MayaKirova and as far as we can see after the root Hierarchical Grid instance had been destroyed, 3 child grids in IgxTemplateOutletDirective's _embeddedViewsMap cache remained not destroyed, thus not going through OnDestroy hook and removing their handlers.
The error in the tests is merely a side-effect of that.

I've commented out the test that reproduces this behavior and added a repro one:

igniteui-angular/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts

Lines 747 to 785 in 49d45e7

	xit('should allow navigating up from parent into nested child grid', (async () => {
	hierarchicalGrid.verticalScrollContainer.scrollTo(2);
	await wait(100);
	fixture.detectChanges();
	const child = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
	const lastIndex = child.verticalScrollContainer.igxForOf.length - 1;
	child.verticalScrollContainer.scrollTo(lastIndex);
	await wait(100);
	fixture.detectChanges();
	child.verticalScrollContainer.scrollTo(lastIndex);
	await wait(100);
	fixture.detectChanges();
	const parentCell = hierarchicalGrid.getCellByColumn(2, 'ID');
	parentCell.nativeElement.focus();
	await wait(100);
	fixture.detectChanges();
	const keyboardEvent = new KeyboardEvent('keydown', {
	code: 'ArrowUp',
	key: 'ArrowUp'
	});
	parentCell.dispatchEvent(keyboardEvent);
	await wait(100);
	fixture.detectChanges();
	const nestedChild = child.hgridAPI.getChildGrids(false)[5];
	const lastCell = nestedChild.getCellByColumn(4, 'ID');
	expect(lastCell.selected).toBe(true);
	expect(lastCell.focused).toBe(true);
	expect(lastCell.rowIndex).toBe(4);
	}));
	xit('ViewDestroyedError: Attempt to use a destroyed view trigger', (async () => {
	// Repro for leftover un-destroyed grid views (leaked resize handler):
	// fit this and the test above
	window.dispatchEvent(new Event('resize'));
	}));

• igniteui-angular version: 7.2.x (7.2.2)
• browser: N/A

Steps to reproduce

1. [Optional] If feat(igxGrid): Multi cell selection #3916 is not yer merged, switch to the branch
2. fit the "should allow navigating up from parent into nested child grid" and the repro test after it in hierarchical-grid.navigation.spec.ts
3. Run the tests
4. Observe the console

Result

The remaining resize handlers trigger actions on the destroyed fixture and throw:

Expected result

After the Hierarchical Grid is destroyed, there shouldn't be any child instances left behind.

Attachments

Attach a sample if available, and screenshots, if applicable.

[damyanpetev]

Note: Reproducible in 7.2.x as well (if you debug the resize handler in the base grid), except the test lacks the onChunkLoaded helper that would throw.