reneco-hierarchized-picker 0.4.3-beta.10 → 0.4.3-beta.12

package/dist/cjs/reneco-hierarchized-picker_2.cjs.entry.js

@@ -323,49 +323,6 @@ Tree.prototype.bindEvent = function (ele) {
     else if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher')) {
       this.onSwitcherClick(target);
     }
-    const hasUndefinedchild = e.target.parentNode.querySelectorAll(".treejs-switcher").length > 0 && e.target.parentNode.querySelectorAll('ul').length == 0;
-    //CUSTOM
-    const childspans = Array.prototype.slice.call(e.target.parentNode.querySelectorAll('ul > li > span.treejs-label')).filter((ele) => {
-      return ele.parentNode.parentNode.parentNode === e.target.parentNode;
-    });
-    let undefinedChildren = [];
-    //This may be a problem the day a node value is "undefined"
-    undefinedChildren = childspans.filter(ele => {
-      return ele.textContent === 'undefined';
-    });
-    // If the user clicked on an unloaded node
-    if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher') && (undefinedChildren.length > 0 || hasUndefinedchild)) {
-      // Clear the subnode HTML
-      if (undefinedChildren.length > 0) {
-        e.target.parentNode.querySelector('ul').innerHTML = '';
-      }
-      // If source is webservice (it shouldn't be something else)
-      if (this.options.parentApi.theOptions.source == 'webservice') {
-        if (this.options.parentApi.theOptions.origin == 'classification') {
-          const contextualApiParams = this.options.parentApi.getContextualApiParams(Object.assign(Object.assign({}, this.options.parentApi.theOptions.options), { startNode: target.parentNode.nodeId }));
-          const contextualApiURL = this.options.parentApi.getContextualApiURL();
-          // WS Call
-          this.options.rawDataManager
-            .getFromClassification(contextualApiURL, contextualApiParams, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
-            .then(data => {
-            this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
-          });
-        }
-        else {
-          // WS Call
-          this.options.rawDataManager
-            .getFromSource(this.options.parentApi.theOptions.url, {
-            StartNodeID: target.parentNode.nodeId,
-            lng: this.options.parentApi.theOptions.options.lng,
-            IsDeprecated: this.options.parentApi.theOptions.options.IsDeprecated,
-          }, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
-            .then(data => {
-            this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
-          });
-        }
-      }
-      this.onSwitcherClick(target);
-    }
   }, false);
 };
 Tree.prototype.onItemClick = async function (id, rightclick = false) {
@@ -502,6 +459,48 @@ Tree.prototype.markWillUpdateNode = function (node) {
   this.willUpdateNodesById[node.id] = node;
 };
 Tree.prototype.onSwitcherClick = function (target) {
+  const hasUndefinedchild = target.parentNode.querySelectorAll(".treejs-switcher").length > 0 && target.parentNode.querySelectorAll('ul').length == 0;
+  //CUSTOM
+  const childspans = Array.prototype.slice.call(target.parentNode.querySelectorAll('ul > li > span.treejs-label')).filter((ele) => {
+    return ele.parentNode.parentNode.parentNode === target.parentNode;
+  });
+  let undefinedChildren = [];
+  //This may be a problem the day a node value is "undefined"
+  undefinedChildren = childspans.filter(ele => {
+    return ele.textContent === 'undefined';
+  });
+  // If the user clicked on an unloaded node
+  if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher') && (undefinedChildren.length > 0 || hasUndefinedchild)) {
+    // Clear the subnode HTML
+    if (undefinedChildren.length > 0) {
+      target.parentNode.querySelector('ul').innerHTML = '';
+    }
+    // If source is webservice (it shouldn't be something else)
+    if (this.options.parentApi.theOptions.source == 'webservice') {
+      if (this.options.parentApi.theOptions.origin == 'classification') {
+        const contextualApiParams = this.options.parentApi.getContextualApiParams(Object.assign(Object.assign({}, this.options.parentApi.theOptions.options), { startNode: target.parentNode.nodeId }));
+        const contextualApiURL = this.options.parentApi.getContextualApiURL();
+        // WS Call
+        this.options.rawDataManager
+          .getFromClassification(contextualApiURL, contextualApiParams, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
+          .then(data => {
+          this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
+        });
+      }
+      else {
+        // WS Call
+        this.options.rawDataManager
+          .getFromSource(this.options.parentApi.theOptions.url, {
+          StartNodeID: target.parentNode.nodeId,
+          lng: this.options.parentApi.theOptions.options.lng,
+          IsDeprecated: this.options.parentApi.theOptions.options.IsDeprecated,
+        }, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
+          .then(data => {
+          this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
+        });
+      }
+    }
+  }
   const liEle = target.parentNode;
   const ele = liEle.lastChild;
   const height = ele.scrollHeight;
@@ -539,6 +538,9 @@ Tree.prototype.onSwitcherClick = function (target) {
       },
     });
   }
