how to retain openFolders: Object { "someFolder/": true } on rerender .

[SinghPuneet]

I have a scenario where on clicking a folder a fetch call to get sub directories is done. Issue i am facing is this cause a render and I have to click again on parent folder to see the sub directories. It will be good if on render I can maintain openFolder State. Is there a way to do this ?

[scaredcat]

Hi @SinghPuneet I've tried to re-create a scenario where clicking on a folder fetches data and adds it to the list of files passed in as a prop. I was unable to reproduce the folder closing when the component re-renders.

Are you able to provide a code example on a sandbox?

[rdhara]

@scaredcat I have a related issue where the overall folders kept aren't saved between renders of the full component, which is not unreasonable. I wonder if there is a way to save the state and pass it to the component so that open folders remain open; native would be ideal, but even a prop for open nodes could be helpful here. Any thoughts? Thanks in advance!

[scaredcat]

Hi @rdhara could you please provide a code example? The folders shouldn't be changing between re-renders unless you are passing in a different set of folders each time you render the component.

[rdhara]

Hi @scaredcat Sorry maybe my wording was vague. The folders are the same, the problem is that if I open a folder, navigate away from the page that includes the file browser, and then come back to it (or change any prop it's connected to thereby triggering a re-render) all the folders close again. For instance, I'm able to do this "keep open folders open" logic in Material UI's TreeView by connecting the open nodes to the local state (please see this sandbox I made). If you expand nodes, switch, and switch back, the nodes expanded stay open. Is there any way to emulate this behavior here?

[scaredcat]

it makes sense what you are trying to achieve. It doesn't seem to be currently possible with our setup.

I'd recommend adding an extra prop that accepts the list of folder keys that should be open on first render. This prop will then set the initial openFolders state or default to the current empty object {} if not passed in. You can then use the existing onOpenFolder and onCloseFolder props to listen for changes so you know what the state should be when the component is re-mounted.

Happy to accept pull request for these changes.

[rdhara]

Got it yeah that's what I was thinking. I'll give it a shot after our product launch. Thanks!