[tree view] Controlling expansion fails to lazy-load items

[caillou]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/eprl156a?file=src%2FDemo.tsx
2. Click Open All Controlled.
3. Data is not fetched

Current behavior

No response

Expected behavior

No response

Context

I discovered this bug while trying to find a solution to the following issue:

#21053

Your environment

npx @mui/envinfo

   npmPackages:
    @base-ui/utils:  0.2.4 
    @emotion/react: latest => 11.14.0 
    @emotion/styled: latest => 11.14.1 
    @mui/core-downloads-tracker:  7.3.7 
    @mui/icons-material: latest => 7.3.7 
    @mui/material: latest => 7.3.7 
    @mui/private-theming:  7.3.7 
    @mui/styled-engine:  7.3.7 
    @mui/system:  7.3.7 
    @mui/types:  7.4.10 
    @mui/utils:  7.3.7 
    @mui/x-data-grid:  8.26.0 
    @mui/x-data-grid-generator: latest => 8.26.0 
    @mui/x-data-grid-premium:  8.26.0 
    @mui/x-data-grid-pro:  8.26.0 
    @mui/x-internal-exceljs-fork:  4.4.3 
    @mui/x-internals:  8.26.0 
    @mui/x-license:  8.26.0 
    @mui/x-telemetry:  8.20.0 
    @mui/x-tree-view: latest => 8.26.0 
    @mui/x-tree-view-pro: latest => 8.26.0 
    @mui/x-virtualizer:  0.3.3 
    @types/react: latest => 19.2.9 
    react: latest => 19.2.3 
    react-dom: latest => 19.2.3 
    typescript: latest => 5.9.3 

Search keywords: tree lazy-load

Order ID: 110649

[flaviendelangle]

Right now, we indeed don't track updates of props.expandedItems.
We want to fetch the children BEFORE the item gets extended when you click on an item, so the loading doesn't react to the expanded items changing, it hooks before they change and they resume the change.

Of course that doesn't work with direct changes to the model.
What is your use case for needing to control the expanded items now that you have API methods to manipulate the tree?

[caillou]

Thanks for your quick response.

Motivation

I am trying to auto-expand some of the child-items, depending on the response of dataSource.getTreeItems().

Basically, when an item's children are nested, but there are only a couple of nodes, we don't want to users to click 3-4 times to get to the last node. E.g.:

> France
> Switzerland  <- click here
> Germany

Should automatically expand to this:

> France
V Switzerland
  └── Canton of Zurich
      └── City of Zurich
          └── Main Office
      └── City of Winterthur
          └── Main Office
> Germany

It's hopefully all described in detail in the question I asked here a couple of days ago: #21053

Observation

Allow me one observation that can be seen on the example I posted: When expanding an item through apiRef.setItemExpansion(), the tree fetches its children. The fact that the behaviour is different made me think it's a bug.

[caillou]

@flaviendelangle Sorry to @ mention you here. I noticed that I didn't @ mention you in my last response, so I don't know if you actually saw it ...

I think we could close this issue, as from what I understand, this is the desired behviour.

I still wonder how I could achieve my desired outcome described in my last message.

One solution would be to do the lazy-loading myself. But then I'd need a way to tell that an item isLoading somehow.

WDYT? Should we close this and move the discussion to #21053.

[flaviendelangle]

Hi, sorry for the delay
I think we can close this one and focus on #21053

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

---

@caillou Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.