+  return new Promise((resolve) => {
+    resolve(this);
+  });
 };
 Tree.prototype.walkUp = function (node, changeState) {
   const { parent } = node;
@@ -18642,27 +18644,49 @@ function focusOutSearchEvent(component, event) {
   manageFocusOut(component, event);
 }
 
+let focusedNodeIndex = 0;
 function setupKeyboardNavigation(component, navigateInTree) {
   const treeArea = component.el.querySelector('.hierarchized-picker-tree-area');
   if (!treeArea)
     return;
-  let focusedNodeIndex = 0;
   function focusNode(allLiElements, liElementToFocus) {
     Object.values(allLiElements).forEach((liNode) => {
       liNode.classList.remove('treejs-node__focused');
     });
     liElementToFocus.classList.add('treejs-node__focused');
   }
+  function findAllTreeNodes(treeNodes, liElementsById) {
+    let allNodes = [];
+    const traverse = (nodes) => {
+      nodes.forEach(node => {
+        allNodes.push(node);
+        if (node.children && node.children.length > 0 && !liElementsById[node.id].classList.contains("treejs-node__close")) {
+          traverse(node.children);
+        }
+      });
+    };
+    traverse(treeNodes);
+    return allNodes;
+  }
+  focusedNodeIndex = 0;
+  if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes) {
+    focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]);
+  }
+  if (component.el._hasKeydownListener) {
+    return;
+  }
+  component.el._hasKeydownListener = true;
   component.el.addEventListener('keydown', (event) => {
     var _a, _b;
     event.stopPropagation();
     const tree = component.loadedTreeJs;
-    const treeNodesFromTree = tree.treeNodes;
+    let treeNodesFromTree = findAllTreeNodes(tree.treeNodes, tree.liElementsById);
     if (!tree || !treeNodesFromTree.length)
       return;
-    const spaceNode = treeNodesFromTree[focusedNodeIndex];
-    const activeNode = treeNodesFromTree[focusedNodeIndex];
-    const liElement = tree.liElementsById[activeNode.id];
+    let spaceNode = treeNodesFromTree[focusedNodeIndex];
+    let activeNode = treeNodesFromTree[focusedNodeIndex];
+    let liElement = tree.liElementsById[activeNode.id];
+    const handledEvents = ['tab', '0', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'];
     switch (event.key) {
       case 'Tab':
       case '0':
@@ -18678,6 +18702,7 @@ function setupKeyboardNavigation(component, navigateInTree) {
         focusedNodeIndex = Math.max(focusedNodeIndex - 1, 0);
         const newActiveNodeUp = treeNodesFromTree[focusedNodeIndex];
         const newLiElementUp = tree.liElementsById[newActiveNodeUp.id];
+        newLiElementUp.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         focusNode(tree.liElementsById, newLiElementUp);
         break;
       case 'ArrowDown':
@@ -18686,13 +18711,13 @@ function setupKeyboardNavigation(component, navigateInTree) {
         const newActiveNodeDown = treeNodesFromTree[focusedNodeIndex];
         const newLiElementDown = tree.liElementsById[newActiveNodeDown.id];
         focusNode(tree.liElementsById, newLiElementDown);
+        newLiElementDown.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         break;
       case 'ArrowLeft':
         event.preventDefault();
         const leftSwitcher = liElement.querySelector('.treejs-switcher');
         if (leftSwitcher) {
           (_a = component.loadedTreeJs) === null || _a === void 0 ? void 0 : _a.onSwitcherClick(leftSwitcher);
-          component.showTree('hide');
         }
         break;
       case 'ArrowRight':
@@ -18703,13 +18728,12 @@ function setupKeyboardNavigation(component, navigateInTree) {
         }
         break;
     }
-    navigateInTree.emit(event.key);
+    if (handledEvents.includes(event.key.toLowerCase()))
+      navigateInTree.emit(event);
   });
-  if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes)
-    setTimeout(() => focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]), 100);
 }
 
