tree-element 0.3.1 → 0.4.0

package/tree_element.debug.js

@@ -1,5 +1,5 @@
 /*
-Tree-element 0.3.1
+Tree-element 0.4.0
 
 Copyright 2026 Marco Braak
 
@@ -29,13 +29,13 @@ var TreeElement = (function () {
    */
   let createClassNames = ({
     classPrefix,
-    commonClassName,
-    treeClassName
+    commonClassName = `${classPrefix}-common`,
+    treeClassName = classPrefix
   }) => ({
     border: `${classPrefix}-border`,
     circle: `${classPrefix}-circle`,
     closed: `${classPrefix}-closed`,
-    common: commonClassName ?? `${classPrefix}-common`,
+    common: commonClassName,
     dnd: `${classPrefix}-dnd`,
     dragging: `${classPrefix}-dragging`,
     element: `${classPrefix}-element`,
@@ -54,7 +54,7 @@ var TreeElement = (function () {
     toggler: `${classPrefix}-toggler`,
     togglerLeft: `${classPrefix}-toggler-left`,
     togglerRight: `${classPrefix}-toggler-right`,
-    tree: treeClassName ?? classPrefix
+    tree: treeClassName
   });
 
   class DataLoader {
@@ -80,15 +80,18 @@ var TreeElement = (function () {
       element.classList.add(this._classNames.loading);
 
       // Tell screen readers that the children of the folder are loading
-      let titleSpan = node ? this._getTitleSpan(element) : null;
-      titleSpan?.setAttribute("aria-busy", "true");
+      if (node) {
+        element.setAttribute("aria-busy", "true");
+      }
       this._triggerEvent("tree.loading_data", {
         element,
         node
       });
       let stopLoading = () => {
         element.classList.remove(this._classNames.loading);
-        titleSpan?.removeAttribute("aria-busy");
+        if (node) {
+          element.removeAttribute("aria-busy");
+        }
         this._triggerEvent("tree.loaded_data", {
           element,
           node
@@ -124,9 +127,6 @@ var TreeElement = (function () {
         });
       });
     }
-    _getTitleSpan(element) {
-      return element.querySelector(`:scope > .${this._classNames.element} > .${this._classNames.title}`);
-    }
   }
 
   // Get the top position of the HTML element.
@@ -672,6 +672,7 @@ var TreeElement = (function () {
       _getTree: getTree,
       _htmlElement: htmlElement,
       _isNodeSelected: isNodeSelected,
+      _multiSelect: multiSelect,
       _onCreateLi: onCreateLi,
       _openedIcon: openedIcon = "+",
       _rtl: rtl,
@@ -688,6 +689,7 @@ var TreeElement = (function () {
       this._getTree = getTree;
       this._htmlElement = htmlElement;
       this._isNodeSelected = isNodeSelected;
+      this._multiSelect = multiSelect;
       this._onCreateLi = onCreateLi;
       this._rtl = rtl;
       this._setNodeElement = setNodeElement;
@@ -713,7 +715,7 @@ var TreeElement = (function () {
      * null when the folder is not rendered or has no children.
      */
     _renderChildren(node) {
-      return !node.element || !node.hasChildren() ? null : this._createDomElements(node.element, node.children, false, node.getLevel() + 1);
+      return node.element && node.hasChildren() ? this._createDomElements(node.element, node.children, false, node.getLevel() + 1) : null;
     }
     _renderFromNode(node) {
       if (!node.element) {
@@ -774,10 +776,10 @@ var TreeElement = (function () {
       // li > div > [toggler], title span, [toggler]
       let div = li.firstChild;
       let titleSpan = div.childNodes[this._buttonLeft ? 1 : 0];
-      this._fillTitleSpan(titleSpan, node.name, isSelected, level);
+      this._fillNode(li, titleSpan, node.name, isSelected, level);
       if (node.is_loading) {
         li.classList.add(this._classNames.loading);
-        titleSpan.setAttribute("aria-busy", "true");
+        li.setAttribute("aria-busy", "true");
       }
       return li;
     }
@@ -807,11 +809,10 @@ var TreeElement = (function () {
       if (this._buttonLeft) {
         div.append(toggler);
       }
+      li.setAttribute("aria-expanded", getBoolString(isOpen));
 
       // title span
-      let titleSpan = this._createTitleSpanTemplate(true);
-      titleSpan.setAttribute("aria-expanded", getBoolString(isOpen));
-      div.append(titleSpan);
+      div.append(this._createTitleSpanTemplate(true));
       if (!this._buttonLeft) {
         div.append(toggler);
       }
@@ -835,11 +836,22 @@ var TreeElement = (function () {
 
     /*
     Create the outer part of a <li> template: li > div
+    The li is the treeitem, so the ul of its children is inside the treeitem.
     */
     _createLiTemplate(liClasses) {
       let li = document.createElement("li");
       li.className = liClasses;
-      li.setAttribute("role", "none");
+      li.setAttribute("role", "treeitem");
+
+      // Only a multiselect tree marks the nodes that are not selected
+      if (this._multiSelect) {
+        li.setAttribute("aria-selected", "false");
+      }
+
+      // Every node is focusable, but only the tab stop is in the tab order
+      if (this._tabIndex !== undefined) {
+        li.setAttribute("tabindex", "-1");
+      }
       let div = document.createElement("div");
       div.className = `${this._classNames.element} ${this._classNames.common}`;
       div.setAttribute("role", "none");
@@ -855,7 +867,7 @@ var TreeElement = (function () {
       // li > div > title span
       let div = li.firstChild;
       let titleSpan = div.firstChild;
-      this._fillTitleSpan(titleSpan, node.name, isSelected, level);
+      this._fillNode(li, titleSpan, node.name, isSelected, level);
       return li;
     }
 
@@ -876,13 +888,6 @@ var TreeElement = (function () {
       }
       classes += ` ${this._buttonLeft ? this._classNames.titleButtonLeft : this._classNames.titleButtonRight}`;
       titleSpan.className = classes;
-      titleSpan.setAttribute("role", "treeitem");
-      titleSpan.setAttribute("aria-selected", "false");
-
-      // Every node is focusable, but only the tab stop is in the tab order
-      if (this._tabIndex !== undefined) {
-        titleSpan.setAttribute("tabindex", "-1");
-      }
       return titleSpan;
     }
     _createUlTemplate(isRootNode) {
@@ -911,20 +916,25 @@ var TreeElement = (function () {
         if (this._ariaLabelledBy !== undefined) {
           ul.setAttribute("aria-labelledby", this._ariaLabelledBy);
         }
+        if (this._multiSelect) {
+          ul.setAttribute("aria-multiselectable", "true");
+        }
       }
       return ul;
     }
 
     /*
-    Set the parts of a cloned title span that differ per node
+    Set the parts of a cloned li and title span that differ per node
     */
-    _fillTitleSpan(titleSpan, nodeName, isSelected, level) {
-      titleSpan.setAttribute("aria-level", String(level));
+    _fillNode(li, titleSpan, nodeName, isSelected, level) {
+      li.setAttribute("aria-level", String(level));
       if (isSelected) {
-        titleSpan.setAttribute("aria-selected", "true");
+        li.setAttribute("aria-selected", "true");
         let tabIndex = this._tabIndex;
-        if (tabIndex !== undefined) {
-          titleSpan.setAttribute("tabindex", String(tabIndex));
+
+        // With multiSelect the tab stop is the active node, see updateTabStop
+        if (tabIndex !== undefined && !this._multiSelect) {
+          li.setAttribute("tabindex", String(tabIndex));
         }
       }
       if (this._autoEscape) {
@@ -933,6 +943,10 @@ var TreeElement = (function () {
         // eslint-disable-next-line no-unsanitized/property -- the user opted out of escaping with autoEscape: false
         titleSpan.innerHTML = nodeName;
       }
+
+      // The treeitem is named by its title, without the html when autoEscape
+      // is false. Otherwise the name would contain everything in the row.
+      li.setAttribute("aria-label", titleSpan.textContent);
     }
     _getButtonClasses(isOpen) {
       let classes = [this._classNames.toggler, this._classNames.common];
@@ -955,24 +969,37 @@ var TreeElement = (function () {
     }
   }
 
+  /* The keys move from the selected node and select the node they move to.
+   * With multiSelect they move from the focused node and only move the focus;
+   * Space adds the focused node to the selection or removes it.
+   */
+
   class KeyHandler {
     constructor({
       _closeNode: closeNode,
+      _focusNode: focusNode,
+      _getActiveNode: getActiveNode,
       _getFocusedNode: getFocusedNode,
       _getSelectedNode: getSelectedNode,
       _getTree: getTree,
       _keyboardSupport: keyboardSupport,
+      _multiSelect: multiSelect,
       _openNode: openNode,
       _selectNode: selectNode,
+      _toggleNodeInSelection: toggleNodeInSelection,
       _triggerEvent: triggerEvent
     }) {
       this._closeNode = closeNode;
+      this._focusNode = focusNode;
+      this._getActiveNode = getActiveNode;
       this._getFocusedNode = getFocusedNode;
       this._getSelectedNode = getSelectedNode;
       this._getTree = getTree;
       this._keyboardSupport = keyboardSupport;
+      this._multiSelect = multiSelect;
       this._openNode = openNode;
       this._originalSelectNode = selectNode;
+      this._toggleNodeInSelection = toggleNodeInSelection;
       this._triggerEvent = triggerEvent;
       if (keyboardSupport) {
         document.addEventListener("keydown", this._handleKeyDown);
@@ -984,10 +1011,10 @@ var TreeElement = (function () {
       }
     }
     _moveDown() {
-      return this._selectNode(this._getSelectedNode()?.getNextVisibleNode());
+      return this._goToNode(this._getCurrentNode()?.getNextVisibleNode());
     }
     _moveUp() {
-      return this._selectNode(this._getSelectedNode()?.getPreviousVisibleNode());
+      return this._goToNode(this._getCurrentNode()?.getPreviousVisibleNode());
     }
 
     // Activate the node, for example to open its edit page.
@@ -998,6 +1025,26 @@ var TreeElement = (function () {
       });
       return true;
     }
+
+    // No node is selected. These keys select the focused node, which is
+    // usually the first node, see TreeElement.updateTabStop.
+    _getCurrentNode() {
+      return this._multiSelect ? this._getActiveNode() : this._getSelectedNode();
+    }
+
+    // Move to the node: select it, or with multiSelect focus it.
+    // Result: there was a node to move to.
+    _goToNode(node) {
+      if (!node) {
+        return false;
+      }
+      if (this._multiSelect) {
+        this._focusNode(node);
+      } else {
+        this._originalSelectNode(node);
+      }
+      return true;
+    }
     _handleArrowKey(key) {
       switch (key) {
         case "ArrowDown":
@@ -1022,49 +1069,53 @@ var TreeElement = (function () {
           }
       }
     }
+    _handleKey(key, focusedNode) {
+      return this._getCurrentNode() ? this._handleArrowKey(key) : this._handleKeyWithoutSelection(key, focusedNode);
+    }
     _handleKeyDown = e => {
       let focusedNode = this._getFocusedNode();
       if (!focusedNode) {
         return;
       }
       let isKeyHandled;
-      let selectedNode = this._getSelectedNode();
       switch (e.key) {
+        case " ":
+          {
+            isKeyHandled = this._multiSelect ? this._toggle(focusedNode) : this._handleKey(e.key, focusedNode);
+            break;
+          }
         case "End":
           {
-            isKeyHandled = this._selectNode(this._getTree()?.getLastChild());
+            isKeyHandled = this._goToNode(this._getTree()?.getLastChild());
             break;
           }
         case "Enter":
           {
             // Without a selected node, activate the focused node
-            isKeyHandled = this._activate(selectedNode ?? focusedNode, e);
+            isKeyHandled = this._activate(this._multiSelect ? focusedNode : this._getSelectedNode() ?? focusedNode, e);
             break;
           }
         case "Home":
           {
-            isKeyHandled = this._selectNode(this._getTree()?.children[0]);
+            isKeyHandled = this._goToNode(this._getTree()?.children[0]);
             break;
           }
         default:
           {
-            isKeyHandled = selectedNode ? this._handleArrowKey(e.key) : this._handleKeyWithoutSelection(e.key, focusedNode);
+            isKeyHandled = this._handleKey(e.key, focusedNode);
           }
       }
       if (isKeyHandled) {
         e.preventDefault();
       }
     };
-
-    // No node is selected. These keys select the focused node, which is
-    // usually the first node, see TreeElement.updateTabStop.
     _handleKeyWithoutSelection(key, focusedNode) {
       switch (key) {
         case " ":
         case "ArrowDown":
         case "ArrowRight":
           {
-            return this._selectNode(focusedNode);
+            return this._goToNode(focusedNode);
           }
         default:
           {
@@ -1073,45 +1124,37 @@ var TreeElement = (function () {
       }
     }
     _moveLeft() {
-      let selectedNode = this._getSelectedNode();
+      let currentNode = this._getCurrentNode();
 
       /* istanbul ignore if */
-      if (!selectedNode) {
+      if (!currentNode) {
         return false;
       }
-      if (selectedNode.isFolder() && selectedNode.is_open) {
+      if (currentNode.isFolder() && currentNode.is_open) {
         // Left on an open node closes the node
-        void this._closeNode(selectedNode);
+        void this._closeNode(currentNode);
         return true;
       }
       // Left on a closed or end node moves focus to the node's parent
-      return this._selectNode(selectedNode.getParent());
+      return this._goToNode(currentNode.getParent());
     }
     _moveRight() {
-      let selectedNode = this._getSelectedNode();
-      if (selectedNode?.isFolder()) {
+      let currentNode = this._getCurrentNode();
+      if (currentNode?.isFolder()) {
         // folder node
-        if (selectedNode.is_open) {
+        if (currentNode.is_open) {
           // Right moves to the first child of an open node
-          return this._selectNode(selectedNode.getNextVisibleNode());
+          return this._goToNode(currentNode.getNextVisibleNode());
         }
         // Right expands a closed node
-        void this._openNode(selectedNode);
+        void this._openNode(currentNode);
         return true;
       }
       return false;
     }
-
-    /* Select the node.
-     * Don't do anything if the node is null.
-     * Result: a different node was selected.
-     */
-    _selectNode(node) {
-      if (node) {
-        this._originalSelectNode(node);
-        return true;
-      }
-      return false;
+    _toggle(node) {
+      this._toggleNodeInSelection(node);
+      return true;
     }
   }
 
@@ -2217,12 +2260,14 @@ var TreeElement = (function () {
     constructor({
       _classNames: classNames,
       _getScrollLeft: getScrollLeft,
+      _multiSelect: multiSelect = false,
       _node: node,
       _tabIndex: tabIndex,
       _treeElement: treeElement
     }) {
       this._classNames = classNames;
       this._getScrollLeft = getScrollLeft;
+      this._multiSelect = multiSelect;
       this._node = node;
       this._tabIndex = tabIndex;
       this._treeElement = treeElement;
@@ -2238,35 +2283,36 @@ var TreeElement = (function () {
         return;
       }
       this._element.classList.remove(this._classNames.selected);
-      let titleSpan = this._getTitleSpan();
+
+      // Only a multiselect tree marks the nodes that are not selected
+      if (this._multiSelect) {
+        this._element.setAttribute("aria-selected", "false");
+        return;
+      }
+      this._element.removeAttribute("aria-selected");
 
       // Check for null or undefined
       if (this._tabIndex != null) {
-        titleSpan.setAttribute("tabindex", "-1");
+        this._element.setAttribute("tabindex", "-1");
       }
-      titleSpan.setAttribute("aria-selected", "false");
-      titleSpan.blur();
+      this._element.blur();
     }
     _select(mustSetFocus) {
       if (!this._isRendered()) {
         return;
       }
       this._element.classList.add(this._classNames.selected);
-      let titleSpan = this._getTitleSpan();
+      this._element.setAttribute("aria-selected", "true");
       let tabIndex = this._tabIndex;
 
       // Check for null or undefined
-      if (tabIndex != null) {
-        titleSpan.setAttribute("tabindex", tabIndex.toString());
+      if (tabIndex != null && !this._multiSelect) {
+        this._element.setAttribute("tabindex", tabIndex.toString());
       }
-      titleSpan.setAttribute("aria-selected", "true");
       if (mustSetFocus) {
-        titleSpan.focus();
+        this._element.focus();
       }
     }
-    _getTitleSpan() {
-      return this._element.querySelector(`:scope > .${this._classNames.element} > span.${this._classNames.title}`);
-    }
     _getUl() {
       return this._element.querySelector(":scope > ul");
     }
@@ -2328,6 +2374,7 @@ var TreeElement = (function () {
       _classNames: classNames,
       _closedIconElement: closedIconElement,
       _getScrollLeft: getScrollLeft,
+      _multiSelect: multiSelect,
       _node: node,
       _openedIconElement: openedIconElement,
       _renderChildren: renderChildren,
@@ -2338,6 +2385,7 @@ var TreeElement = (function () {
       super({
         _classNames: classNames,
         _getScrollLeft: getScrollLeft,
+        _multiSelect: multiSelect,
         _node: node,
         _tabIndex: tabIndex,
         _treeElement: treeElement
@@ -2375,8 +2423,7 @@ var TreeElement = (function () {
         }
       }
       this._element.classList.add(this._classNames.closed);
-      let titleSpan = this._getTitleSpan();
-      titleSpan.setAttribute("aria-expanded", "false");
+      this._element.setAttribute("aria-expanded", "false");
       this._triggerEvent("tree.close", {
         node: this._node
       });
@@ -2412,8 +2459,7 @@ var TreeElement = (function () {
         }
       }
       this._element.classList.remove(this._classNames.closed);
-      let titleSpan = this._getTitleSpan();
-      titleSpan.setAttribute("aria-expanded", "true");
+      this._element.setAttribute("aria-expanded", "true");
       this._triggerEvent("tree.open", {
         node: this._node
       });
@@ -2921,9 +2967,9 @@ var TreeElement = (function () {
       } else {
         this._selectedNodes.delete(node.id);
         if (includeChildren) {
-          node.iterate(() => {
-            if (node.id != null) {
-              this._selectedNodes.delete(node.id);
+          node.iterate(child => {
+            if (child.id != null) {
+              this._selectedNodes.delete(child.id);
             }
             return true;
           });
@@ -2942,6 +2988,9 @@ var TreeElement = (function () {
      * mustToggle: support deselecting the selected node
      */
     _selectSingleNode(node, optionsParam) {
+      if (!this._canSelect(node)) {
+        return;
+      }
       let defaultOptions = {
         mustSetFocus: true,
         mustToggle: true
@@ -2950,31 +2999,23 @@ var TreeElement = (function () {
         ...defaultOptions,
         ...optionsParam
       };
-      let canSelect = () => {
-        if (!this._getSelectable()) {
-          return false;
-        }
-        let onCanSelectNode = this._getOnCanSelectNode();
-        return onCanSelectNode ? onCanSelectNode(node) : true;
-      };
-      if (!canSelect()) {
-        return;
-      }
-      let deselectCurrentNode = deselectedNode => {
-        this._removeFromSelection(deselectedNode);
-        this._getNodeElementForNode(deselectedNode)._deselect();
-      };
+      let otherSelectedNodes = this._getSelectedNodes().filter(selectedNode => selectedNode !== node);
       if (this._isNodeSelected(node)) {
-        if (selectOptions.mustToggle) {
-          deselectCurrentNode(node);
+        if (otherSelectedNodes.length) {
+          // Part of a multiple selection: keep only this node selected
+          for (let otherNode of otherSelectedNodes) {
+            this._deselectNode(otherNode);
+          }
+        } else if (selectOptions.mustToggle) {
+          this._deselectNode(node);
           this._triggerEvent("tree.deselect", {
             node
           });
         }
       } else {
-        let deselectedNode = this._getSelectedNode();
-        if (deselectedNode) {
-          deselectCurrentNode(deselectedNode);
+        let deselectedNode = otherSelectedNodes[0] ?? null;
+        for (let otherNode of otherSelectedNodes) {
+          this._deselectNode(otherNode);
         }
         this._addToSelection(node);
         this._openParents(node);
@@ -2987,6 +3028,43 @@ var TreeElement = (function () {
       this._updateTabStop();
       this._saveState();
     }
+
+    /* Add a node to the selection, or remove it when it is selected, without
+     * changing the other selected nodes.
+     * Checks if the node is selectable and saves the state.
+     */
+    _toggleNodeInSelection(node, mustSetFocus = true) {
+      if (!this._canSelect(node)) {
+        return;
+      }
+      if (this._isNodeSelected(node)) {
+        this._deselectNode(node);
+        this._triggerEvent("tree.deselect", {
+          node
+        });
+      } else {
+        this._addToSelection(node);
+        this._openParents(node);
+        this._getNodeElementForNode(node)._select(mustSetFocus);
+        this._triggerEvent("tree.select", {
+          deselectedNode: null,
+          node
+        });
+      }
+      this._updateTabStop();
+      this._saveState();
+    }
+    _canSelect(node) {
+      if (!this._getSelectable()) {
+        return false;
+      }
+      let onCanSelectNode = this._getOnCanSelectNode();
+      return onCanSelectNode ? onCanSelectNode(node) : true;
+    }
+    _deselectNode(node) {
+      this._removeFromSelection(node);
+      this._getNodeElementForNode(node)._deselect();
+    }
   }
 
   /* The default icons are svg instead of text: the triangle characters come
@@ -2994,10 +3072,10 @@ var TreeElement = (function () {
    * They are sized in em to follow the font size, and use currentColor to follow
    * --tree-element-toggler-color.
    */
-  let triangle = points => `<svg width="0.7em" height="0.7em" viewBox="0 0 10 10" focusable="false"><polygon points="${points}" fill="currentColor"/></svg>`;
-  let triangleDown = triangle("0.5,1.5 9.5,1.5 5,9");
-  let triangleLeft = triangle("9,0.5 9,9.5 1.5,5");
-  let triangleRight = triangle("1,0.5 1,9.5 8.5,5");
+  let triangle = points => `<svg width="0.8em" height="0.8em" viewBox="0 0 10 10" focusable="false"><polygon points="${points}" fill="currentColor"/></svg>`;
+  let triangleDown = triangle("0.5,0.5 9.5,0.5 5,9.5");
+  let triangleLeft = triangle("9.5,0.5 9.5,9.5 0.5,5");
+  let triangleRight = triangle("0.5,0.5 0.5,9.5 9.5,5");
   let defaults = {
     animationSpeed: "fast",
     autoEscape: true,
@@ -3013,6 +3091,7 @@ var TreeElement = (function () {
     // dataUrl: undefined,
     dragAndDrop: false,
     keyboardSupport: true,
+    multiSelect: false,
     nodeClass: Node,
     // onCanMove: undefined, // Can this node be moved?
     // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)
@@ -3078,7 +3157,7 @@ var TreeElement = (function () {
   };
 
   // Generated by config/generateVersion.mjs. Do not edit.
-  let version = "0.3.1";
+  let version = "0.4.0";
 
   // The types that appear in the public api. Consumers cannot import them from
   // the submodules directly, because those are not exposed in package.json.
@@ -3086,6 +3165,8 @@ var TreeElement = (function () {
   // as its global, instead of an object of named exports.
 
   class TreeElement {
+    // With multiSelect: the node that is the tab stop, see updateTabStop
+    _activeNode;
     _classNames;
     _dataLoader;
     _dndHandler;
@@ -3119,6 +3200,7 @@ var TreeElement = (function () {
       this._tree = new Node({}, true);
       this._nodeMap = new WeakMap();
       this._fallbackTabStop = null;
+      this._activeNode = null;
       let {
         ariaLabel,
         ariaLabelledBy,
@@ -3128,6 +3210,7 @@ var TreeElement = (function () {
         dataFilter,
         dragAndDrop,
         keyboardSupport,
+        multiSelect,
         onCanMove,
         onCanMoveTo,
         onCreateLi,
@@ -3179,6 +3262,17 @@ var TreeElement = (function () {
       let isNodeSelected = selectNodeHandler._isNodeSelected.bind(selectNodeHandler);
       let removeFromSelection = selectNodeHandler._removeFromSelection.bind(selectNodeHandler);
       let selectNode = selectNodeHandler._selectSingleNode.bind(selectNodeHandler);
+      let toggleNodeInSelection = selectNodeHandler._toggleNodeInSelection.bind(selectNodeHandler);
+
+      // With multiSelect, a click adds a node to the selection or removes it
+      let onClickTitle = node => {
+        if (this._options.multiSelect) {
+          toggleNodeInSelection(node, false);
+          this._focusNode(node);
+        } else {
+          selectNode(node);
+        }
+      };
       let getMouseDelay = () => this._options.startDndDelay ?? 0;
       let dataLoader = new DataLoader({
         _classNames: classNames,
@@ -3225,12 +3319,16 @@ var TreeElement = (function () {
       });
       let keyHandler = new KeyHandler({
         _closeNode: closeNode,
+        _focusNode: this._focusNode.bind(this),
+        _getActiveNode: this._getActiveNode.bind(this),
         _getFocusedNode: getFocusedNode,
         _getSelectedNode: getSelectedNode,
         _getTree: getTree,
         _keyboardSupport: keyboardSupport,
+        _multiSelect: multiSelect,
         _openNode: openNode,
         _selectNode: selectNode,
+        _toggleNodeInSelection: toggleNodeInSelection,
         _triggerEvent: triggerEvent
       });
       let renderer = new ElementsRenderer({
@@ -3244,6 +3342,7 @@ var TreeElement = (function () {
         _getTree: getTree,
         _htmlElement: treeElement,
         _isNodeSelected: isNodeSelected,
+        _multiSelect: multiSelect,
         _onCreateLi: onCreateLi,
         _openedIcon: openedIcon,
         _rtl: rtl,
@@ -3262,7 +3361,7 @@ var TreeElement = (function () {
         _getMouseDelay: getMouseDelay,
         _getNode: getNode,
         _onClickButton: this.toggle.bind(this),
-        _onClickTitle: selectNode,
+        _onClickTitle: onClickTitle,
         _onMouseCapture: onMouseCapture,
         _onMouseDrag: onMouseDrag,
         _onMouseStart: onMouseStart,
@@ -3278,6 +3377,9 @@ var TreeElement = (function () {
       this._saveStateHandler = saveStateHandler;
       this._scrollHandler = scrollHandler;
       this._selectNodeHandler = selectNodeHandler;
+      if (multiSelect) {
+        treeElement.addEventListener("focusin", this._handleFocusIn);
+      }
       this._initData();
     }
 
@@ -3387,6 +3489,7 @@ var TreeElement = (function () {
       this._dataLoader._deinit();
       this._keyHandler._deinit();
       this._mouseHandler._deinit();
+      this._htmlElement.removeEventListener("focusin", this._handleFocusIn);
       this._tree = new Node({}, true);
     }
 
@@ -3574,7 +3677,8 @@ var TreeElement = (function () {
     }
 
     /**
-     * Selects the next visible node, like the down arrow key.
+     * Selects the next visible node, like the down arrow key. With
+     * `multiSelect` it moves the focus instead.
      *
      * @group Selection
      */
@@ -3599,7 +3703,8 @@ var TreeElement = (function () {
     }
 
     /**
-     * Selects the previous visible node, like the up arrow key.
+     * Selects the previous visible node, like the up arrow key. With
+     * `multiSelect` it moves the focus instead.
      *
      * @group Selection
      */
@@ -3729,8 +3834,8 @@ var TreeElement = (function () {
      */
     selectNode(node, options) {
       if (!node) {
-        // Called with empty node -> deselect current node
-        this._deselectCurrentNode();
+        // Called with empty node -> deselect all nodes
+        this._deselectAllNodes();
         this._saveStateHandler._saveState();
         return;
       }
@@ -3866,6 +3971,7 @@ var TreeElement = (function () {
         _classNames: classNames,
         _closedIconElement: closedIconElement,
         _getScrollLeft: getScrollLeft,
+        _multiSelect: this._options.multiSelect,
         _node: node,
         _openedIconElement: openedIconElement,
         _renderChildren: renderChildren,
@@ -3882,6 +3988,7 @@ var TreeElement = (function () {
       return new NodeElement({
         _classNames: classNames,
         _getScrollLeft: getScrollLeft,
+        _multiSelect: this._options.multiSelect,
         _node: node,
         _tabIndex: tabIndex,
         _treeElement: treeElement
@@ -3911,9 +4018,8 @@ var TreeElement = (function () {
       }
       return requestUrl;
     }
-    _deselectCurrentNode() {
-      let node = this.getSelectedNode();
-      if (node) {
+    _deselectAllNodes() {
+      for (let node of this.getSelectedNodes()) {
         this.removeFromSelection(node);
       }
     }
@@ -3926,6 +4032,20 @@ var TreeElement = (function () {
       }
     }
 
+    // The treeitem of the first node, or null when the tree is empty
+    // Move the focus to a node, without selecting it
+    _focusNode(node) {
+      this._activeNode = node;
+      this._updateTabStop();
+      node.element?.focus();
+    }
+
+    // With multiSelect: the active node, if it is still rendered in the tree
+    _getActiveNode() {
+      let element = this._activeNode?.element;
+      return element && this._htmlElement.contains(element) ? this._activeNode : null;
+    }
+
     // Get the maximum level for auto open
     _getAutoOpenMaxLevel() {
       if (this._options.autoOpen === true) {
@@ -3941,11 +4061,8 @@ var TreeElement = (function () {
       /* istanbul ignore next @preserve */
       return 0;
     }
-
-    // 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;
+    _getFirstTreeItem() {
+      return this._tree.children[0]?.element ?? null;
     }
 
     // The node of the HTML element that has the focus, if it is in this tree
@@ -3959,7 +4076,7 @@ var TreeElement = (function () {
 
       // The keyboard must still work for input elements.
       let tagName = activeElement.tagName;
-      if (tagName !== "A" && tagName !== "SPAN") {
+      if (tagName !== "A" && tagName !== "LI" && tagName !== "SPAN") {
         return null;
       }
       let node = this.getNode(activeElement);
@@ -3975,6 +4092,16 @@ var TreeElement = (function () {
     _getNodeIdToBeSelected() {
       return this._saveStateHandler._getNodeIdToBeSelected();
     }
+
+    // With multiSelect, the focused node becomes the tab stop
+    _handleFocusIn = () => {
+      let node = this._getFocusedNode();
+      if (!node || node === this._activeNode) {
+        return;
+      }
+      this._activeNode = node;
+      this._updateTabStop();
+    };
     _hasRenderedSelectedNode() {
       return this.getSelectedNodes().some(node => Boolean(node.element));
     }
@@ -4051,7 +4178,6 @@ var TreeElement = (function () {
     }
     _mouseStart(positionInfo) {
       /* istanbul ignore if */
-      // eslint-disable-next-line unicorn/prefer-ternary
       if (!this._options.dragAndDrop) {
         return false;
       }
@@ -4161,12 +4287,22 @@ var TreeElement = (function () {
     /* 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.
+     * With multiSelect the tab stop is the active node: the node that was
+     * focused last. Without one, it is the first node.
      */
     _updateTabStop() {
       let tabIndex = this._options.tabIndex;
+      let multiSelect = this._options.multiSelect;
       let previousTabStop = this._fallbackTabStop;
-      let tabStop = tabIndex == null || this._hasRenderedSelectedNode() ? null : this._getFirstTitleSpan();
-      if (previousTabStop && previousTabStop !== tabStop && previousTabStop.getAttribute("aria-selected") !== "true") {
+      let tabStop;
+      if (tabIndex == null) {
+        tabStop = null;
+      } else if (multiSelect) {
+        tabStop = this._getActiveNode()?.element ?? this._getFirstTreeItem();
+      } else {
+        tabStop = this._hasRenderedSelectedNode() ? null : this._getFirstTreeItem();
+      }
+      if (previousTabStop && previousTabStop !== tabStop && (multiSelect || previousTabStop.getAttribute("aria-selected") !== "true")) {
         previousTabStop.setAttribute("tabindex", "-1");
       }
       if (tabStop && tabIndex != null) {