controlling the treemenu both from parent component as well as the +/- against node

[dghosh]

Hi - Thanks for this useful component. I was wondering if there is a way to control the tree menu via both the parent component (as demonstrated in the story (https://iannbing.github.io/react-simple-tree-menu/?path=/story/treemenu--control-treemenu-from-its-parent) as well as via the +/- next to each menu item?
Looking at the code it seems if you use openNodes instead of initialOpenNodes it stops you from controlling the tree menu using the +/-. Any particular reason why thats the case or suggestions on how I can get both of them to work?

My particular use case is where i have a list of items and on clicking on each item it changes a view displaying additional details depending on which item is selected. The view is where i have the tree menu component. So the list of items is my parent component and view is child. And based on which item is selected and according the value of a particular field of the item i set the active key on the tree menu and the open nodes. But I also want to be able to change the value to something else and hence it would require me to toggle the +/- to select any other menu from the tree.

[iannbing]

openNodes is giving full control over the tree menu. This is only useful if you want to discard the built-in behaviour and build your own navigation logic. activeKey and focusKey are also designed for this purpose. I guess these are rarely used, since the built-in behaviours cover most of the use cases.

initialOpenNodes, initialActiveKey and initialFocusKey are meant for setting the tree to a specific state, but still keeps the built-in navigation behaviours. Together with the given props of TreeMenuItem, it should cover your use case if I understand you correctly.

[iannbing]

I'll close this issue for now. Feel free to re-open this issue if necessary 😄

[tagyoureit]

Hi @iannbing,

I'm wondering if there was a regression here. I took the story that was mentioned above (code on Stackblitz) and with

            <TreeMenu
              data={dataInArray}
              activeKey={this.state.activeKey}
              onClickItem={(...props)=>console.log(props)}
              openNodes={this.state.openNodes}
            />

it worked as described above.

When changing to

             <TreeMenu
              data={dataInArray}
              initialActiveKey={this.state.activeKey}
              onClickItem={(...props)=>console.log(props)}
              initialOpenNodes={this.state.openNodes}
            />

per your suggestion the tree control doesn't respect the activeKey/openNodes state that is set by the buttons. If I set the initial states then the tree does load with the correct open/highlighted nodes but control after that isn't working.

thoughts?

EDIT: I also tried a version with the wrapper (Stackblitz link) as I thought maybe that was the issue per the ReadMe, but still not working.

[iannbing]

TreeMenu will take the value you assigned to initialActiveKey when it is instantiated. After that, updating initialActiveKey will have no effect to TreeMenu, as it suggests in its name.

In summary,

• activeKey is giving a direct command, and TreeMenu will loose built-in behavior.
• initialActiveKey is the initial value you gave, after instantiation you lose control over TreeMenu.

If you want to set the tree shape at any time and still keep the built-in behaviors, I'd suggest using resetOpenNodes. See the following example (taken from the story reset openNodes).

<TreeMenu
   data={dataInArray}
   debounceTime={125}
   onClickItem={action(`on click node`)}
 >
   {({ search, items, resetOpenNodes }) => (
     <>
       <button
         onClick={() => {
           resetOpenNodes(['reptile']);
         }}
       >
         Reset
       </button>
       {defaultChildren({ search, items })}
     </>
   )}
 </TreeMenu>

[tagyoureit]

Hi,
Guess I misread the original poster's issue. And thanks for the suggestion. It's close, but not exactly what I'm looking for. I can set openNodes and then do something pretty hokey to simulate the click (this is needed because it is only available on the child elements of TreeMenu) but it doesn't set the activeKey.

The closest I was able to get is this. I have to click the buttons twice (maybe timing issue?) and simulate a click on the resetButton but again still not what I was looking for.

I'm hoping for an easier way to set the openNodes and activeKey by passing in a value(s) and keeping all other default behavior. To get this behavior now I basically need to rewrite most of this component (I started down that path and it was not trivial).

Can I turn this into a feature request for something (API?) that will do this?

[tagyoureit]

Did you see my PR on this? Thoughts?

[iannbing]

Hi, I was away from work for quite a while. Thanks for your PR. I have some comments.