-const hierarchizedPickerCss = "reneco-hierarchized-picker .hierarchized-picker-raw-tree-area{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader{position:absolute;z-index:1;min-width:100%;min-height:100%;background:#FFFFFF99;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader .loader-inner{background:#FFF;padding:20px;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader:not(.loading){display:none}reneco-hierarchized-picker .scrollable{overflow-y:auto;position:relative}reneco-hierarchized-picker .treejs{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--hpicker-theme-typography-tree-font-size, 14px) !important;font-weight:var(--hpicker-theme-typography-tree-font-weight, 400) !important}reneco-hierarchized-picker .treejs *:after,reneco-hierarchized-picker .treejs *:before{-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .treejs>.treejs-node{padding-left:0}reneco-hierarchized-picker .treejs .treejs-nodes{list-style:none;padding-left:20px;overflow:hidden;-webkit-transition:height 150ms ease-out, opacity 150ms ease-out;-o-transition:height 150ms ease-out, opacity 150ms ease-out;transition:height 150ms ease-out, opacity 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-node{cursor:pointer;overflow:hidden;position:relative}reneco-hierarchized-picker .treejs .treejs-node.treejs-placeholder{padding-left:20px}reneco-hierarchized-picker .treejs .treejs-switcher{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative;-webkit-transition:-webkit-transform 150ms ease-out;transition:-webkit-transform 150ms ease-out;-o-transition:transform 150ms ease-out;transition:transform 150ms ease-out;transition:transform 150ms ease-out, -webkit-transform 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-switcher:before{position:absolute;top:8px;left:6px;display:block;content:' ';border:4px solid transparent;border-top:4px solid rgba(0, 0, 0, 0.4);-webkit-transition:border-color 150ms;-o-transition:border-color 150ms;transition:border-color 150ms}reneco-hierarchized-picker .treejs .treejs-switcher:hover:before{border-top:4px solid var(--hpicker-theme-palette-font-color)}reneco-hierarchized-picker .treejs-node__checked>.treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-primary-contrastText) !important}reneco-hierarchized-picker .treejs-node__focused{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-switcher{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-nodes{height:0}reneco-hierarchized-picker .treejs .treejs-checkbox{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;cursor:pointer;position:absolute;top:2px;content:' ';display:block;width:16px;height:16px;border:1px solid #d9d9d9;border-radius:2px}reneco-hierarchized-picker .treejs .treejs-checkbox:hover:before{-webkit-box-shadow:0 0 2px 1px #1890ff;box-shadow:0 0 2px 1px #1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:4px;left:5px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}reneco-hierarchized-picker .treejs .treejs-node__halfchecked{background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c))}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:9px;left:3px;width:10px;height:2px;background-color:#fff}reneco-hierarchized-picker .treejs .treejs-node__disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25)}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox{cursor:not-allowed}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:before{cursor:not-allowed;border-color:#d9d9d9 !important;background-color:#f5f5f5 !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:hover:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-label{vertical-align:middle}reneco-hierarchized-picker .treejs .treejs-node__deprecated>.treejs-label{text-decoration:line-through}reneco-hierarchized-picker .treejs .treejs-node__desaturated>.treejs-label{opacity:.5}reneco-hierarchized-picker .treejs .treejs-node__searchmatch>.treejs-label{font-weight:bolder}reneco-hierarchized-picker .treejs .dragging{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c));display:inline;opacity:.9;padding:11px 0px;display:block}reneco-hierarchized-picker .treejs .dragover{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c))}reneco-hierarchized-picker .treejs .dragover-over::after{content:\"\";display:block;width:2px;height:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-before::after{content:\"\";display:block;height:2px;width:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-after::after{content:\"\";display:block;height:2px;width:100%;position:absolute;bottom:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .fieldError{color:red !important}reneco-hierarchized-picker .hidden{display:none;opacity:0}reneco-hierarchized-picker ul.treejs-nodes:first-child{padding-left:0px !important;margin-top:0px !important;margin-left:0px !important;background-color:var(--hpicker-theme-palette-background-dark)}reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){margin:0 !important;padding-left:15px !important;background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF)))}reneco-hierarchized-picker ul.treejs-nodes{margin-left:15px !important;padding-left:0px !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node ul.treejs-nodes{margin:11px 0 0 0 !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node__close ul.treejs-nodes{margin:0 !important}reneco-hierarchized-picker li.treejs-node__close{background-color:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-light, #FAFAFA)))}reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c));padding-bottom:0px !important}reneco-hierarchized-picker li:not(.treejs-node__close) ul.treejs-nodes li{margin-top:2px !important}reneco-hierarchized-picker ul li:last-child{margin-bottom:0px !important}reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--hpicker-theme-palette-primary-light) !important;color:var(--hpicker-theme-palette-primary-ContrastText, var(--mui-palette-primary-ContrastText, var(--ion-color-primary-contrast, #000)))!important}reneco-hierarchized-picker li.treejs-node{padding:2px 0px;margin-bottom:2px}reneco-hierarchized-picker .treejs-node.readonly_node{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:darkgrey}reneco-hierarchized-picker .treejs-node:not(.readonly_node){-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black))}reneco-hierarchized-picker .hierarchized-picker-container{position:relative;width:100%}reneco-hierarchized-picker .hierarchized-picker-input-area{background-color:transparent !important;display:-ms-flexbox;display:flex;width:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}reneco-hierarchized-picker .hierarchized-picker-input-area .input-wrapper{padding-left:10px !important}reneco-hierarchized-picker .hierarchized-picker-input{-ms-flex:2;flex:2}reneco-hierarchized-picker .hierarchized-picker-input input{width:100%}reneco-hierarchized-picker .hierarchized-picker-input.readonly{pointer-events:none;cursor:initial}reneco-hierarchized-picker .hierarchized-picker-label{position:stacked;margin-left:5px}reneco-hierarchized-picker .hierarchized-picker-tree-area{padding-top:10px}reneco-hierarchized-picker .hierarchized-picker-modal-area{position:absolute;width:100%;background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF))) !important;z-index:10;overflow:scroll;top:20px;min-height:100px;max-height:var(--hpicker-theme-modal-height, \"200px\") !important;-webkit-box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);border-radius:4px;margin-right:0px !important}reneco-hierarchized-picker .hierarchized-picker-modal-area.display-modale-top{bottom:30px !important;top:unset !important}reneco-hierarchized-picker .hierarchized-picker-modal{padding:0px 15px}reneco-hierarchized-picker .hierarchized-picker{display:-ms-flexbox;display:flex;width:100%;font-family:'Roboto', sans-serif}reneco-hierarchized-picker .hierarchized-picker-spinner{margin:35px 0px 0px 145px}reneco-hierarchized-picker .reneco:before{position:relative;top:1px}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco:hover{cursor:pointer}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco-close{color:var(--ion-color-danger, red) !important;padding-left:10px}reneco-hierarchized-picker .treejs .treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-dark-shade, #121212)))}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before,reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;border-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker #autocomplete-results-area{position:absolute;margin-top:48px;background-color:white;left:15px;z-index:10;padding:0px 5px;max-width:340px;max-height:110px;overflow:auto}reneco-hierarchized-picker #autocomplete-results-area li{list-style-type:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;margin:1px}reneco-hierarchized-picker .hierarchized-picker-raw-tree-area li.treejs-node{padding:11px 0px;display:block}reneco-hierarchized-picker input[title]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}reneco-hierarchized-picker input{background-color:var(--hpicker-theme-palette-input-background-color,  #eeeeee);border-style:var(--hpicker-theme-palette-input-border-style,  solid)}reneco-hierarchized-picker input:focus-visible{outline:none !important}.hierarchized-picker-raw-tree-area.readonly li.treejs-node .treejs-switcher{pointer-events:all}::-webkit-scrollbar-thumb{background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433)));width:8px;margin:5px;border-radius:5px}::-webkit-scrollbar{background:var(--ion-color-medium-tint, #E0E0E0);width:8px;height:8px;margin:5px;cursor:pointer;border-radius:5px}::-webkit-scrollbar-corner{background-color:var(--ion-color-light-tint, #FFF)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__close{background-color:var(--ion-color-dark-tint, #424242);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--ion-color-dark, #212121);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--ion-color-background, var(--hpicker-theme-palette-background-default, rgba(221, 169, 37, 0.18)));color:var(--ion-color-primary-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker .treejs-switcher:before{border-top-color:var(--ion-color-dark-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked .treejs-switcher:before{color:var(--ion-color-light-contrast, #111111) !important}[class$=\"-dark\"] reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){background-color:var(--ion-color-light-contrast, #111111) !important}";
+const hierarchizedPickerCss = "reneco-hierarchized-picker .hierarchized-picker-raw-tree-area{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader{position:absolute;z-index:1;min-width:100%;min-height:100%;background:#FFFFFF99;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader .loader-inner{background:#FFF;padding:20px;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader:not(.loading){display:none}reneco-hierarchized-picker .scrollable{overflow-y:auto;position:relative}reneco-hierarchized-picker .treejs{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--hpicker-theme-typography-tree-font-size, 14px) !important;font-weight:var(--hpicker-theme-typography-tree-font-weight, 400) !important}reneco-hierarchized-picker .treejs *:after,reneco-hierarchized-picker .treejs *:before{-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .treejs>.treejs-node{padding-left:0}reneco-hierarchized-picker .treejs .treejs-nodes{list-style:none;padding-left:20px;overflow:hidden;-webkit-transition:height 150ms ease-out, opacity 150ms ease-out;-o-transition:height 150ms ease-out, opacity 150ms ease-out;transition:height 150ms ease-out, opacity 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-node{cursor:pointer;overflow:hidden;position:relative}reneco-hierarchized-picker .treejs .treejs-node.treejs-placeholder{padding-left:20px}reneco-hierarchized-picker .treejs .treejs-switcher{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative;-webkit-transition:-webkit-transform 150ms ease-out;transition:-webkit-transform 150ms ease-out;-o-transition:transform 150ms ease-out;transition:transform 150ms ease-out;transition:transform 150ms ease-out, -webkit-transform 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-switcher:before{position:absolute;top:8px;left:6px;display:block;content:' ';border:4px solid transparent;border-top:4px solid rgba(0, 0, 0, 0.4);-webkit-transition:border-color 150ms;-o-transition:border-color 150ms;transition:border-color 150ms}reneco-hierarchized-picker .treejs .treejs-switcher:hover:before{border-top:4px solid var(--hpicker-theme-palette-font-color)}reneco-hierarchized-picker .treejs-node__checked>.treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-primary-contrastText) !important}reneco-hierarchized-picker .treejs-node__focused{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-switcher{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-nodes{height:0}reneco-hierarchized-picker .treejs .treejs-checkbox{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;cursor:pointer;position:absolute;top:2px;content:' ';display:block;width:16px;height:16px;border:1px solid #d9d9d9;border-radius:2px}reneco-hierarchized-picker .treejs .treejs-checkbox:hover:before{-webkit-box-shadow:0 0 2px 1px #1890ff;box-shadow:0 0 2px 1px #1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:4px;left:5px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}reneco-hierarchized-picker .treejs .treejs-node__halfchecked{background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c))}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:9px;left:3px;width:10px;height:2px;background-color:#fff}reneco-hierarchized-picker .treejs .treejs-node__disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25)}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox{cursor:not-allowed}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:before{cursor:not-allowed;border-color:#d9d9d9 !important;background-color:#f5f5f5 !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:hover:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-label{vertical-align:middle}reneco-hierarchized-picker .treejs .treejs-node__deprecated>.treejs-label{text-decoration:line-through}reneco-hierarchized-picker .treejs .treejs-node__desaturated>.treejs-label{opacity:.5}reneco-hierarchized-picker .treejs .treejs-node__searchmatch>.treejs-label{font-weight:bolder}reneco-hierarchized-picker .treejs .dragging{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c));display:inline;opacity:.9;padding:11px 0px;display:block}reneco-hierarchized-picker .treejs .dragover{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c))}reneco-hierarchized-picker .treejs .dragover-over::after{content:\"\";display:block;width:2px;height:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-before::after{content:\"\";display:block;height:2px;width:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-after::after{content:\"\";display:block;height:2px;width:100%;position:absolute;bottom:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .fieldError{color:red !important}reneco-hierarchized-picker .hidden{display:none;opacity:0}reneco-hierarchized-picker ul.treejs-nodes:first-child{padding-left:0px !important;margin-top:0px !important;margin-left:0px !important;background-color:var(--hpicker-theme-palette-background-dark)}reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){margin:0 !important;padding-left:15px !important;background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF)))}reneco-hierarchized-picker ul.treejs-nodes{margin-left:15px !important;padding-left:0px !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node ul.treejs-nodes{margin:11px 0 0 0 !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node__close ul.treejs-nodes{margin:0 !important}reneco-hierarchized-picker li.treejs-node__close{background-color:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-light, #FAFAFA)))}reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c));padding-bottom:0px !important}reneco-hierarchized-picker li:not(.treejs-node__close) ul.treejs-nodes li{margin-top:2px !important}reneco-hierarchized-picker ul li:last-child{margin-bottom:0px !important}reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--hpicker-theme-palette-primary-light) !important;color:var(--hpicker-theme-palette-primary-ContrastText, var(--mui-palette-primary-ContrastText, var(--ion-color-primary-contrast, #000)))!important}reneco-hierarchized-picker li.treejs-node{padding:2px 0px;margin-bottom:2px}reneco-hierarchized-picker .treejs-node.readonly_node{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:darkgrey}reneco-hierarchized-picker .treejs-node:not(.readonly_node){-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black))}reneco-hierarchized-picker .hierarchized-picker-container{position:relative;width:100%}reneco-hierarchized-picker .hierarchized-picker-input-area{background-color:transparent !important;display:-ms-flexbox;display:flex;width:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}reneco-hierarchized-picker .hierarchized-picker-input-area .input-wrapper{padding-left:10px !important}reneco-hierarchized-picker .hierarchized-picker-input{-ms-flex:2;flex:2}reneco-hierarchized-picker .hierarchized-picker-input input{width:100%}reneco-hierarchized-picker .hierarchized-picker-input.readonly{pointer-events:none;cursor:initial}reneco-hierarchized-picker .hierarchized-picker-label{position:stacked;margin-left:5px}reneco-hierarchized-picker .hierarchized-picker-tree-area{padding-top:10px}reneco-hierarchized-picker .hierarchized-picker-modal-area{position:absolute;width:100%;background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF))) !important;z-index:10;overflow:scroll;top:20px;min-height:100px;max-height:var(--hpicker-theme-modal-height, \"200px\") !important;-webkit-box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);border-radius:4px;margin-right:0px !important}reneco-hierarchized-picker .hierarchized-picker-modal-area.display-modale-top{bottom:30px !important;top:unset !important}reneco-hierarchized-picker .hierarchized-picker-modal{padding:0px 15px}reneco-hierarchized-picker .hierarchized-picker{display:-ms-flexbox;display:flex;width:100%;font-family:'Roboto', sans-serif}reneco-hierarchized-picker .hierarchized-picker-spinner{margin:35px 0px 0px 145px}reneco-hierarchized-picker .reneco:before{position:relative;top:1px}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco:hover{cursor:pointer}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco-close{color:var(--ion-color-danger, red) !important;padding-left:10px}reneco-hierarchized-picker .treejs .treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-dark-shade, #121212)))}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before,reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;border-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker #autocomplete-results-area{position:absolute;margin-top:48px;background-color:white;left:15px;z-index:10;padding:0px 5px;max-width:340px;max-height:110px;overflow:auto}reneco-hierarchized-picker #autocomplete-results-area li{list-style-type:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;margin:1px}reneco-hierarchized-picker .hierarchized-picker-raw-tree-area li.treejs-node{padding:11px 0px;display:block}reneco-hierarchized-picker input[title]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}reneco-hierarchized-picker input{background-color:var(--hpicker-theme-palette-input-background-color,  #eeeeee);border-style:var(--hpicker-theme-palette-input-border-style,  solid)}reneco-hierarchized-picker input:focus-visible{outline:unset !important;outline-color:unset !important;outline-style:unset !important}.hierarchized-picker-raw-tree-area.readonly li.treejs-node .treejs-switcher{pointer-events:all}::-webkit-scrollbar-thumb{background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433)));width:8px;margin:5px;border-radius:5px}::-webkit-scrollbar{background:var(--ion-color-medium-tint, #E0E0E0);width:8px;height:8px;margin:5px;cursor:pointer;border-radius:5px}::-webkit-scrollbar-corner{background-color:var(--ion-color-light-tint, #FFF)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__close{background-color:var(--ion-color-dark-tint, #424242);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--ion-color-dark, #212121);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--ion-color-background, var(--hpicker-theme-palette-background-default, rgba(221, 169, 37, 0.18)));color:var(--ion-color-primary-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker .treejs-switcher:before{border-top-color:var(--ion-color-dark-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked .treejs-switcher:before{color:var(--ion-color-light-contrast, #111111) !important}[class$=\"-dark\"] reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){background-color:var(--ion-color-light-contrast, #111111) !important}";
 
 const HierarchizedPickerComponent = class {
   /**
@@ -18978,7 +19002,6 @@ const HierarchizedPickerComponent = class {
   }
   componentDidLoad() {
     this.mylog('----- componentDidLoad beginning -----');
-    setupKeyboardNavigation(this, this.navigateInTree);
     focusMainInput();
   }
   displayWhenLoaded() {
@@ -19523,8 +19546,6 @@ const HierarchizedPickerComponent = class {
     const previousShownTree = this.shownTree;
     this.shownTree = this.hasFocus.length > 0;
     if (this.shownTree && !previousShownTree) {
-      console.log("component value", document.querySelector('#hierarchized-picker-input-' + this.componentID));
-      console.log("shouldOpenModalAbove", this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight));
       if (this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight)) {
         this.modalePosition = 'top';
       }
@@ -19532,6 +19553,8 @@ const HierarchizedPickerComponent = class {
         this.modalePosition = 'bottom';
       }
       focusSearchInput(this);
+      //TODO, this this at the good location ?
+      setupKeyboardNavigation(this, this.navigateInTree);
     }
   }
   // Changes the value of the component with passed node
@@ -19849,9 +19872,7 @@ const SearchInput = class {
   render() {
     return (index.h("div", { id: "hierarchized-picker-input-search",
       // TODO: need component ID ?
-      class: "search-input-container", ref: (el) => (this.rootElement = el) }, index.h("div", { class: "reneco reneco-search" }), index.h("input", { ref: (el) => (this.inputElement = el), type: "text", class: "native-input sc-ion-input-md-h sc-ion-input-md-s md search-input hierarchized-picker-search",
-      //class="native-input search-input hierarchized-picker-search sc-ion-input-md-h sc-ion-input-md-s md"
-      placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
+      class: "search-input-container", ref: (el) => (this.rootElement = el) }, index.h("div", { class: "reneco reneco-search" }), index.h("input", { ref: (el) => (this.inputElement = el), type: "text", class: "native-input sc-ion-input-md-h sc-ion-input-md-s md search-input hierarchized-picker-search", placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
   }
 };
 SearchInput.style = searchInputCss;

package/dist/collection/components/hierarchized-picker/hierarchized-picker.css

@@ -477,7 +477,9 @@ reneco-hierarchized-picker input {
 }
 
 reneco-hierarchized-picker input:focus-visible {
-  outline: none !important;
+  outline: unset !important;
+  outline-color: unset !important;
+  outline-style: unset !important;
 }
 
 /* TODO For now, the readonly status is ignored for the mode tree, probably need a rework sometime */

package/dist/collection/components/hierarchized-picker/hierarchized-picker.js

@@ -272,7 +272,6 @@ export class HierarchizedPickerComponent {
   }
   componentDidLoad() {
     this.mylog('----- componentDidLoad beginning -----');
-    setupKeyboardNavigation(this, this.navigateInTree);
     focusMainInput(this);
   }
   displayWhenLoaded() {
@@ -820,8 +819,6 @@ export class HierarchizedPickerComponent {
     const previousShownTree = this.shownTree;
     this.shownTree = this.hasFocus.length > 0;
     if (this.shownTree && !previousShownTree) {
-      console.log("component value", document.querySelector('#hierarchized-picker-input-' + this.componentID));
-      console.log("shouldOpenModalAbove", this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight));
       if (this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight)) {
         this.modalePosition = 'top';
       }
@@ -829,6 +826,8 @@ export class HierarchizedPickerComponent {
         this.modalePosition = 'bottom';
       }
       focusSearchInput(this);
+      //TODO, this this at the good location ?
+      setupKeyboardNavigation(this, this.navigateInTree);
     }
   }
   // Changes the value of the component with passed node

