Merge pull request #1174 from smeup/tree-expansion-node-no-select

tree: if KupTreeExpansionMode.NODE only expansion if expandible
smeup · Oct 4, 2021 · 2eeff5c · 2eeff5c
2 parents ecf9ab6 + 0994a60
commit 2eeff5c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 24 deletions.
diff --git a/packages/ketchup/src/assets/tree.js b/packages/ketchup/src/assets/tree.js
@@ -1,4 +1,6 @@
-
+document.addEventListener('kup-tree-nodeselected', (e) => console.log(e));
+document.addEventListener('kup-tree-nodeexpand', (e) => console.log(e));
+document.addEventListener('kup-tree-nodecollapse', (e) => console.log(e));
 document.addEventListener('kup-tree-contextmenu', (e) => console.log(e));
 document.addEventListener('kup-tree-columnmenu', (e) => console.log(e));
 let treeData = [
@@ -190171,10 +190173,13 @@ if (treeLayoutFixedEl != null) {
         console.log(JSON.stringify(detail));
         onLoadData(detail);
     });
-    treeLayoutFixedEl.addEventListener('kup-tooltip-loaddetail', ({ detail }) => {
-        console.log(JSON.stringify(detail));
-        onLoadDetailData(detail);
-    });
+    treeLayoutFixedEl.addEventListener(
+        'kup-tooltip-loaddetail',
+        ({ detail }) => {
+            console.log(JSON.stringify(detail));
+            onLoadDetailData(detail);
+        }
+    );
 }
 
 function onLoadData(detail) {

diff --git a/packages/ketchup/src/components/kup-tree/kup-tree.tsx b/packages/ketchup/src/components/kup-tree/kup-tree.tsx
@@ -957,32 +957,41 @@ export class KupTree {
         auto: boolean
     ) {
         unsetTooltip(this.tooltip);
-        // If this TreeNode is not disabled, then it can be selected and an event is emitted
+        if (
+            this.expansionMode.toLowerCase() ===
+                KupTreeExpansionMode.DROPDOWN ||
+            (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
+                !treeNodeData.expandable)
+        ) {
+            // If this TreeNode is not disabled, then it can be selected and an event is emitted
+            if (treeNodeData && !treeNodeData.disabled) {
+                if (this.autoSelectionNodeMode)
+                    this.selectedNode = treeNodePath
+                        .split(',')
+                        .map((treeNodeIndex) => parseInt(treeNodeIndex));
+
+                this.kupTreeNodeSelected.emit({
+                    comp: this,
+                    id: this.rootElement.id,
+                    treeNodePath: treeNodePath
+                        .split(',')
+                        .map((treeNodeIndex) => parseInt(treeNodeIndex)),
+                    treeNode: treeNodeData,
+                    columnName: this.selectedColumn,
+                    auto: auto,
+                });
+            }
+            this.selectedColumn = '';
+        }
+
+        // If KupTreeExpansionMode.NODE then click is a collapse/expand click
         if (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE) {
             this.hdlTreeNodeExpanderClick(
                 treeNodeData,
                 treeNodePath,
                 e ? e.ctrlKey : false
             );
         }
-        if (treeNodeData && !treeNodeData.disabled) {
-            if (this.autoSelectionNodeMode)
-                this.selectedNode = treeNodePath
-                    .split(',')
-                    .map((treeNodeIndex) => parseInt(treeNodeIndex));
-
-            this.kupTreeNodeSelected.emit({
-                comp: this,
-                id: this.rootElement.id,
-                treeNodePath: treeNodePath
-                    .split(',')
-                    .map((treeNodeIndex) => parseInt(treeNodeIndex)),
-                treeNode: treeNodeData,
-                columnName: this.selectedColumn,
-                auto: auto,
-            });
-        }
-        this.selectedColumn = '';
     }
 
     // When a TreeNode must be expanded or closed.

diff --git a/packages/ketchup/src/tree.html b/packages/ketchup/src/tree.html
@@ -85,6 +85,7 @@ <h1>Filters2</h1>
             <kup-tree
                 global-filter
                 as-accordion
+                expansion-mode="node"
                 id="tree-show-filter2"
             ></kup-tree>
             <h1>Filters3</h1>