[Bug]: flat tree expand/collapse not working when item ID is empty string

[steabert]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-1235U
    Memory: 17.45 GB / 30.98 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Browsers:
    Chrome: 126.0.6478.114

Are you reporting Accessibility issue?

None

Reproduction

https://stackblitz.com/edit/rlrvaz?file=src%2Fexample.tsx

Bug Description

Actual Behavior

import * as React from "react";
import {
  FlatTree,
  FlatTreeItem,
  TreeItemLayout,
  HeadlessFlatTreeItemProps,
  useHeadlessFlatTree_unstable,
} from "@fluentui/react-components";

const SELECTION_MODE = "multiselect"; // change to "single" for single selection

type CustomItem = HeadlessFlatTreeItemProps & { content: string };

const items: CustomItem[] = [
  { value: "", content: "Level 1, item 1" },
  { value: "1-1", parentValue: "", content: "Level 2, item 1" },
  { value: "1-2", parentValue: "", content: "Level 2, item 2" },
  { value: "2", content: "Level 1, item 2" },
  { value: "2-1", parentValue: "2", content: "Level 2, item 1" },
  { value: "2-1-1", parentValue: "2-1", content: "Level 3, item 1" },
  { value: "2-2", parentValue: "2", content: "Level 2, item 2" },
  { value: "2-2-1", parentValue: "2-2", content: "Level 3, item 1" },
  { value: "2-2-2", parentValue: "2-2", content: "Level 3, item 2" },
  { value: "3", content: "Level 1, item 3" },
];

export const Selection = () => {
  const flatTree = useHeadlessFlatTree_unstable(items, {
    openItems: ["", "2", "2-1", "2-2"],
    defaultCheckedItems: ["1-2"],
    selectionMode: SELECTION_MODE,
  });

  return (
    <FlatTree {...flatTree.getTreeProps()} aria-label="Selection">
      {Array.from(flatTree.items(), (flatTreeItem) => {
        const { content, ...treeItemProps } = flatTreeItem.getTreeItemProps();
        return (
          <FlatTreeItem {...treeItemProps} key={flatTreeItem.value}>
            <TreeItemLayout>{content}</TreeItemLayout>
          </FlatTreeItem>
        );
      })}
    </FlatTree>
  );
};

Clicking on the top item's chevron only toggles the orientation of the chevron but it does not collapse/expand the subtree.

Expected Behavior

Clicking on the top item's chevron collapses/expands the subtree.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[micahgodbolt]

Your demo is using "openItems" which specifies which items are opened and closed. If you want state to be handled internally, use defaultOpenItems.

Does this make sense, or am I missing something?

[steabert]

My problem is that the first item's ID is part of the openItems, so it should be open, yet it isn't. The other items are open.