Is there any way to open all or close all panels of the Vertical Nav?

[ethib137]

When defining permissions to a role in Liferay, the current behavior when filtering the vertical nav in the sidebar is to open all sub panels while filtering, and close all panels when done. Do we have a way of doing this with the current vertical nav?

[matuzalemsteles]

@ethib137 unfortunately there is no option other than modifying the active property of all items, another option would be to implement an API that controls the expanded states of all items similar to what we did for the TreeView it is more ergonomic than dealing with a tree, for example adding an API expandedKeys being a Set<React.Key> if you want to close all would just set the state of expandedKeys to an empty value setExpandedKeys(new Set()).

[ethib137]

Hey @matuzalemsteles I think you meant "no other option other than modifying the initialExpanded property of all items", right?

If so, from my testing that still won't work either. Maybe I'm doing something wrong though. I'm trying to make sure I don't mutate any objects, but maybe I'm missing something.

https://codesandbox.io/s/vertical-nav-expand-all-snbl0j?file=/src/index.js

[matuzalemsteles]

I think you meant "no other option other than modifying the initialExpanded property of all items", right?

Oh yes, I ended up typing it wrong.

If so, from my testing that still won't work either. Maybe I'm doing something wrong though. I'm trying to make sure I don't mutate any objects, but maybe I'm missing something.

Oh yeah, that won't work it doesn't follow controlled and uncontrolled state behavior it just works as initial state and the rest is controlled internally. I think that at the time when it was developed we had not thought about these use cases.

I think we can convert this to a feature request and implement this new API to facilitate this use case.

[ethib137]

That would be great! Thanks @matuzalemsteles !

[matuzalemsteles]

Maybe I have to implement the Collection pattern #5032 first in the VerticalNav component so we can get access to the unique keys of each item, so we could have an expandedKeys with the keys of each item as we can't infer it with the current implementation we would have to use index but this can have problems when you need to filter the items as is also your use case.

[github-actions]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-183595