Closed Nishchit14 closed 2 years ago
Hi. You should be able to achieve that by implementing a custom interaction mode. You can read about those here, and see an example implementation here. You can probably just copy the code from the latter link, and remove all logic that is related to multi item selection.
Another alternative would be to use a controlled environment, where you manage changes to the view state, including selected items, yourself. There you could also customize how item selection is handled.
Thank you @lukasbach for the quick help, I'll try your solution.
I have implemented it and working fine, thank you.
defaultInteractionMode={{
mode: 'custom',
extends: InteractionMode.ClickItemToExpand,
createInteractiveElementProps: (item, treeId, actions, renderFlags) => ({
/**
* 1. avoid multi select
* 2. (will not work as isFocused is always true, ignore for now) focus on first click and select item if it's focused (second click)
* 3. if has children then toggle expand/collapse
*/
onClick: e => { //avoid multi select
// console.log(item, actions, renderFlags)
if (item.hasChildren) actions.toggleExpandedState();
if(!renderFlags.isFocused) actions.focusItem();
else actions.selectItem();
},
onFocus: (e) => {
actions.focusItem();
},
}),
}}
Is your feature request related to a problem? Please describe. yes, read below description
Describe the solution you'd like In my case I only need a single selection of Item, I never found a way to prevent multiple item selection. If there is a config/props to prevent multi-selection then it would give more control to manage tree item.
Describe alternatives you've considered there is no alternative