Skip to content

Commit 7c8e7b0

Browse files
committed
fix(cdk-experimental/ui-patterns): preserveContent should not render until first visible
1 parent 96117bc commit 7c8e7b0

File tree

2 files changed

+15
-10
lines changed

2 files changed

+15
-10
lines changed

src/cdk-experimental/deferred-content/deferred-content.spec.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,25 @@ describe('DeferredContent', () => {
3232
component.preserveContent.set(true);
3333
});
3434

35-
it('creates the content when hidden.', async () => {
35+
it('does not create the content until first visible.', async () => {
3636
collapsible.injector.get(Collapsible).contentVisible.set(false);
3737
await fixture.whenStable();
38-
expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
38+
expect(collapsible.nativeElement.innerText).toBe('');
3939
});
4040

4141
it('creates the content when visible.', async () => {
4242
collapsible.injector.get(Collapsible).contentVisible.set(true);
4343
await fixture.whenStable();
4444
expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
4545
});
46+
47+
it('does not remove the content when hidden.', async () => {
48+
collapsible.injector.get(Collapsible).contentVisible.set(true);
49+
await fixture.whenStable();
50+
collapsible.injector.get(Collapsible).contentVisible.set(false);
51+
await fixture.whenStable();
52+
expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
53+
});
4654
});
4755
});
4856

src/cdk-experimental/deferred-content/deferred-content.ts

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
*/
88

99
import {
10+
afterRenderEffect,
1011
Directive,
11-
effect,
1212
inject,
1313
input,
1414
TemplateRef,
@@ -21,7 +21,7 @@ import {
2121
*/
2222
@Directive()
2323
export class DeferredContentAware {
24-
contentVisible = signal(false);
24+
readonly contentVisible = signal(false);
2525
readonly preserveContent = input(false);
2626
}
2727

@@ -48,16 +48,13 @@ export class DeferredContent {
4848
private _isRendered = false;
4949

5050
constructor() {
51-
effect(() => {
52-
if (
53-
this._deferredContentAware.preserveContent() ||
54-
this._deferredContentAware.contentVisible()
55-
) {
51+
afterRenderEffect(() => {
52+
if (this._deferredContentAware.contentVisible()) {
5653
if (this._isRendered) return;
5754
this._viewContainerRef.clear();
5855
this._viewContainerRef.createEmbeddedView(this._templateRef);
5956
this._isRendered = true;
60-
} else {
57+
} else if (!this._deferredContentAware.preserveContent()) {
6158
this._viewContainerRef.clear();
6259
this._isRendered = false;
6360
}

0 commit comments

Comments
 (0)