reneco-hierarchized-picker 0.4.3-beta.20 → 0.4.3-beta.22

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

@@ -328,7 +328,6 @@ Tree.prototype.bindEvent = function (ele) {
 };
 Tree.prototype.onItemClick = async function (id, rightclick = false) {
   // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
-  console.log("coucou");
   if (this.options.parentApi.isDisabled && this.options.parentApi.optionsManager.getOptions().mode != "tree")
     return;
   const pickerValue = await this.options.parentApi.getValue();
@@ -18623,36 +18622,31 @@ function setupKeyboardNavigation(component, optionsManager, navigateInTree) {
   if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes) {
     focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]);
   }
-  //todo, put back ?
-  // if ((component.el as any)._hasKeydownListener) {
-  //   return;
-  // }
-  component.el._hasKeydownListener = true;
   if (!component._keydownListenerAdded) {
     component._keydownListenerAdded = true;
     component.el.addEventListener('keydown', (event) => {
       var _a, _b;
-      console.log("Navigation 01", event);
       event.stopPropagation();
-      console.log("Navigation 02");
       const tree = component.loadedTreeJs;
       let treeNodesFromTree = findAllTreeNodes(tree.treeNodes, tree.liElementsById);
-      console.log("Navigation 03");
       if (!tree || !treeNodesFromTree.length)
         return;
       let spaceNode = treeNodesFromTree[focusedNodeIndex];
       let activeNode = treeNodesFromTree[focusedNodeIndex];
       let liElement = tree.liElementsById[activeNode.id];
       const handledEvents = ['tab', '0', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'];
-      console.log("Navigation 04", event.key);
       switch (event.key.toLowerCase()) {
         case 'tab':
         case '0':
           event.preventDefault();
           { //(spaceNode?.nodeId) {
             component.setNodeAsSelected(spaceNode.nodeId, component.loadedTreeJs, true);
-            component.showTree('hide');
-            setTimeout(() => focusMainInput(), 100);
+            if (optionsManager.getOptions().mode != "tree" && !optionsManager.getOptions().multiple) {
+              setTimeout(() => {
+                component.showTree('hide');
+                // TODO put back? >> focusMainInput(component);
+              }, 100);
+            }
           }
           break;
         case 'arrowup':
@@ -18692,10 +18686,6 @@ function setupKeyboardNavigation(component, optionsManager, navigateInTree) {
   }
 }
 
-// Utility functions
-function isInsidePicker(component, target) {
-  return target !== null && component.el.contains(target);
-}
 // Focus management
 async function focusSearchInput(component) {
   const searchInput = component.el.querySelector('search-input input');
@@ -18747,7 +18737,7 @@ function focusInSearchEvent(component) {
 function focusOutSearchEvent(component, event) {
 }
 
-const hierarchizedPickerCss = "reneco-hierarchized-picker .hierarchized-picker-raw-tree-area{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker div:focus{outline:none}reneco-hierarchized-picker .loader{color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black)) !important;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:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-light, #FAFAFA))) !important;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);color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black))}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 hierarchizedPickerCss = "reneco-hierarchized-picker .hierarchized-picker-raw-tree-area{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader{color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black)) !important;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:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-light, #FAFAFA))) !important;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);color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black))}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 {
   /**
@@ -18836,15 +18826,39 @@ const HierarchizedPickerComponent = class {
       const val1 = obj1[key];
       const val2 = obj2[key];
       if (Array.isArray(val1) && Array.isArray(val2)) {
-        if (val1.length !== val2.length || val1.some((v, i) => v !== val2[i])) {
+        // Compare array length
+        if (val1.length !== val2.length) {
           diffs.push(fullKey);
+          continue;
+        }
+        // Compare each element deeply
+        for (let i = 0; i < val1.length; i++) {
+          const v1 = val1[i];
+          const v2 = val2[i];
+          if (typeof v1 === 'object' &&
+            v1 !== null &&
+            typeof v2 === 'object' &&
+            v2 !== null) {
+            const subDiffs = this.diffKeys(v1, v2, `${fullKey}[${i}]`);
+            if (subDiffs.length > 0) {
+              diffs.push(fullKey);
+              break; // stop at first mismatch in array
+            }
+          }
+          else if (v1 !== v2) {
+            diffs.push(fullKey);
+            break;
+          }
         }
       }
       else if (val1 &&
         val2 &&
         typeof val1 === 'object' &&
         typeof val2 === 'object') {
-        diffs.push(...this.diffKeys(val1, val2, fullKey));
+        // Recursive deep object comparison
+        const subDiffs = this.diffKeys(val1, val2, fullKey);
+        if (subDiffs.length > 0)
+          diffs.push(...subDiffs);
       }
       else if (val1 !== val2) {
         diffs.push(fullKey);
@@ -18897,18 +18911,17 @@ const HierarchizedPickerComponent = class {
     if (oldValue && JSON.stringify(newValue.options) != JSON.stringify(oldValue.options)) {
       this.value = [];
     }
-    console.log("Setnewoptions 01", newValue, oldValue);
     if ((newValue === null || newValue === void 0 ? void 0 : newValue.loading) == 'display' || (newValue && !newValue.loading)) {
       if ((oldValue && this.isChangeInOptions(newValue, oldValue)) || !oldValue) {
         if (!oldValue) {
           oldValue = savedOldValue;
         }
-        console.log("Setnewoptions 02");
         const propDiffs = this.diffKeys(oldValue, this.optionsManager.initializeOptions(newValue));
         const noReloadProps = ["multiple"];
-        console.log("Setnewoptions 03", propDiffs);
-        if (propDiffs.length == 1 && propDiffs.some(item => noReloadProps.includes(item))) {
-          const propChanged = propDiffs[0];
+        const ignoredProps = ["token"];
+        const filteredDiffs = propDiffs.filter(prop => !ignoredProps.includes(prop));
+        if (filteredDiffs.length == 1 && filteredDiffs.some(item => noReloadProps.includes(item))) {
+          const propChanged = filteredDiffs[0];
           switch (propChanged) {
             case "multiple":
               document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-checkbox').forEach((item) => (item.style.display = (this.theOptions.multiple ? 'inline-block' : 'none')));
@@ -19229,8 +19242,9 @@ const HierarchizedPickerComponent = class {
       console.timeEnd = function () { };
     }
     // Setup component unique ID
-    if (this.optionsManager.getOptions().id)
+    if (this.optionsManager.getOptions().id) {
       this.componentID = this.optionsManager.getOptions().id;
+    }
     else if (!this.componentID) {
       let componentID = (Array.from(document.querySelectorAll('reneco-hierarchized-picker')).indexOf(this.el) + 1);
       while (document.querySelectorAll(`#hierarchized-picker-${componentID}`).length > 0) {
@@ -19573,7 +19587,6 @@ const HierarchizedPickerComponent = class {
     this.itemContextMenuItemClick.emit(e);
   }
   setNodeAsSelected(id, treeToUpdate, userClick) {
-    console.log("setNodeAsSelected", id);
     // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
     if (((this.isDisabled && this.optionsManager.getOptions().mode != "tree") && this.shownTree && this.setValueOnClick) ||
       (this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
@@ -19650,7 +19663,7 @@ const HierarchizedPickerComponent = class {
     clearAutocomplete();
     if (!this.canload || !this.optionsManager.getOptions().displayTree)
       return;
-    const isStillInsidePicker = isInsidePicker(this, document.activeElement);
+    const isStillInsidePicker = false; // TODO put back? >> isInsidePicker(this, document.activeElement);
     if ((focused === 'hide' || this.isDisabled) && !isStillInsidePicker) {
       this.hasFocus = ['hide'];
       const elem = document.querySelector('#hierarchized-picker-' + this.componentID + ' input.hierarchized-picker-search');
@@ -19833,7 +19846,6 @@ const HierarchizedPickerComponent = class {
     this.translateDataForTree(this.rawDataManager.getData());
   }
   checkFields(values, allowSetValueOnClick = true) {
-    console.log("checkFields", values);
     if (!this.loadedTreeJs)
       return;
     this.setValueOnClick = allowSetValueOnClick;
@@ -19963,7 +19975,7 @@ const HierarchizedPickerComponent = class {
         clickPickerModalArea(this);
       } }, index.h("div", { class: "loader", ref: el => {
         this.loader = el;
-      } }, index.h("div", { class: "loader-inner" }, "Loading...")), index.h("div", { class: `hierarchized-picker-modal ${!this.ready ? 'hidden' : ''}`, tabindex: "" + this.componentID }, index.h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), index.h("ul", { id: "autocomplete-results-area" }), index.h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (index.h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), tabindex: "" + this.componentID, onClick: event => {
+      } }, index.h("div", { class: "loader-inner" }, "Loading...")), index.h("div", { class: `hierarchized-picker-modal ${!this.ready ? 'hidden' : ''}`, tabindex: "0" }, index.h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), index.h("ul", { id: "autocomplete-results-area" }), index.h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (index.h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), tabindex: "0", onClick: event => {
         clickPickerModalArea(this);
       } }, index.h("div", { class: "loader", ref: el => {
         this.loader = el;

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

@@ -3,9 +3,9 @@ reneco-hierarchized-picker .hierarchized-picker-raw-tree-area {
   box-sizing: border-box;
 }
 
-reneco-hierarchized-picker div:focus {
+/* reneco-hierarchized-picker div:focus {
   outline: none;
-}
+} */
 
 reneco-hierarchized-picker .loader {
   color: var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black)) !important;

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

@@ -9,7 +9,7 @@ import { RawDataManager } from '../../core/raw-data-manager';
 import { OptionsManager } from '../../core/options-manager';
 import { fillTreeWithObject, completeCurrentTreeWithTree, getPropertyFromNode } from '../../features/tree/tree-utils';
 import { displayAutocompleteWithResults, clearAutocomplete } from '../../features/autocomplete/autocomplete';
-import { focusSearchInput, focusMainInput, focusInSearchEvent, focusOutSearchEvent, clickPickerModalArea, isInsidePicker } from '../../features/events/focus-handlers';
+import { focusSearchInput, focusMainInput, focusInSearchEvent, focusOutSearchEvent, clickPickerModalArea } from '../../features/events/focus-handlers';
 import { setupKeyboardNavigation } from '../../features/keyboard-navigation/keyboard-navigation';
 export class HierarchizedPickerComponent {
   /**
@@ -98,15 +98,39 @@ export class HierarchizedPickerComponent {
       const val1 = obj1[key];
       const val2 = obj2[key];
       if (Array.isArray(val1) && Array.isArray(val2)) {
-        if (val1.length !== val2.length || val1.some((v, i) => v !== val2[i])) {
+        // Compare array length
+        if (val1.length !== val2.length) {
           diffs.push(fullKey);
+          continue;
+        }
+        // Compare each element deeply
+        for (let i = 0; i < val1.length; i++) {
+          const v1 = val1[i];
+          const v2 = val2[i];
+          if (typeof v1 === 'object' &&
+            v1 !== null &&
+            typeof v2 === 'object' &&
+            v2 !== null) {
+            const subDiffs = this.diffKeys(v1, v2, `${fullKey}[${i}]`);
+            if (subDiffs.length > 0) {
+              diffs.push(fullKey);
+              break; // stop at first mismatch in array
+            }
+          }
+          else if (v1 !== v2) {
+            diffs.push(fullKey);
+            break;
+          }
         }
       }
       else if (val1 &&
         val2 &&
         typeof val1 === 'object' &&
         typeof val2 === 'object') {
-        diffs.push(...this.diffKeys(val1, val2, fullKey));
+        // Recursive deep object comparison
+        const subDiffs = this.diffKeys(val1, val2, fullKey);
+        if (subDiffs.length > 0)
+          diffs.push(...subDiffs);
       }
       else if (val1 !== val2) {
         diffs.push(fullKey);
@@ -159,18 +183,17 @@ export class HierarchizedPickerComponent {
     if (oldValue && JSON.stringify(newValue.options) != JSON.stringify(oldValue.options)) {
       this.value = [];
     }
-    console.log("Setnewoptions 01", newValue, oldValue);
     if ((newValue === null || newValue === void 0 ? void 0 : newValue.loading) == 'display' || (newValue && !newValue.loading)) {
       if ((oldValue && this.isChangeInOptions(newValue, oldValue)) || !oldValue) {
         if (!oldValue) {
           oldValue = savedOldValue;
         }
-        console.log("Setnewoptions 02");
         const propDiffs = this.diffKeys(oldValue, this.optionsManager.initializeOptions(newValue));
         const noReloadProps = ["multiple"];
-        console.log("Setnewoptions 03", propDiffs);
-        if (propDiffs.length == 1 && propDiffs.some(item => noReloadProps.includes(item))) {
-          const propChanged = propDiffs[0];
+        const ignoredProps = ["token"];
+        const filteredDiffs = propDiffs.filter(prop => !ignoredProps.includes(prop));
+        if (filteredDiffs.length == 1 && filteredDiffs.some(item => noReloadProps.includes(item))) {
+          const propChanged = filteredDiffs[0];
           switch (propChanged) {
             case "multiple":
               document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-checkbox').forEach((item) => (item.style.display = (this.theOptions.multiple ? 'inline-block' : 'none')));
@@ -487,8 +510,9 @@ export class HierarchizedPickerComponent {
       this.mylog('----- HIERARCHIZED-PICKER DEBUG MODE ON -----');
     }
     // Setup component unique ID
-    if (this.optionsManager.getOptions().id)
+    if (this.optionsManager.getOptions().id) {
       this.componentID = this.optionsManager.getOptions().id;
+    }
     else if (!this.componentID) {
       let componentID = (Array.from(document.querySelectorAll('reneco-hierarchized-picker')).indexOf(this.el) + 1);
       while (document.querySelectorAll(`#hierarchized-picker-${componentID}`).length > 0) {
@@ -831,7 +855,6 @@ export class HierarchizedPickerComponent {
     this.itemContextMenuItemClick.emit(e);
   }
   setNodeAsSelected(id, treeToUpdate, userClick) {
-    console.log("setNodeAsSelected", id);
     // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
     if (((this.isDisabled && this.optionsManager.getOptions().mode != "tree") && this.shownTree && this.setValueOnClick) ||
       (this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
@@ -908,7 +931,7 @@ export class HierarchizedPickerComponent {
     clearAutocomplete();
     if (!this.canload || !this.optionsManager.getOptions().displayTree)
       return;
-    const isStillInsidePicker = isInsidePicker(this, document.activeElement);
+    const isStillInsidePicker = false; // TODO put back? >> isInsidePicker(this, document.activeElement);
     if ((focused === 'hide' || this.isDisabled) && !isStillInsidePicker) {
       this.hasFocus = ['hide'];
       const elem = document.querySelector('#hierarchized-picker-' + this.componentID + ' input.hierarchized-picker-search');
@@ -1091,7 +1114,6 @@ export class HierarchizedPickerComponent {
     this.translateDataForTree(this.rawDataManager.getData());
   }
   checkFields(values, allowSetValueOnClick = true) {
-    console.log("checkFields", values);
     if (!this.loadedTreeJs)
       return;
     this.setValueOnClick = allowSetValueOnClick;
@@ -1221,7 +1243,7 @@ export class HierarchizedPickerComponent {
         clickPickerModalArea(this, event);
       } }, h("div", { class: "loader", ref: el => {
         this.loader = el;
-      } }, h("div", { class: "loader-inner" }, "Loading...")), h("div", { class: `hierarchized-picker-modal ${!this.ready ? 'hidden' : ''}`, tabindex: "" + this.componentID }, h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), h("ul", { id: "autocomplete-results-area" }), h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), tabindex: "" + this.componentID, onClick: event => {
+      } }, h("div", { class: "loader-inner" }, "Loading...")), h("div", { class: `hierarchized-picker-modal ${!this.ready ? 'hidden' : ''}`, tabindex: "0" }, h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), h("ul", { id: "autocomplete-results-area" }), h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), tabindex: "0", onClick: event => {
         clickPickerModalArea(this, event);
       } }, h("div", { class: "loader", ref: el => {
         this.loader = el;

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

@@ -192,7 +192,6 @@ Tree.prototype.bindEvent = function (ele) {
 };
 Tree.prototype.onItemClick = async function (id, rightclick = false) {
   // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
-  console.log("coucou");
   if (this.options.parentApi.isDisabled && this.options.parentApi.optionsManager.getOptions().mode != "tree")
     return;
   const pickerValue = await this.options.parentApi.getValue();

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

@@ -1,4 +1,3 @@
-import { focusMainInput } from "../events/focus-handlers";
 let focusedNodeIndex = 0;
 export function setupKeyboardNavigation(component, optionsManager, navigateInTree) {
   if (!optionsManager.getOptions().keyboardNavigation)
@@ -29,36 +28,31 @@ export function setupKeyboardNavigation(component, optionsManager, navigateInTre
   if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes) {
     focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]);
   }
-  //todo, put back ?
-  // if ((component.el as any)._hasKeydownListener) {
-  //   return;
-  // }
-  component.el._hasKeydownListener = true;
   if (!component._keydownListenerAdded) {
     component._keydownListenerAdded = true;
     component.el.addEventListener('keydown', (event) => {
       var _a, _b;
-      console.log("Navigation 01", event);
       event.stopPropagation();
-      console.log("Navigation 02");
       const tree = component.loadedTreeJs;
       let treeNodesFromTree = findAllTreeNodes(tree.treeNodes, tree.liElementsById);
-      console.log("Navigation 03");
       if (!tree || !treeNodesFromTree.length)
         return;
       let spaceNode = treeNodesFromTree[focusedNodeIndex];
       let activeNode = treeNodesFromTree[focusedNodeIndex];
       let liElement = tree.liElementsById[activeNode.id];
       const handledEvents = ['tab', '0', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'];
-      console.log("Navigation 04", event.key);
       switch (event.key.toLowerCase()) {
         case 'tab':
         case '0':
           event.preventDefault();
           if (true) { //(spaceNode?.nodeId) {
             component.setNodeAsSelected(spaceNode.nodeId, component.loadedTreeJs, true);
-            component.showTree('hide');
-            setTimeout(() => focusMainInput(component), 100);
+            if (optionsManager.getOptions().mode != "tree" && !optionsManager.getOptions().multiple) {
+              setTimeout(() => {
+                component.showTree('hide');
+                // TODO put back? >> focusMainInput(component);
+              }, 100);
+            }
           }
           break;
         case 'arrowup':