package/dist/collection/components/search-input/search-input.js

@@ -31,9 +31,7 @@ export class SearchInput {
   render() {
     return (h("div", { id: "hierarchized-picker-input-search",
       // TODO: need component ID ?
-      class: "search-input-container", ref: (el) => (this.rootElement = el) }, h("div", { class: "reneco reneco-search" }), h("input", { ref: (el) => (this.inputElement = el), type: "text", class: "native-input sc-ion-input-md-h sc-ion-input-md-s md search-input hierarchized-picker-search",
-      //class="native-input search-input hierarchized-picker-search sc-ion-input-md-h sc-ion-input-md-s md"
-      placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
+      class: "search-input-container", ref: (el) => (this.rootElement = el) }, h("div", { class: "reneco reneco-search" }), h("input", { ref: (el) => (this.inputElement = el), type: "text", class: "native-input sc-ion-input-md-h sc-ion-input-md-s md search-input hierarchized-picker-search", placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
   }
   static get is() { return "search-input"; }
   static get originalStyleUrls() {

package/dist/collection/components/treejs/index.js

@@ -188,49 +188,6 @@ Tree.prototype.bindEvent = function (ele) {
     else if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher')) {
       this.onSwitcherClick(target);
     }
-    const hasUndefinedchild = e.target.parentNode.querySelectorAll(".treejs-switcher").length > 0 && e.target.parentNode.querySelectorAll('ul').length == 0;
-    //CUSTOM
-    const childspans = Array.prototype.slice.call(e.target.parentNode.querySelectorAll('ul > li > span.treejs-label')).filter((ele) => {
-      return ele.parentNode.parentNode.parentNode === e.target.parentNode;
-    });
-    let undefinedChildren = [];
-    //This may be a problem the day a node value is "undefined"
-    undefinedChildren = childspans.filter(ele => {
-      return ele.textContent === 'undefined';
-    });
-    // If the user clicked on an unloaded node
-    if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher') && (undefinedChildren.length > 0 || hasUndefinedchild)) {
-      // Clear the subnode HTML
-      if (undefinedChildren.length > 0) {
-        e.target.parentNode.querySelector('ul').innerHTML = '';
-      }
-      // If source is webservice (it shouldn't be something else)
-      if (this.options.parentApi.theOptions.source == 'webservice') {
-        if (this.options.parentApi.theOptions.origin == 'classification') {
-          const contextualApiParams = this.options.parentApi.getContextualApiParams(Object.assign(Object.assign({}, this.options.parentApi.theOptions.options), { startNode: target.parentNode.nodeId }));
-          const contextualApiURL = this.options.parentApi.getContextualApiURL();
-          // WS Call
-          this.options.rawDataManager
-            .getFromClassification(contextualApiURL, contextualApiParams, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
-            .then(data => {
-            this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
-          });
-        }
-        else {
-          // WS Call
-          this.options.rawDataManager
-            .getFromSource(this.options.parentApi.theOptions.url, {
-            StartNodeID: target.parentNode.nodeId,
-            lng: this.options.parentApi.theOptions.options.lng,
-            IsDeprecated: this.options.parentApi.theOptions.options.IsDeprecated,
-          }, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
-            .then(data => {
-            this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
-          });
-        }
-      }
-      this.onSwitcherClick(target);
-    }
   }, false);
 };
 Tree.prototype.onItemClick = async function (id, rightclick = false) {
@@ -367,6 +324,48 @@ Tree.prototype.markWillUpdateNode = function (node) {
   this.willUpdateNodesById[node.id] = node;
 };
 Tree.prototype.onSwitcherClick = function (target) {
+  const hasUndefinedchild = target.parentNode.querySelectorAll(".treejs-switcher").length > 0 && target.parentNode.querySelectorAll('ul').length == 0;
+  //CUSTOM
+  const childspans = Array.prototype.slice.call(target.parentNode.querySelectorAll('ul > li > span.treejs-label')).filter((ele) => {
+    return ele.parentNode.parentNode.parentNode === target.parentNode;
+  });
+  let undefinedChildren = [];
+  //This may be a problem the day a node value is "undefined"
+  undefinedChildren = childspans.filter(ele => {
+    return ele.textContent === 'undefined';
+  });
+  // If the user clicked on an unloaded node
+  if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher') && (undefinedChildren.length > 0 || hasUndefinedchild)) {
+    // Clear the subnode HTML
+    if (undefinedChildren.length > 0) {
+      target.parentNode.querySelector('ul').innerHTML = '';
+    }
+    // If source is webservice (it shouldn't be something else)
+    if (this.options.parentApi.theOptions.source == 'webservice') {
+      if (this.options.parentApi.theOptions.origin == 'classification') {
+        const contextualApiParams = this.options.parentApi.getContextualApiParams(Object.assign(Object.assign({}, this.options.parentApi.theOptions.options), { startNode: target.parentNode.nodeId }));
+        const contextualApiURL = this.options.parentApi.getContextualApiURL();
+        // WS Call
+        this.options.rawDataManager
+          .getFromClassification(contextualApiURL, contextualApiParams, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
+          .then(data => {
+          this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
+        });
+      }
+      else {
+        // WS Call
+        this.options.rawDataManager
+          .getFromSource(this.options.parentApi.theOptions.url, {
+          StartNodeID: target.parentNode.nodeId,
+          lng: this.options.parentApi.theOptions.options.lng,
+          IsDeprecated: this.options.parentApi.theOptions.options.IsDeprecated,
+        }, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
+          .then(data => {
+          this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
+        });
+      }
+    }
+  }
   const liEle = target.parentNode;
   const ele = liEle.lastChild;
   const height = ele.scrollHeight;
@@ -404,6 +403,9 @@ Tree.prototype.onSwitcherClick = function (target) {
       },
     });
   }
+  return new Promise((resolve) => {
+    resolve(this);
+  });
 };
 Tree.prototype.walkUp = function (node, changeState) {
   const { parent } = node;

package/dist/collection/features/keyboard-navigation/keyboard-navigation.js

@@ -1,25 +1,47 @@
 import { focusMainInput } from "../events/focus-handlers";
+let focusedNodeIndex = 0;
 export function setupKeyboardNavigation(component, navigateInTree) {
   const treeArea = component.el.querySelector('.hierarchized-picker-tree-area');
   if (!treeArea)
     return;
-  let focusedNodeIndex = 0;
   function focusNode(allLiElements, liElementToFocus) {
     Object.values(allLiElements).forEach((liNode) => {
       liNode.classList.remove('treejs-node__focused');
     });
     liElementToFocus.classList.add('treejs-node__focused');
   }
+  function findAllTreeNodes(treeNodes, liElementsById) {
+    let allNodes = [];
+    const traverse = (nodes) => {
+      nodes.forEach(node => {
+        allNodes.push(node);
+        if (node.children && node.children.length > 0 && !liElementsById[node.id].classList.contains("treejs-node__close")) {
+          traverse(node.children);
+        }
+      });
+    };
+    traverse(treeNodes);
+    return allNodes;
+  }
+  focusedNodeIndex = 0;
+  if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes) {
+    focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]);
+  }
+  if (component.el._hasKeydownListener) {
+    return;
+  }
+  component.el._hasKeydownListener = true;
   component.el.addEventListener('keydown', (event) => {
     var _a, _b;
     event.stopPropagation();
     const tree = component.loadedTreeJs;
-    const treeNodesFromTree = tree.treeNodes;
+    let treeNodesFromTree = findAllTreeNodes(tree.treeNodes, tree.liElementsById);
     if (!tree || !treeNodesFromTree.length)
       return;
-    const spaceNode = treeNodesFromTree[focusedNodeIndex];
-    const activeNode = treeNodesFromTree[focusedNodeIndex];
-    const liElement = tree.liElementsById[activeNode.id];
+    let spaceNode = treeNodesFromTree[focusedNodeIndex];
+    let activeNode = treeNodesFromTree[focusedNodeIndex];
+    let liElement = tree.liElementsById[activeNode.id];
+    const handledEvents = ['tab', '0', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'];
     switch (event.key) {
       case 'Tab':
       case '0':
@@ -35,6 +57,7 @@ export function setupKeyboardNavigation(component, navigateInTree) {
         focusedNodeIndex = Math.max(focusedNodeIndex - 1, 0);
         const newActiveNodeUp = treeNodesFromTree[focusedNodeIndex];
         const newLiElementUp = tree.liElementsById[newActiveNodeUp.id];
+        newLiElementUp.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         focusNode(tree.liElementsById, newLiElementUp);
         break;
       case 'ArrowDown':
@@ -43,13 +66,13 @@ export function setupKeyboardNavigation(component, navigateInTree) {
         const newActiveNodeDown = treeNodesFromTree[focusedNodeIndex];
         const newLiElementDown = tree.liElementsById[newActiveNodeDown.id];
         focusNode(tree.liElementsById, newLiElementDown);
+        newLiElementDown.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         break;
       case 'ArrowLeft':
         event.preventDefault();
         const leftSwitcher = liElement.querySelector('.treejs-switcher');
         if (leftSwitcher) {
           (_a = component.loadedTreeJs) === null || _a === void 0 ? void 0 : _a.onSwitcherClick(leftSwitcher);
-          component.showTree('hide');
         }
         break;
       case 'ArrowRight':
@@ -60,8 +83,7 @@ export function setupKeyboardNavigation(component, navigateInTree) {
         }
         break;
     }
-    navigateInTree.emit(event.key);
+    if (handledEvents.includes(event.key.toLowerCase()))
+      navigateInTree.emit(event);
   });
-  if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes)
-    setTimeout(() => focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]), 100);
 }