Users/jes/tree expansion (#34282)

Author: eljefe223

change/@fluentui-web-components-518be343-8367-40e9-8214-f456b8fc0de3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[fix] only set expanded is expanded is not set",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/tree-item/tree-item.base.ts

@@ -115,7 +115,9 @@ export class BaseTreeItem extends FASTElement {
     }
 
     //If a tree item is nested and initially set to selected expand the tree items so the selected item is visible
-    this.expanded = Array.from(this.querySelectorAll('*')).some(el => isTreeItem(el) && el.selected);
+    if (!this.expanded) {
+      this.expanded = Array.from(this.querySelectorAll('[selected]')).some(el => isTreeItem(el));
+    }
 
     this.childTreeItems.forEach(item => {
       this.setIndent(item);

packages/web-components/src/tree-item/tree-item.spec.ts

@@ -95,4 +95,24 @@ test.describe('Tree Item', () => {
     await expect(element.nth(0)).toHaveAttribute('expanded');
     await expect(selectedItems).toBeVisible();
   });
+
+  test('should keep intitally set expanded attribute when no child item is set to selected', async ({ fastPage }) => {
+    const { element } = fastPage;
+    await fastPage.setTemplate({
+      attributes: { expanded: true },
+      innerHTML: /* html */ `
+        Item 1
+        <fluent-tree-item>
+          Nested Item A
+          <fluent-tree-item>
+            Nested Item B
+            <fluent-tree-item>Nested Item C</fluent-tree-item>
+          </fluent-tree-item>
+        </fluent-tree-item>
+      `,
+    });
+    const nestedItem = element.nth(0).locator('fluent-tree-item').nth(0);
+    await expect(element.nth(0)).toHaveAttribute('expanded');
+    await expect(nestedItem).toBeVisible();
+  });
 });

packages/web-components/src/tree/tree.stories.ts

@@ -7,7 +7,7 @@ type Story = StoryObj<FluentTree>;
 
 const storyTemplate = html<StoryArgs<FluentTree>>`
   <fluent-tree size="${x => x.size}" appearance="${x => x.appearance}">
-    <fluent-tree-item>
+    <fluent-tree-item expanded>
       Item 1
       <fluent-tree-item>
         <span slot="start">