Merge pull request #1184 from mozzaik365/fix/treeViewNodesToExpand

Fixing TreeView nodes to expand and selection issues
pnp · Apr 19, 2022 · 37bc0eb · 37bc0eb
2 parents ae46ba0 + 0218cfb
commit 37bc0eb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/controls/treeView/TreeItem.tsx b/src/controls/treeView/TreeItem.tsx
@@ -160,10 +160,8 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
       let active = nextProps.activeItems.filter(item => item.key === treeItem.key);
 
       let _isExpanded:boolean=this.state.expanded;
-      if(!_isExpanded &&  nodesToExpand?.indexOf(this.props.treeItem.key) != -1) {
-        _isExpanded = true;
-      }
-      if(_isExpanded && nodesToExpand?.indexOf(this.props.treeItem.key) == -1){
+
+      if(!_isExpanded && nodesToExpand.indexOf(this.props.treeItem.key) == -1){
         _isExpanded=false;
       }
 

diff --git a/src/controls/treeView/TreeView.tsx b/src/controls/treeView/TreeView.tsx
@@ -43,14 +43,16 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
     let result: string;
     if (array) {
       array.some(({ key, children = [] }) => {
+        const alreadyExistInNodesToExpand = this.nodesToExpand.some((node) => node === key);
+
         if (key === target) {
-          this.nodesToExpand.push(key);
+          !alreadyExistInNodesToExpand && this.nodesToExpand.push(key);
           result = key;
           return true;
         }
         let temp = this.pathTo(children, target);
         if (temp) {
-          this.nodesToExpand.push(key);
+          !alreadyExistInNodesToExpand && this.nodesToExpand.push(key);
           result = key + '.' + temp;
           return true;
         }
@@ -90,6 +92,12 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
    * @argument isExpanded The status of item  (expanded / collapsed)
    */
   private handleTreeExpandCollapse(item: ITreeItem, isExpanded: boolean): void {
+    if (isExpanded) {
+      this.nodesToExpand.push(item.key);
+    } else {
+      this.nodesToExpand = this.nodesToExpand.filter((node) => node !== item.key);
+    }
+
     if (typeof this.props.onExpandCollapse === "function") {
       this.props.onExpandCollapse(item, isExpanded);
     }
@@ -240,8 +248,8 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
       showCheckboxes,
       treeItemActionsDisplayMode,
       defaultExpanded,
-      defaultExpandedChildren,
-      defaultExpandedKeys
+      defaultExpandedChildren = this.props.defaultExpandedChildren ?? true,
+      defaultExpandedKeys = this.props.defaultExpandedKeys ?? [],
     } = this.props;
 
     return (
@@ -253,15 +261,15 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
               leftOffset={20}
               isFirstRender={true}
               defaultExpanded={defaultExpanded}
-              defaultExpandedChildren={defaultExpandedChildren !== undefined ? defaultExpandedChildren : true}
+              defaultExpandedChildren={defaultExpandedChildren}
               selectionMode={selectionMode}
               activeItems={this.state.activeItems}
               parentCallbackExpandCollapse={this.handleTreeExpandCollapse}
               parentCallbackOnSelect={this.handleOnSelect}
               onRenderItem={onRenderItem}
               showCheckboxes={showCheckboxes}
               treeItemActionsDisplayMode={treeItemActionsDisplayMode}
-              nodesToExpand={defaultExpandedKeys}
+              nodesToExpand={[...this.nodesToExpand, ...defaultExpandedKeys]}
             />
           ))
         }