Skip to content

fix(elements): Add check for elements templates in case container is detached. #15969

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.

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

Closed
wants to merge 2 commits into from
Closed
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { html } from 'lit';
import { AsyncDirective, directive } from 'lit/async-directive.js';
@@ -13,22 +14,33 @@ class ToLowerAsyncDirective extends AsyncDirective {
protected override disconnected(): void {
directiveLog.push('disconnected');
}
}
export const toLowerAsync = directive(ToLowerAsyncDirective);
}
export const toLowerAsync = directive(ToLowerAsyncDirective);

@Component({
template: `<igx-template-wrapper></igx-template-wrapper>`,
imports: [TemplateWrapperComponent]
})
class TestTemplateWrapperComponent {
@ViewChild(TemplateWrapperComponent)
public templateWrapper;

constructor(public viewContainerRef: ViewContainerRef) { }
}

describe('WrapperComponent', () => {
let component: TemplateWrapperComponent;
let fixture: ComponentFixture<TemplateWrapperComponent>;
let component: TestTemplateWrapperComponent;
let fixture: ComponentFixture<TestTemplateWrapperComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TemplateWrapperComponent]
imports: [TestTemplateWrapperComponent]
})
.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(TemplateWrapperComponent);
fixture = TestBed.createComponent(TestTemplateWrapperComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
@@ -39,8 +51,9 @@ describe('WrapperComponent', () => {

it('should render template', () => {
const context = { text: "Oh hi" };
const templateRef = component.addTemplate((ctx) => html`<span id="template1">${ctx.text}</span>`);
const templateRef = component.templateWrapper.addTemplate((ctx) => html`<span id="template1">${ctx.text}</span>`);
const embeddedView = templateRef.createEmbeddedView(context);
component.viewContainerRef.insert(embeddedView);
embeddedView.detectChanges();

const span = embeddedView.rootNodes[0].querySelector("#template1");
@@ -51,8 +64,9 @@ describe('WrapperComponent', () => {

it('should update connectivity on template with AsyncDirective', () => {
const context = { text: "OH HI" };
const templateRef = component.addTemplate((ctx) => html`<span id="template1">${toLowerAsync(ctx.text)}</span>`);
const templateRef = component.templateWrapper.addTemplate((ctx) => html`<span id="template1">${toLowerAsync(ctx.text)}</span>`);
const embeddedView = templateRef.createEmbeddedView(context);
component.viewContainerRef.insert(embeddedView);
embeddedView.detectChanges();

const span = embeddedView.rootNodes[0].querySelector("#template1");
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import { TemplateRefWrapper } from './template-ref-wrapper';
import { render, type RootPart, type TemplateResult } from 'lit';

type TemplateFunction = (arg: any) => TemplateResult;
const SCHEDULE_DELAY = 10;

@Component({
selector: 'igx-template-wrapper',
@@ -17,6 +18,7 @@ export class TemplateWrapperComponent {
public templateFunctions: TemplateFunction[] = [];
public templateRendered = new Subject<HTMLElement>();
private childParts: WeakMap<HTMLElement, RootPart> = new WeakMap();
private timeoutId: NodeJS.Timeout | string | number | undefined;

/**
* All template refs
@@ -29,6 +31,15 @@ export class TemplateWrapperComponent {
constructor(private cdr: ChangeDetectorRef) { }

protected litRender(container: HTMLElement, templateFunc: (arg: any) => TemplateResult, arg: any) {
if (!container.isConnected) {
// Wait a bit if it gets attached back, otherwise do nothing
this.timeoutId = setTimeout(() =>{
if (container.isConnected) {
this.litRender(container, templateFunc, arg);
}
}, SCHEDULE_DELAY);
return;
}
const part = render(templateFunc(arg), container);

let existingPart = this.childParts.get(container);
@@ -70,5 +81,6 @@ export class TemplateWrapperComponent {
this.childParts.get(container).setConnected(false);
this.childParts.delete(container);
}
clearTimeout(this.timeoutId);
}
}
3 changes: 2 additions & 1 deletion projects/igniteui-angular-elements/tsconfig.spec.json
Original file line number Diff line number Diff line change
@@ -5,7 +5,8 @@
"allowJs": true,
"outDir": "../../out-tsc/spec",
"types": [
"jasmine"
"jasmine",
"node"
]
},
"files": [

Unchanged files with check annotations Beta

this.colsWidth = event.target.value;
}
public onColEnter(event: IDropBaseEventArgs, rowIndex, colIndex) {

Check warning on line 170 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (22.x)

'event' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 170 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (20.x)

'event' is defined but never used. Allowed unused args must match /^_/u
this.collection[rowIndex][colIndex].hovered = true;
}
public onColLeave(event: IDropBaseEventArgs, rowIndex, colIndex) {

Check warning on line 174 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (22.x)

'event' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 174 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (20.x)

'event' is defined but never used. Allowed unused args must match /^_/u
this.collection[rowIndex][colIndex].hovered = false;
}
this.resizeVisible = true;
}
public onBlur(event, rowIndex, colIndex) {

Check warning on line 235 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (22.x)

'event' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 235 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (20.x)

'event' is defined but never used. Allowed unused args must match /^_/u
this.cellSelected = null;
this.collection[rowIndex][colIndex].selected = false;
this.resizeVisible = false;
event.target.setPointerCapture(event.pointerId);
}
public pointerMoveResizeLeft(event, cellRef, rowIndex, colIndex) {

Check warning on line 250 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (22.x)

'rowIndex' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 250 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (20.x)

'rowIndex' is defined but never used. Allowed unused args must match /^_/u
if (this.dragStarted) {
const curDistance = this.dragStartX - event.pageX;
const minIncrease = -this.curResizedCell.colSpan;
}
}
public pointerMoveResizeRight(event, cellRef, rowIndex, colIndex) {

Check warning on line 262 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (22.x)

'rowIndex' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 262 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (22.x)

'cellRef' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 262 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (20.x)

'rowIndex' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 262 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (20.x)

'cellRef' is defined but never used. Allowed unused args must match /^_/u
if (this.dragStarted) {
const curDistance = event.pageX - this.dragStartX;
const maxIncrease = this.colsCount - (colIndex + this.curResizedCell.colSpan);
}
}
public pointerUpResizeRight(event, cellRef, rowIndex, colIndex) {

Check warning on line 271 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (22.x)

'cellRef' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 271 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (22.x)

'event' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 271 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (20.x)

'cellRef' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 271 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (20.x)

'event' is defined but never used. Allowed unused args must match /^_/u
this.dragStarted = false;
this.resizeVisible = false;
this.colSpanIncrease = 0;
}
public pointerUpResizeLeft(event, cellRef, targetRowIndex, targetColIndex) {

Check warning on line 351 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (22.x)

'event' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 351 in src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts

GitHub Actions / run-tests (20.x)

'event' is defined but never used. Allowed unused args must match /^_/u
this.dragStarted = false;
this.resizeVisible = false;
return `${this.remoteService.url}?$count=true&$skip=${state.startIndex}&$top=${chunkSize}`;
};
// eslint-disable-next-line prefer-spread
this.localItems = Array.apply(null, { length: 2000 }).map((e, i) => ({

Check warning on line 41 in src/app/drop-down/drop-down-virtual/drop-down-virtual.component.ts

GitHub Actions / run-tests (22.x)

'e' is defined but never used. Allowed unused args must match /^_/u

Check warning on line 41 in src/app/drop-down/drop-down-virtual/drop-down-virtual.component.ts

GitHub Actions / run-tests (20.x)

'e' is defined but never used. Allowed unused args must match /^_/u
name: `Item ${i + 1}`,
id: i
}));