VSCode API TreeView not getting children of elements

Question

In providing a treeview to VSCode, it seems to get all the parent elements but fail to get the children of these parent elements, I've added a debug point into it and saw that it was only ever called with undefined, is there something improper with my implementation?

export class GalleryTreeItem extends vscode.TreeItem {
  constructor(
    private extensionUri: vscode.Uri,
    public collapsibleState: vscode.TreeItemCollapsibleState,
    public readonly name: string,
    public readonly project?: Project
  ) {
    super(name, collapsibleState);
    if (this.project) {
      this.contextValue = "gallery";
      this.description = `v${this.project.config.userContentVersion}`;
      this.tooltip = this.project.config.repositoryUrl;
      this.command = {
        title: "Plywood Gallery: Open a gallery webview.",
        command: "plywood-gallery.Open",
        arguments: [this.label],
      };
      this.iconPath = vscode.Uri.joinPath(
        this.extensionUri,
        "assets/photo-gallery.png"
      );
    } else {
      this.contextValue = "chapter";
    }
  }

  getChapters() {
    if (this.project) {
      return Object.keys(this.project.parameters).map(
        (name) =>
          new GalleryTreeItem(
            this.extensionUri,
            vscode.TreeItemCollapsibleState.Collapsed,
            name
          )
      );
    } else {
      return [];
    }
  }
}

export class InstalledGalleriesExplorerProvider
  implements vscode.TreeDataProvider<GalleryTreeItem>
{
  constructor(private extensionUri: vscode.Uri) {}

  private _onDidChangeTreeData: vscode.EventEmitter<
    GalleryTreeItem | undefined | void
  > = new vscode.EventEmitter<GalleryTreeItem | undefined | void>();
  readonly onDidChangeTreeData: vscode.Event<
    GalleryTreeItem | undefined | void
  > = this._onDidChangeTreeData.event;

  getTreeItem(element: GalleryTreeItem): vscode.TreeItem {
    return element;
  }

  refresh(): void {
    this._onDidChangeTreeData.fire();
  }

  async getChildren(element?: GalleryTreeItem): Promise<GalleryTreeItem[]> {
    if (element) {
      return Promise.resolve(element.getChapters());
    } else {
      return getLocalProjects(this.extensionUri).then((projects) =>
        projects.map(
          (prj) =>
            new GalleryTreeItem(
              this.extensionUri,
              vscode.TreeItemCollapsibleState.None,
              prj.config.projectName,
              prj
            )
        )
      );
    }
  }
}

Answer 1

I found the exact passage of interest here: TreeView guide: Tree Data Provider which is a good resource for anyone building TeeViews.

Leaving the collapsibleState as its default of TreeItemCollapsibleState.None indicates that the tree item has no children. getChildren will not be called for tree items with a collapsibleState of TreeItemCollapsibleState.None.

Emphasis added, the default is TreeItemCollapsibleState.None so if you do not explicitly set the state to something else, the children of those nodes will never be retrieved.

As I mentioned in the comments you gave your parent nodes a vscode.TreeItemCollapsibleState.None property. Apparently, vscode is smart enough to not bother looking for children of such nodes - as they can't be opened anyway.

The solution is simply to choose another collapsibleState like TreeItemCollapsibleState.Collapsed or TreeItemCollapsibleState.Expanded.

Answer 2

"If I am seeing it right you are creating GalleryTreeItems which are your parent nodes, but they have vscode.TreeItemCollapsibleState.None which means they act like they are leaf nodes."

Changing it to vscode.TreeItemCollapsibleState.Collapsed fixes it.