Hello Dennis,
When you have { id: "/", type: "folder", lazy: true } in your initial data, the filemanager will trigger onRequestDatawith { id: "/" } as soon as you navigate to the root directory. If the data you then provide back via provide-data contains the folder "/" itself, the component will try to process it, find that it’s a lazy folder, and request its contents again which again includes "/", leading to an endless cycle.
In your working example (without the lazy root), the parent directory simply had no entry at all, so navigation to it only showed /dir1 because that was the only child present in the initial data.
The correct approach is to start with the root as lazy, plus your target folder and its files (this is what you did):
const initialData = [
{ id: "/", type: "folder", lazy: true },
{ id: "/dir1", type: "folder", lazy: false },
{ id: "/dir1/file1", type: "file" },
];
Then you need to implement onRequestData to fetch children without the parent folder.
Please attach a handler that loads the children of the requested folder and feeds them back using the component’s API. Here you can find the example of how to do this.
Also it is importgant to ensure the server response does not include the requested folder.
For a request to id="/", the server should return something like:
[
{ "id": "/dir1", "type": "folder", "lazy": true },
{ "id": "/some-other-folder", "type": "folder", "lazy": true },
{ "id": "/readme.md", "type": "file", "size": 2048 }
]
Notice that the root object { "id": "/", … } is absent. If your backend automatically includes the parent entry, either exclude it there or filter it on the client
