tree-element 0.1.1 → 0.3.0

package/lib/index.js

@@ -1,5 +1,5 @@
 /*
-Html-tree 0.1.1
+Tree-element 0.3.0
 
 Copyright 2026 Marco Braak
 
@@ -41,11 +41,10 @@ import version from './version.js';
 // as its global, instead of an object of named exports.
 
 class TreeElement {
-  /** @hidden */
-  tree;
   _classNames;
   _dataLoader;
   _dndHandler;
+  _fallbackTabStop;
   _htmlElement;
   _isInitialized;
   _keyHandler;
@@ -56,9 +55,12 @@ class TreeElement {
   _saveStateHandler;
   _scrollHandler;
   _selectNodeHandler;
+  _tree;
   _triggerEventProvider;
 
-  /** @hidden */
+  /**
+  @hidden
+  */
   constructor({
     htmlElement,
     overrideTriggerEventProvider,
@@ -69,9 +71,12 @@ class TreeElement {
     this._classNames = createClassNames(this._options);
     this._triggerEventProvider = overrideTriggerEventProvider ?? triggerCustomEvent;
     this._isInitialized = false;
-    this.tree = new Node({}, true);
+    this._tree = new Node({}, true);
     this._nodeMap = new WeakMap();
-    const {
+    this._fallbackTabStop = null;
+    let {
+      ariaLabel,
+      ariaLabelledBy,
       autoEscape,
       buttonLeft,
       closedIcon,
@@ -94,125 +99,131 @@ class TreeElement {
       slide,
       tabIndex
     } = this._options;
-    const classNames = this._classNames;
-    const closeNode = this.closeNode.bind(this);
-    const getNodeElement = this._getNodeElement.bind(this);
-    const getNodeElementForNode = this._getNodeElementForNode.bind(this);
-    const getNodeById = this.getNodeById.bind(this);
-    const getSelectedNode = this.getSelectedNode.bind(this);
-    const getTree = this.getTree.bind(this);
-    const isFocusOnTree = this._isFocusOnTree.bind(this);
-    const loadData = this.loadData.bind(this);
-    const openNode = this.openNode.bind(this);
-    const openParents = this._openParents.bind(this);
-    const refreshElements = this._refreshElements.bind(this);
-    const refreshHitAreas = this.refreshHitAreas.bind(this);
-    const setNodeElement = this._setNodeElement.bind(this);
-    const treeElement = this._htmlElement;
-    const triggerEvent = this._triggerEvent.bind(this);
-    const saveState = () => {
-      saveStateHandler.saveState();
+    let classNames = this._classNames;
+    let closeNode = this.closeNode.bind(this);
+    let getNodeElement = this._getNodeElement.bind(this);
+    let getNodeElementForNode = this._getNodeElementForNode.bind(this);
+    let getFocusedNode = this._getFocusedNode.bind(this);
+    let getNodeById = this.getNodeById.bind(this);
+    let getSelectedNode = this.getSelectedNode.bind(this);
+    let getTree = this.getTree.bind(this);
+    let loadData = this.loadData.bind(this);
+    let openNode = this.openNode.bind(this);
+    let openParents = this._openParents.bind(this);
+    let refreshElements = this._refreshElements.bind(this);
+    let refreshHitAreas = this.refreshHitAreas.bind(this);
+    let setNodeElement = this._setNodeElement.bind(this);
+    let treeElement = this._htmlElement;
+    let triggerEvent = this._triggerEvent.bind(this);
+    let updateTabStop = this._updateTabStop.bind(this);
+    let saveState = () => {
+      saveStateHandler._saveState();
     };
-    const selectNodeHandler = new SelectNodeHandler({
-      getNodeById,
-      getNodeElementForNode,
-      getOnCanSelectNode: () => this._options.onCanSelectNode,
-      getSelectable: () => this._options.selectable,
-      openParents,
-      saveState,
-      triggerEvent
+    let selectNodeHandler = new SelectNodeHandler({
+      _getNodeById: getNodeById,
+      _getNodeElementForNode: getNodeElementForNode,
+      _getOnCanSelectNode: () => this._options.onCanSelectNode,
+      _getSelectable: () => this._options.selectable,
+      _openParents: openParents,
+      _saveState: saveState,
+      _triggerEvent: triggerEvent,
+      _updateTabStop: updateTabStop
     });
-    const addToSelection = selectNodeHandler.addToSelection.bind(selectNodeHandler);
-    const getSelectedNodes = selectNodeHandler.getSelectedNodes.bind(selectNodeHandler);
-    const isNodeSelected = selectNodeHandler.isNodeSelected.bind(selectNodeHandler);
-    const removeFromSelection = selectNodeHandler.removeFromSelection.bind(selectNodeHandler);
-    const selectNode = selectNodeHandler.selectSingleNode.bind(selectNodeHandler);
-    const getMouseDelay = () => this._options.startDndDelay ?? 0;
-    const dataLoader = new DataLoader({
-      classNames,
-      dataFilter,
-      loadData,
-      treeElement,
-      triggerEvent
+    let addToSelection = selectNodeHandler._addToSelection.bind(selectNodeHandler);
+    let getSelectedNodes = selectNodeHandler._getSelectedNodes.bind(selectNodeHandler);
+    let isNodeSelected = selectNodeHandler._isNodeSelected.bind(selectNodeHandler);
+    let removeFromSelection = selectNodeHandler._removeFromSelection.bind(selectNodeHandler);
+    let selectNode = selectNodeHandler._selectSingleNode.bind(selectNodeHandler);
+    let getMouseDelay = () => this._options.startDndDelay ?? 0;
+    let dataLoader = new DataLoader({
+      _classNames: classNames,
+      _dataFilter: dataFilter,
+      _loadData: loadData,
+      _treeElement: treeElement,
+      _triggerEvent: triggerEvent
     });
-    const saveStateHandler = new SaveStateHandler({
-      addToSelection,
-      getNodeById,
-      getSelectedNodes,
-      getTree,
-      onGetStateFromStorage,
-      onSetStateFromStorage,
-      openNode,
-      refreshElements,
-      removeFromSelection,
-      saveState: saveStateOption
+    let saveStateHandler = new SaveStateHandler({
+      _addToSelection: addToSelection,
+      _getNodeById: getNodeById,
+      _getSelectedNodes: getSelectedNodes,
+      _getTree: getTree,
+      _onGetStateFromStorage: onGetStateFromStorage,
+      _onSetStateFromStorage: onSetStateFromStorage,
+      _openNode: openNode,
+      _refreshElements: refreshElements,
+      _removeFromSelection: removeFromSelection,
+      _saveState: saveStateOption
     });
-    const scrollHandler = new ScrollHandler({
-      refreshHitAreas,
-      treeElement
+    let scrollHandler = new ScrollHandler({
+      _refreshHitAreas: refreshHitAreas,
+      _treeElement: treeElement
     });
-    const getScrollLeft = scrollHandler.getScrollLeft.bind(scrollHandler);
-    const dndHandler = new DragAndDropHandler({
-      autoEscape,
-      classNames,
-      getNodeElement,
-      getNodeElementForNode,
-      getScrollLeft,
-      getTree,
-      onCanMove,
-      onCanMoveTo,
-      onDragMove,
-      onDragStop,
-      onIsMoveHandle,
-      openFolderDelay,
-      openNode,
-      refreshElements,
-      slide,
-      treeElement,
-      triggerEvent
+    let getScrollLeft = scrollHandler._getScrollLeft.bind(scrollHandler);
+    let dndHandler = new DragAndDropHandler({
+      _autoEscape: autoEscape,
+      _classNames: classNames,
+      _getNodeElement: getNodeElement,
+      _getNodeElementForNode: getNodeElementForNode,
+      _getScrollLeft: getScrollLeft,
+      _getTree: getTree,
+      _onCanMove: onCanMove,
+      _onCanMoveTo: onCanMoveTo,
+      _onDragMove: onDragMove,
+      _onDragStop: onDragStop,
+      _onIsMoveHandle: onIsMoveHandle,
+      _openFolderDelay: openFolderDelay,
+      _openNode: openNode,
+      _refreshElements: refreshElements,
+      _slide: slide,
+      _treeElement: treeElement,
+      _triggerEvent: triggerEvent
     });
-    const keyHandler = new KeyHandler({
-      closeNode,
-      getSelectedNode,
-      isFocusOnTree,
-      keyboardSupport,
-      openNode,
-      selectNode
+    let keyHandler = new KeyHandler({
+      _closeNode: closeNode,
+      _getFocusedNode: getFocusedNode,
+      _getSelectedNode: getSelectedNode,
+      _getTree: getTree,
+      _keyboardSupport: keyboardSupport,
+      _openNode: openNode,
+      _selectNode: selectNode,
+      _triggerEvent: triggerEvent
     });
-    const renderer = new ElementsRenderer({
-      autoEscape,
-      buttonLeft,
-      classNames,
-      closedIcon,
-      dragAndDrop,
-      getTree,
-      htmlElement: treeElement,
-      isNodeSelected,
-      onCreateLi,
-      openedIcon,
-      rtl,
-      setNodeElement,
-      showEmptyFolder,
-      tabIndex
+    let renderer = new ElementsRenderer({
+      _ariaLabel: ariaLabel,
+      _ariaLabelledBy: ariaLabelledBy,
+      _autoEscape: autoEscape,
+      _buttonLeft: buttonLeft,
+      _classNames: classNames,
+      _closedIcon: closedIcon,
+      _dragAndDrop: dragAndDrop,
+      _getTree: getTree,
+      _htmlElement: treeElement,
+      _isNodeSelected: isNodeSelected,
+      _onCreateLi: onCreateLi,
+      _openedIcon: openedIcon,
+      _rtl: rtl,
+      _setNodeElement: setNodeElement,
+      _showEmptyFolder: showEmptyFolder,
+      _tabIndex: tabIndex
     });
-    const getNode = this.getNode.bind(this);
-    const onMouseCapture = this._mouseCapture.bind(this);
-    const onMouseDrag = this._mouseDrag.bind(this);
-    const onMouseStart = this._mouseStart.bind(this);
-    const onMouseStop = this._mouseStop.bind(this);
-    const mouseHandler = new MouseHandler({
-      classNames,
-      element: treeElement,
-      getMouseDelay,
-      getNode,
-      onClickButton: this.toggle.bind(this),
-      onClickTitle: selectNode,
-      onMouseCapture,
-      onMouseDrag,
-      onMouseStart,
-      onMouseStop,
-      triggerEvent,
-      useContextMenu: this._options.useContextMenu
+    let getNode = this.getNode.bind(this);
+    let onMouseCapture = this._mouseCapture.bind(this);
+    let onMouseDrag = this._mouseDrag.bind(this);
+    let onMouseStart = this._mouseStart.bind(this);
+    let onMouseStop = this._mouseStop.bind(this);
+    let mouseHandler = new MouseHandler({
+      _classNames: classNames,
+      _element: treeElement,
+      _getMouseDelay: getMouseDelay,
+      _getNode: getNode,
+      _onClickButton: this.toggle.bind(this),
+      _onClickTitle: selectNode,
+      _onMouseCapture: onMouseCapture,
+      _onMouseDrag: onMouseDrag,
+      _onMouseStart: onMouseStart,
+      _onMouseStop: onMouseStop,
+      _triggerEvent: triggerEvent,
+      _useContextMenu: this._options.useContextMenu
     });
     this._dataLoader = dataLoader;
     this._dndHandler = dndHandler;
@@ -232,7 +243,7 @@ class TreeElement {
    * @group Changing the tree
    */
   addNodeAfter(nodeData, existingNode) {
-    const newNode = existingNode.addAfter(nodeData);
+    let newNode = existingNode.addAfter(nodeData);
     if (newNode) {
       this._refreshElements(existingNode.parent);
     }
@@ -246,7 +257,7 @@ class TreeElement {
    * @group Changing the tree
    */
   addNodeBefore(nodeData, existingNode) {
-    const newNode = existingNode.addBefore(nodeData);
+    let newNode = existingNode.addBefore(nodeData);
     if (newNode) {
       this._refreshElements(existingNode.parent);
     }
@@ -261,7 +272,7 @@ class TreeElement {
    * @group Changing the tree
    */
   addParentNode(nodeData, existingNode) {
-    const newNode = existingNode.addParent(nodeData);
+    let newNode = existingNode.addParent(nodeData);
     if (newNode) {
       this._refreshElements(newNode.parent);
     }
@@ -274,10 +285,11 @@ class TreeElement {
    * @param mustSetFocus - Move the focus to the node. Default `true`.
    * @group Selection
    */
-  addToSelection(node, mustSetFocus) {
-    this._selectNodeHandler.addToSelection(node);
+  addToSelection(node, mustSetFocus = true) {
+    this._selectNodeHandler._addToSelection(node);
     this._openParents(node);
-    this._getNodeElementForNode(node).select(mustSetFocus ?? true);
+    this._getNodeElementForNode(node)._select(mustSetFocus);
+    this._updateTabStop();
     this._saveState();
   }
 
@@ -293,22 +305,30 @@ class TreeElement {
    * @group Changing the tree
    */
   appendNode(nodeData, parentNode) {
-    const node = parentNode.append(nodeData);
+    let node = parentNode.append(nodeData);
     this._refreshElements(parentNode);
     return node;
   }
 
   /**
-   * Closes a folder.
+   * Closes a folder. Await the promise when you need to know the closing
+   * animation has finished.
+   *
+   * @example
+   * ```js
+   * await tree.closeNode(node);
+   * console.log("closed");
+   * ```
    *
    * @param slide - Override the `slide` option for this call.
    * @group Opening and closing
    */
-  closeNode(node, slide) {
-    if (node.isFolder() || node.isEmptyFolder) {
-      this._createFolderElement(node).close(slide ?? this._options.slide, this._options.animationSpeed);
-      this._saveState();
+  async closeNode(node, slide) {
+    if (!(node.isFolder() || node.isEmptyFolder)) {
+      return;
     }
+    await this._createFolderElement(node)._close(slide ?? this._options.slide, this._options.animationSpeed);
+    this._saveState();
   }
 
   /**
@@ -318,11 +338,11 @@ class TreeElement {
    * @group Other
    */
   deinit() {
-    this._htmlElement.textContent = '';
-    this._dataLoader.deinit();
-    this._keyHandler.deinit();
-    this._mouseHandler.deinit();
-    this.tree = new Node({}, true);
+    this._htmlElement.textContent = "";
+    this._dataLoader._deinit();
+    this._keyHandler._deinit();
+    this._mouseHandler._deinit();
+    this._tree = new Node({}, true);
   }
 
   /**
@@ -331,12 +351,8 @@ class TreeElement {
    * @group Finding nodes
    */
   getNode(element) {
-    const liElement = element.closest(`li.${this._classNames.common}`);
-    if (liElement) {
-      return this._nodeMap.get(liElement) ?? null;
-    } else {
-      return null;
-    }
+    let liElement = element.closest(`li.${this._classNames.common}`);
+    return liElement ? this._nodeMap.get(liElement) ?? null : null;
   }
 
   /**
@@ -350,7 +366,7 @@ class TreeElement {
    * @group Finding nodes
    */
   getNodeByCallback(callback) {
-    return this.tree.getNodeByCallback(callback);
+    return this._tree.getNodeByCallback(callback);
   }
 
   /**
@@ -364,7 +380,7 @@ class TreeElement {
    * @group Finding nodes
    */
   getNodeById(id) {
-    return this.tree.getNodeById(id);
+    return this._tree.getNodeById(id);
   }
 
   /**
@@ -373,7 +389,7 @@ class TreeElement {
    * @group Finding nodes
    */
   getNodeByName(name) {
-    return this.tree.getNodeByName(name);
+    return this._tree.getNodeByName(name);
   }
 
   /**
@@ -383,7 +399,7 @@ class TreeElement {
    * @group Finding nodes
    */
   getNodeByNameMustExist(name) {
-    return this.tree.getNodeByNameMustExist(name);
+    return this._tree.getNodeByNameMustExist(name);
   }
 
   /**
@@ -397,16 +413,16 @@ class TreeElement {
    * @group Finding nodes
    */
   getNodesByProperty(key, value) {
-    return this.tree.getNodesByProperty(key, value);
+    return this._tree.getNodesByProperty(key, value);
   }
 
   /**
-   * Returns the selected node, or `false` when nothing is selected.
+   * Returns the selected node, or `null` when nothing is selected.
    *
    * @group Selection
    */
   getSelectedNode() {
-    return this._selectNodeHandler.getSelectedNode();
+    return this._selectNodeHandler._getSelectedNode();
   }
 
   /**
@@ -415,7 +431,7 @@ class TreeElement {
    * @group Selection
    */
   getSelectedNodes() {
-    return this._selectNodeHandler.getSelectedNodes();
+    return this._selectNodeHandler._getSelectedNodes();
   }
 
   /**
@@ -425,7 +441,7 @@ class TreeElement {
    * @group State
    */
   getState() {
-    return this._saveStateHandler.getState();
+    return this._saveStateHandler._getState();
   }
 
   /**
@@ -434,7 +450,7 @@ class TreeElement {
    * @group State
    */
   getStateFromStorage() {
-    return this._saveStateHandler.getStateFromStorage();
+    return this._saveStateHandler._getStateFromStorage();
   }
 
   /**
@@ -444,7 +460,7 @@ class TreeElement {
    * @group Finding nodes
    */
   getTree() {
-    return this.tree;
+    return this._tree;
   }
 
   /**
@@ -462,7 +478,7 @@ class TreeElement {
    * @group Other
    */
   isDragging() {
-    return this._dndHandler.isDragging;
+    return this._dndHandler._isDragging;
   }
 
   /**
@@ -471,7 +487,7 @@ class TreeElement {
    * @group Selection
    */
   isNodeSelected(node) {
-    return this._selectNodeHandler.isNodeSelected(node);
+    return this._selectNodeHandler._isNodeSelected(node);
   }
 
   /**
@@ -490,7 +506,7 @@ class TreeElement {
         this._initTree(data);
       }
       if (this.isDragging()) {
-        this._dndHandler.refresh();
+        this._dndHandler._refresh();
       }
     }
     this._triggerEvent("tree.set_data", {
@@ -506,9 +522,9 @@ class TreeElement {
    * @group Loading data
    */
   async loadDataFromUrl(url, parentNode) {
-    const requestUrl = url ? new RequestUrl(url) : this._createRequestUrl(parentNode);
+    let requestUrl = url ? new RequestUrl(url) : this._createRequestUrl(parentNode);
     if (requestUrl) {
-      await this._dataLoader.loadFromUrl(requestUrl, parentNode);
+      await this._dataLoader._loadFromUrl(requestUrl, parentNode);
     }
   }
 
@@ -518,10 +534,7 @@ class TreeElement {
    * @group Selection
    */
   moveDown() {
-    const selectedNode = this.getSelectedNode();
-    if (selectedNode) {
-      this._keyHandler.moveDown(selectedNode);
-    }
+    this._keyHandler._moveDown();
   }
 
   /**
@@ -536,7 +549,7 @@ class TreeElement {
    * @group Changing the tree
    */
   moveNode(node, targetNode, position) {
-    this.tree.moveNode(node, targetNode, position);
+    this._tree.moveNode(node, targetNode, position);
     this._refreshElements(null);
   }
 
@@ -546,10 +559,7 @@ class TreeElement {
    * @group Selection
    */
   moveUp() {
-    const selectedNode = this.getSelectedNode();
-    if (selectedNode) {
-      this._keyHandler.moveUp(selectedNode);
-    }
+    this._keyHandler._moveUp();
   }
 
   /**
@@ -567,13 +577,13 @@ class TreeElement {
    * @group Opening and closing
    */
   async openNode(node, slide) {
-    const mustSlide = slide ?? this._options.slide;
-    const doOpenNode = async (openedNode, slideOption) => {
+    let mustSlide = slide ?? this._options.slide;
+    let doOpenNode = async (openedNode, slideOption) => {
       if (!node.children.length) {
         return;
       }
-      const folderElement = this._createFolderElement(openedNode);
-      await folderElement.open(slideOption, this._options.animationSpeed);
+      let folderElement = this._createFolderElement(openedNode);
+      await folderElement._open(slideOption, this._options.animationSpeed);
     };
     if (node.isFolder() || node.isEmptyFolder) {
       if (node.load_on_demand) {
@@ -600,7 +610,7 @@ class TreeElement {
    * @group Changing the tree
    */
   prependNode(nodeData, parentNode) {
-    const node = parentNode.prepend(nodeData);
+    let node = parentNode.prepend(nodeData);
     this._refreshElements(parentNode);
     return node;
   }
@@ -622,7 +632,7 @@ class TreeElement {
    * @group Other
    */
   refreshHitAreas() {
-    this._dndHandler.refresh();
+    this._dndHandler._refresh();
   }
 
   /**
@@ -631,8 +641,9 @@ class TreeElement {
    * @group Selection
    */
   removeFromSelection(node) {
-    this._selectNodeHandler.removeFromSelection(node);
-    this._getNodeElementForNode(node).deselect();
+    this._selectNodeHandler._removeFromSelection(node);
+    this._getNodeElementForNode(node)._deselect();
+    this._updateTabStop();
     this._saveState();
   }
 
@@ -642,9 +653,9 @@ class TreeElement {
    * @group Changing the tree
    */
   removeNode(node) {
-    this._selectNodeHandler.removeFromSelection(node, true); // including children
+    this._selectNodeHandler._removeFromSelection(node, true); // including children
 
-    const parent = node.parent;
+    let parent = node.parent;
     node.remove();
     this._refreshElements(parent);
   }
@@ -658,8 +669,8 @@ class TreeElement {
     if (!node.element) {
       return;
     }
-    const top = getOffsetTop(node.element) - getOffsetTop(this._htmlElement);
-    this._scrollHandler.scrollToY(top);
+    let top = getOffsetTop(node.element) - getOffsetTop(this._htmlElement);
+    this._scrollHandler._scrollToY(top);
   }
 
   /**
@@ -675,10 +686,15 @@ class TreeElement {
     if (!node) {
       // Called with empty node -> deselect current node
       this._deselectCurrentNode();
-      this._saveStateHandler.saveState();
+      this._saveStateHandler._saveState();
       return;
     }
-    this._selectNodeHandler.selectSingleNode(node, options);
+
+    // Unlike a click, selecting the selected node again keeps it selected
+    this._selectNodeHandler._selectSingleNode(node, {
+      mustToggle: false,
+      ...options
+    });
   }
 
   /**
@@ -692,27 +708,31 @@ class TreeElement {
   }
 
   /**
-   * Applies a state to the tree.
+   * Applies a state to the tree, and saves it to storage when `saveState` is
+   * enabled.
    *
    * @group State
    */
   setState(state) {
-    this._saveStateHandler.setInitialState(state);
+    this._saveStateHandler._setInitialState(state);
     this._refreshElements(null);
+    this._saveState();
   }
 
   /**
-   * Closes an open node and opens a closed one.
+   * Closes an open node and opens a closed one. Await the promise when you
+   * need to know the node is really open or closed, like with `openNode` and
+   * `closeNode`.
    *
    * @param slide - Override the `slide` option for this call.
    * @group Opening and closing
    */
-  toggle(node, slide = null) {
-    const mustSlide = slide ?? this._options.slide;
+  async toggle(node, slide = null) {
+    let mustSlide = slide ?? this._options.slide;
     if (node.is_open) {
-      this.closeNode(node, mustSlide);
+      await this.closeNode(node, mustSlide);
     } else {
-      void this.openNode(node, mustSlide);
+      await this.openNode(node, mustSlide);
     }
   }
 
@@ -723,7 +743,7 @@ class TreeElement {
    * @group Other
    */
   toJson() {
-    return JSON.stringify(this.tree.getData());
+    return JSON.stringify(this._tree.getData());
   }
 
   /**
@@ -742,15 +762,15 @@ class TreeElement {
    * @group Changing the tree
    */
   updateNode(node, data) {
-    const idIsChanged = typeof data === "object" && data.id && data.id !== node.id;
+    let idIsChanged = typeof data === "object" && data.id && data.id !== node.id;
     if (idIsChanged) {
-      this.tree.removeNodeFromIndex(node);
+      this._tree.removeNodeFromIndex(node);
     }
     node.setData(data);
     if (idIsChanged) {
-      this.tree.addNodeToIndex(node);
+      this._tree.addNodeToIndex(node);
     }
-    if (typeof data === "object" && data.children && data.children instanceof Array) {
+    if (typeof data === "object" && data.children && Array.isArray(data.children)) {
       node.removeChildren();
       if (data.children.length) {
         node.loadFromData(data.children);
@@ -758,69 +778,96 @@ class TreeElement {
     }
     this._refreshElements(node);
   }
+
+  // Open the nodes up to the autoOpen level. A folder that is loaded on
+  // demand is fetched first, and its children are opened when the data has
+  // arrived.
+  async _autoOpenNodesOnDemand() {
+    let maxLevel = this._getAutoOpenMaxLevel();
+    let openNodes = async () => {
+      let loading = [];
+      this._tree.iterate((node, level) => {
+        if (node.load_on_demand) {
+          if (!node.is_loading) {
+            loading.push(this.openNode(node, false).then(openNodes));
+          }
+          return false;
+        }
+        void this.openNode(node, false);
+        return level !== maxLevel;
+      });
+      await Promise.all(loading);
+    };
+    await openNodes();
+  }
   _createFolderElement(node) {
-    const classNames = this._classNames;
-    const closedIconElement = this._renderer.closedIconElement;
-    const getScrollLeft = this._scrollHandler.getScrollLeft.bind(this._scrollHandler);
-    const openedIconElement = this._renderer.openedIconElement;
-    const tabIndex = this._options.tabIndex;
-    const treeElement = this._htmlElement;
-    const triggerEvent = this._triggerEvent.bind(this);
+    let classNames = this._classNames;
+    let closedIconElement = this._renderer._closedIconElement;
+    let getScrollLeft = this._scrollHandler._getScrollLeft.bind(this._scrollHandler);
+    let openedIconElement = this._renderer._openedIconElement;
+    let tabIndex = this._options.tabIndex;
+    let treeElement = this._htmlElement;
+    let triggerEvent = this._triggerEvent.bind(this);
+
+    // A selected node in a closed folder is rendered when the folder is
+    // opened, which can be after it was selected. It becomes the tab stop
+    // then, so the fallback tab stop must go.
+    let renderChildren = folder => {
+      let ul = this._renderer._renderChildren(folder);
+      this._updateTabStop();
+      return ul;
+    };
     return new FolderElement({
-      classNames,
-      closedIconElement,
-      getScrollLeft,
-      node,
-      openedIconElement,
-      tabIndex,
-      treeElement,
-      triggerEvent
+      _classNames: classNames,
+      _closedIconElement: closedIconElement,
+      _getScrollLeft: getScrollLeft,
+      _node: node,
+      _openedIconElement: openedIconElement,
+      _renderChildren: renderChildren,
+      _tabIndex: tabIndex,
+      _treeElement: treeElement,
+      _triggerEvent: triggerEvent
     });
   }
   _createNodeElement(node) {
-    const classNames = this._classNames;
-    const getScrollLeft = this._scrollHandler.getScrollLeft.bind(this._scrollHandler);
-    const tabIndex = this._options.tabIndex;
-    const treeElement = this._htmlElement;
+    let classNames = this._classNames;
+    let getScrollLeft = this._scrollHandler._getScrollLeft.bind(this._scrollHandler);
+    let tabIndex = this._options.tabIndex;
+    let treeElement = this._htmlElement;
     return new NodeElement({
-      classNames,
-      getScrollLeft,
-      node,
-      tabIndex,
-      treeElement
+      _classNames: classNames,
+      _getScrollLeft: getScrollLeft,
+      _node: node,
+      _tabIndex: tabIndex,
+      _treeElement: treeElement
     });
   }
 
   /* Create a RequestUrl based on the url in the options.
-    * Add a 'node' query parameter for loading on demand
-    * Add a 'selected_node' query parameter if a node is selected.
-  */
+   * Add a 'node' query parameter for loading on demand
+   * Add a 'selected_node' query parameter if a node is selected.
+   */
   _createRequestUrl(node) {
-    const dataUrl = this._options.dataUrl;
-    let url;
-    if (typeof dataUrl === "function") {
-      url = dataUrl(node);
-    } else {
-      url = dataUrl;
-    }
+    let dataUrl = this._options.dataUrl;
+    let url = typeof dataUrl === "function" ? dataUrl(node) : dataUrl;
     if (!url) {
       return null;
     }
-    const requestUrl = new RequestUrl(url);
+    let requestUrl = new RequestUrl(url);
     if (node?.id) {
       // Load on demand of a subtree; add node parameter
-      requestUrl.setSearchParam('node', node.id.toString());
+      requestUrl._setSearchParam("node", node.id.toString());
     } else {
       // Add selected_node parameter
-      const selectedNodeId = this._getNodeIdToBeSelected();
+      let selectedNodeId = this._getNodeIdToBeSelected();
       if (selectedNodeId) {
-        requestUrl.setSearchParam('selected_node', selectedNodeId.toString());
+        requestUrl._setSearchParam("selected_node", selectedNodeId.toString());
       }
     }
     return requestUrl;
   }
   _deselectCurrentNode() {
-    const node = this.getSelectedNode();
+    let node = this.getSelectedNode();
     if (node) {
       this.removeFromSelection(node);
     }
@@ -828,9 +875,9 @@ class TreeElement {
 
   // Deselect the children of the node.
   _deselectNodes(parentNode) {
-    const selectedNodesUnderParent = this._selectNodeHandler.getSelectedNodesUnder(parentNode);
-    for (const n of selectedNodesUnderParent) {
-      this._selectNodeHandler.removeFromSelection(n);
+    let selectedNodesUnderParent = this._selectNodeHandler._getSelectedNodesUnder(parentNode);
+    for (let n of selectedNodesUnderParent) {
+      this._selectNodeHandler._removeFromSelection(n);
     }
   }
 
@@ -838,38 +885,59 @@ class TreeElement {
   _getAutoOpenMaxLevel() {
     if (this._options.autoOpen === true) {
       return -1;
-    } else if (typeof this._options.autoOpen === "number") {
+    }
+    if (typeof this._options.autoOpen === "number") {
       return this._options.autoOpen;
-    } else if (typeof this._options.autoOpen === "string") {
+    }
+    if (typeof this._options.autoOpen === "string") {
       return parseInt(this._options.autoOpen, 10);
     }
 
     /* istanbul ignore next @preserve */
     return 0;
   }
-  _getNodeElement(element) {
-    const node = this.getNode(element);
-    if (node) {
-      return this._getNodeElementForNode(node);
-    } else {
+
+  // The title span of the first node, or null when the tree is empty
+  _getFirstTitleSpan() {
+    let firstElement = this._tree.children[0]?.element;
+    return firstElement ? firstElement.querySelector(`:scope > .${this._classNames.element} > span.${this._classNames.title}`) : null;
+  }
+
+  // The node of the HTML element that has the focus, if it is in this tree
+  _getFocusedNode() {
+    let activeElement = document.activeElement;
+
+    /* istanbul ignore if */
+    if (!activeElement) {
       return null;
     }
+
+    // The keyboard must still work for input elements.
+    let tagName = activeElement.tagName;
+    if (tagName !== "A" && tagName !== "SPAN") {
+      return null;
+    }
+    let node = this.getNode(activeElement);
+    return node?.tree === this._tree ? node : null;
+  }
+  _getNodeElement(element) {
+    let node = this.getNode(element);
+    return node ? this._getNodeElementForNode(node) : null;
   }
   _getNodeElementForNode(node) {
-    if (node.isFolder()) {
-      return this._createFolderElement(node);
-    } else {
-      return this._createNodeElement(node);
-    }
+    return node.isFolder() ? this._createFolderElement(node) : this._createNodeElement(node);
   }
   _getNodeIdToBeSelected() {
-    return this._saveStateHandler.getNodeIdToBeSelected();
+    return this._saveStateHandler._getNodeIdToBeSelected();
+  }
+  _hasRenderedSelectedNode() {
+    return this.getSelectedNodes().some(node => Boolean(node.element));
   }
   _initData() {
     if (this._options.data) {
       this.loadData(this._options.data);
     } else {
-      const dataUrl = this._createRequestUrl();
+      let dataUrl = this._createRequestUrl();
       if (dataUrl) {
         void this.loadDataFromUrl();
       } else {
@@ -878,16 +946,17 @@ class TreeElement {
     }
   }
   _initTree(data) {
-    const doInit = () => {
-      if (!this._isInitialized) {
-        this._isInitialized = true;
-        this._triggerEvent("tree.init");
+    let doInit = () => {
+      if (this._isInitialized) {
+        return;
       }
+      this._isInitialized = true;
+      this._triggerEvent("tree.init");
     };
-    this.tree = new this._options.nodeClass(null, true, this._options.nodeClass);
-    this._selectNodeHandler.clear();
-    this.tree.loadFromData(data);
-    const mustLoadOnDemand = this._setInitialState();
+    this._tree = new this._options.nodeClass(null, true, this._options.nodeClass);
+    this._selectNodeHandler._clear();
+    this._tree.loadFromData(data);
+    let mustLoadOnDemand = this._setInitialState();
     this._refreshElements(null);
     if (mustLoadOnDemand) {
       // Load data on demand and then init the tree
@@ -899,32 +968,22 @@ class TreeElement {
 
   // Does an HTML element of the tree have the focus?
   _isFocusOnTree() {
-    const activeElement = document.activeElement;
-
-    /* istanbul ignore if */
-    if (!activeElement) {
-      return false;
-    }
-
-    // The keyboard must still work for input elements.
-    const tagName = activeElement.tagName;
-    if (tagName !== "A" && tagName !== "SPAN") {
-      return false;
-    }
-    const node = this.getNode(activeElement);
-    return node?.tree === this.tree;
+    return this._getFocusedNode() !== null;
   }
   _isSelectedNodeInSubtree(subtree) {
-    const selectedNode = this.getSelectedNode();
-    if (!selectedNode) {
-      return false;
-    } else {
-      return subtree === selectedNode || subtree.isParentOf(selectedNode);
-    }
+    let selectedNode = this.getSelectedNode();
+    return selectedNode ? subtree === selectedNode || subtree.isParentOf(selectedNode) : false;
   }
   async _loadFolderOnDemand(node, slide) {
     node.is_loading = true;
     await this.loadDataFromUrl(undefined, node);
+
+    // Loading failed, or there is no url. Opening the node now would load it
+    // again, without end. Leave it closed so the user can try again.
+    if (node.load_on_demand) {
+      node.is_loading = false;
+      return;
+    }
     await this.openNode(node, slide);
   }
   _loadSubtree(data, parentNode) {
@@ -934,37 +993,35 @@ class TreeElement {
     this._refreshElements(parentNode);
   }
   _mouseCapture(positionInfo) {
-    if (!this._options.dragAndDrop) {
-      return false;
-    }
-    return this._dndHandler.mouseCapture(positionInfo);
+    return this._options.dragAndDrop ? this._dndHandler._mouseCapture(positionInfo) : false;
   }
   _mouseDrag(positionInfo) {
     /* istanbul ignore if */
     if (!this._options.dragAndDrop) {
       return false;
     }
-    const result = this._dndHandler.mouseDrag(positionInfo);
-    this._scrollHandler.checkScrolling(positionInfo);
+    let result = this._dndHandler._mouseDrag(positionInfo);
+    this._scrollHandler._checkScrolling(positionInfo);
     return result;
   }
   _mouseStart(positionInfo) {
     /* istanbul ignore if */
+    // eslint-disable-next-line unicorn/prefer-ternary
     if (!this._options.dragAndDrop) {
       return false;
     }
-    return this._dndHandler.mouseStart(positionInfo);
+    return this._dndHandler._mouseStart(positionInfo);
   }
   _mouseStop(positionInfo) {
     /* istanbul ignore if */
     if (!this._options.dragAndDrop) {
       return false;
     }
-    this._scrollHandler.stopScrolling();
-    return this._dndHandler.mouseStop(positionInfo);
+    this._scrollHandler._stopScrolling();
+    return this._dndHandler._mouseStop(positionInfo);
   }
   _openParents(node) {
-    const parent = node.parent;
+    let parent = node.parent;
     if (parent?.parent && !parent.is_open) {
       void this.openNode(parent, false);
     }
@@ -975,57 +1032,58 @@ class TreeElement {
     from_node: redraw this subtree
   */
   _refreshElements(fromNode) {
-    const mustSetFocus = this._isFocusOnTree();
-    const mustSelect = fromNode ? this._isSelectedNodeInSubtree(fromNode) : false;
-    this._renderer.render(fromNode);
+    let mustSetFocus = this._isFocusOnTree();
+    let mustSelect = fromNode ? this._isSelectedNodeInSubtree(fromNode) : false;
+    this._renderer._render(fromNode);
     if (mustSelect) {
       this._selectCurrentNode(mustSetFocus);
     }
+    this._updateTabStop();
     this._triggerEvent("tree.refresh");
   }
   _saveState() {
-    this._saveStateHandler.saveState();
+    this._saveStateHandler._saveState();
   }
   _selectCurrentNode(mustSetFocus) {
-    const node = this.getSelectedNode();
-    if (node) {
-      const nodeElement = this._getNodeElementForNode(node);
-      nodeElement.select(mustSetFocus);
+    let node = this.getSelectedNode();
+    if (!node) {
+      return;
     }
+    let nodeElement = this._getNodeElementForNode(node);
+    nodeElement._select(mustSetFocus);
   }
 
   // Set initial state, either by restoring the state or auto-opening nodes
   // result: must load nodes on demand?
   _setInitialState() {
-    const restoreState = () => {
+    let restoreState = () => {
       // result: is state restored, must load on demand?
-      const state = this._saveStateHandler.getStateFromStorage();
-      if (!state) {
-        return [false, false];
-      } else {
-        const mustLoadOnDemand = this._saveStateHandler.setInitialState(state);
+      let state = this._saveStateHandler._getStateFromStorage();
+      if (state) {
+        let mustLoadOnDemand = this._saveStateHandler._setInitialState(state);
 
         // return true: the state is restored
         return [true, mustLoadOnDemand];
       }
+      return [false, false];
     };
-    const autoOpenNodes = () => {
+    let autoOpenNodes = () => {
       // result: must load on demand?
       if (this._options.autoOpen === false) {
         return false;
       }
-      const maxLevel = this._getAutoOpenMaxLevel();
+      let maxLevel = this._getAutoOpenMaxLevel();
       let mustLoadOnDemand = false;
-      this.tree.iterate((node, level) => {
+      this._tree.iterate((node, level) => {
         if (node.load_on_demand) {
           mustLoadOnDemand = true;
           return false;
-        } else if (!node.hasChildren()) {
-          return false;
-        } else {
+        }
+        if (node.hasChildren()) {
           node.is_open = true;
           return level !== maxLevel;
         }
+        return false;
       });
       return mustLoadOnDemand;
     };
@@ -1039,50 +1097,12 @@ class TreeElement {
 
   // Set the initial state for nodes that are loaded on demand
   async _setInitialStateOnDemand() {
-    return new Promise(resolve => {
-      const restoreState = () => {
-        const state = this._saveStateHandler.getStateFromStorage();
-        if (!state) {
-          return false;
-        } else {
-          void this._saveStateHandler.setInitialStateOnDemand(state).then(() => {
-            resolve();
-          });
-          return true;
-        }
-      };
-      const autoOpenNodes = () => {
-        const maxLevel = this._getAutoOpenMaxLevel();
-        let loadingCount = 0;
-        const loadAndOpenNode = node => {
-          loadingCount += 1;
-          void this.openNode(node, false).then(() => {
-            loadingCount -= 1;
-            openNodes();
-          });
-        };
-        const openNodes = () => {
-          this.tree.iterate((node, level) => {
-            if (node.load_on_demand) {
-              if (!node.is_loading) {
-                loadAndOpenNode(node);
-              }
-              return false;
-            } else {
-              void this.openNode(node, false);
-              return level !== maxLevel;
-            }
-          });
-          if (loadingCount === 0) {
-            resolve();
-          }
-        };
-        openNodes();
-      };
-      if (!restoreState()) {
-        autoOpenNodes();
-      }
-    });
+    let state = this._saveStateHandler._getStateFromStorage();
+    if (state) {
+      await this._saveStateHandler._setInitialStateOnDemand(state);
+    } else {
+      await this._autoOpenNodesOnDemand();
+    }
   }
 
   // Set this HTML element to this node in the node map.
@@ -1092,6 +1112,23 @@ class TreeElement {
   _triggerEvent(eventName, values) {
     return this._triggerEventProvider(this._htmlElement, eventName, values);
   }
+
+  /* Keyboard users reach the tree through the tab stop. The selected node is
+   * the tab stop, see NodeElement.select. Without a selected node, the first
+   * node is the tab stop, so the tree can always be reached.
+   */
+  _updateTabStop() {
+    let tabIndex = this._options.tabIndex;
+    let previousTabStop = this._fallbackTabStop;
+    let tabStop = tabIndex == null || this._hasRenderedSelectedNode() ? null : this._getFirstTitleSpan();
+    if (previousTabStop && previousTabStop !== tabStop && previousTabStop.getAttribute("aria-selected") !== "true") {
+      previousTabStop.setAttribute("tabindex", "-1");
+    }
+    if (tabStop && tabIndex != null) {
+      tabStop.setAttribute("tabindex", String(tabIndex));
+    }
+    this._fallbackTabStop = tabStop;
+  }
 }
 
 export { TreeElement as default };