diff --git a/src/aria/tree/tree.ts b/src/aria/tree/tree.ts index 045dc951493f..f8cb1b25e785 100644 --- a/src/aria/tree/tree.ts +++ b/src/aria/tree/tree.ts @@ -20,6 +20,7 @@ import { OnInit, OnDestroy, untracked, + afterNextRender, } from '@angular/core'; import {_IdGenerator} from '@angular/cdk/a11y'; import {Directionality} from '@angular/cdk/bidi'; @@ -267,7 +268,11 @@ export class TreeItem extends DeferredContentAware implements OnInit, OnDestr constructor() { super(); - this.preserveContent.set(true); + afterNextRender(() => { + if (this.tree().pattern instanceof ComboboxTreePattern) { + this.preserveContent.set(true); + } + }); // Connect the group's hidden state to the DeferredContentAware's visibility. afterRenderEffect(() => { this.tree().pattern instanceof ComboboxTreePattern diff --git a/src/aria/ui-patterns/tree/tree.spec.ts b/src/aria/ui-patterns/tree/tree.spec.ts index 844881aa6645..de0346ede026 100644 --- a/src/aria/ui-patterns/tree/tree.spec.ts +++ b/src/aria/ui-patterns/tree/tree.spec.ts @@ -1189,15 +1189,44 @@ describe('Tree Pattern', () => { }); it('should correctly compute visible state', () => { - const {allItems} = createTree(treeExample, treeInputs); + const {allItems} = createTree( + [ + { + value: 'Item 0', + children: [ + { + value: 'Item 0-0', + children: [{value: 'Item 0-0-0', disabled: false, selectable: true}], + disabled: false, + selectable: true, + }, + { + value: 'Item 0-1', + disabled: false, + selectable: true, + }, + ], + disabled: false, + selectable: true, + }, + ], + treeInputs, + ); const item0 = getItemByValue(allItems(), 'Item 0'); const item0_0 = getItemByValue(allItems(), 'Item 0-0'); + const item0_0_0 = getItemByValue(allItems(), 'Item 0-0-0'); expect(item0_0.visible()).toBe(false); + expect(item0_0_0.visible()).toBe(false); item0.expansion.open(); expect(item0_0.visible()).toBe(true); + expect(item0_0_0.visible()).toBe(false); + item0_0.expansion.open(); + expect(item0_0.visible()).toBe(true); + expect(item0_0_0.visible()).toBe(true); item0.expansion.close(); expect(item0_0.visible()).toBe(false); + expect(item0_0_0.visible()).toBe(false); }); it('should correctly compute expanded state', () => { diff --git a/src/aria/ui-patterns/tree/tree.ts b/src/aria/ui-patterns/tree/tree.ts index 3be3c1201c11..117b26ca1e68 100644 --- a/src/aria/ui-patterns/tree/tree.ts +++ b/src/aria/ui-patterns/tree/tree.ts @@ -80,7 +80,9 @@ export class TreeItemPattern implements ListItem, ExpansionItem { readonly expanded = computed(() => this.expansion.isExpanded()); /** Whether this item is visible. */ - readonly visible = computed(() => this.parent().expanded()); + readonly visible: SignalLike = computed( + () => this.parent().expanded() && this.parent().visible(), + ); /** The number of items under the same parent at the same level. */ readonly setsize = computed(() => this.parent().children().length); @@ -183,6 +185,9 @@ export class TreePattern { /** The root is always expanded. */ readonly expanded = () => true; + /** The roow is always visible. */ + readonly visible = () => true; + /** The tabindex of the tree. */ readonly tabindex: SignalLike<-1 | 0> = computed(() => this.listBehavior.tabindex());