@theia/core 1.27.0-next.9 → 1.27.0

package/src/browser/tree/tree-compression/compressed-tree-model.ts

@@ -38,8 +38,14 @@ export class CompressedTreeModel extends TreeModelImpl {
     @inject(CompressionToggle) protected readonly compressionToggle: CompressionToggle;
     @inject(TreeCompressionService) protected readonly compressionService: TreeCompressionService;
 
-    protected selectAdjacentRow(direction: BackOrForward, type: TreeSelection.SelectionType = TreeSelection.SelectionType.DEFAULT): void {
-        let startingPoint: TreeNode = this.selectedNodes[0];
+    protected selectAdjacentRow(
+        direction: BackOrForward,
+        type: TreeSelection.SelectionType = TreeSelection.SelectionType.DEFAULT,
+        startingPoint: Readonly<TreeNode> | undefined = this.getFocusedNode()
+    ): void {
+        if (!startingPoint && this.root) {
+            this.selectAdjacentRow(BackOrForward.Forward, type, this.root);
+        }
         if (this.compressionService.isCompressionParticipant(startingPoint)) {
             const chain = this.compressionService.getCompressionChain(startingPoint);
             startingPoint = (direction === BackOrForward.Backward ? chain?.head() : chain?.tail()) ?? startingPoint;

package/src/browser/tree/tree-compression/compressed-tree-widget.tsx

@@ -132,12 +132,14 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget {
         if (!this.compressionToggle.compress) { return super.handleUp(event); }
         const type = this.props.multiSelect && this.hasShiftMask(event) ? TreeSelection.SelectionType.RANGE : undefined;
         this.model.selectPrevRow(type);
+        this.node.focus();
     }
 
     protected override handleDown(event: KeyboardEvent): void {
         if (!this.compressionToggle.compress) { return super.handleDown(event); }
         const type = this.props.multiSelect && this.hasShiftMask(event) ? TreeSelection.SelectionType.RANGE : undefined;
         this.model.selectNextRow(type);
+        this.node.focus();
     }
 
     protected override async handleLeft(event: KeyboardEvent): Promise<void> {
@@ -145,7 +147,7 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget {
         if (Boolean(this.props.multiSelect) && (this.hasCtrlCmdMask(event) || this.hasShiftMask(event))) {
             return;
         }
-        const active = this.model.selectedNodes[0];
+        const active = this.focusService.focusedNode;
         if (ExpandableTreeNode.isExpanded(active)
             && (
                 this.compressionService.isCompressionHead(active)
@@ -162,7 +164,7 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget {
         if (Boolean(this.props.multiSelect) && (this.hasCtrlCmdMask(event) || this.hasShiftMask(event))) {
             return;
         }
-        const active = this.model.selectedNodes[0];
+        const active = this.focusService.focusedNode;
 
         if (ExpandableTreeNode.isCollapsed(active)
             && (

package/src/browser/tree/tree-container.ts

@@ -27,6 +27,7 @@ import { TreeSearch } from './tree-search';
 import { FuzzySearch } from './fuzzy-search';
 import { SearchBox, SearchBoxFactory } from './search-box';
 import { SearchBoxDebounce } from './search-box-debounce';
+import { TreeFocusService, TreeFocusServiceImpl } from './tree-focus-service';
 
 export function isTreeServices(candidate?: Partial<TreeProps> | Partial<TreeContainerProps>): candidate is TreeContainerProps {
     if (candidate) {
@@ -110,6 +111,7 @@ interface TreeServices {
     search: TreeSearch,
     fuzzy: FuzzySearch,
     decoratorService: TreeDecoratorService,
+    focusService: TreeFocusService,
 }
 
 interface TreeTypes extends TreeServices, TreeConstants { }
@@ -132,6 +134,7 @@ const defaultImplementations: TreeContainerProps & { props: TreeProps } = {
     search: TreeSearch,
     fuzzy: FuzzySearch,
     decoratorService: NoopTreeDecoratorService,
+    focusService: TreeFocusServiceImpl,
     props: defaultTreeProps,
     searchBoxFactory: defaultSearchBoxFactoryFactory,
 };
@@ -148,4 +151,5 @@ const serviceIdentifiers: TreeIdentifiers = {
     fuzzy: FuzzySearch,
     searchBoxFactory: SearchBoxFactory,
     decoratorService: TreeDecoratorService,
+    focusService: TreeFocusService
 };

package/src/browser/tree/tree-focus-service.ts

@@ -0,0 +1,55 @@
+// *****************************************************************************
+// Copyright (C) 2022 Ericsson and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { inject, injectable } from 'inversify';
+import { Emitter, Event } from '../../common';
+import { Tree, TreeNode } from './tree';
+import { SelectableTreeNode } from './tree-selection';
+
+export interface TreeFocusService {
+    readonly focusedNode: SelectableTreeNode | undefined;
+    readonly onDidChangeFocus: Event<SelectableTreeNode | undefined>;
+    setFocus(node?: SelectableTreeNode): void;
+    hasFocus(node?: TreeNode): boolean;
+}
+export const TreeFocusService = Symbol('TreeFocusService');
+
+@injectable()
+export class TreeFocusServiceImpl implements TreeFocusService {
+    protected focusedId: string | undefined;
+    protected onDidChangeFocusEmitter = new Emitter<SelectableTreeNode | undefined>();
+    get onDidChangeFocus(): Event<SelectableTreeNode | undefined> { return this.onDidChangeFocusEmitter.event; }
+
+    @inject(Tree) protected readonly tree: Tree;
+
+    get focusedNode(): SelectableTreeNode | undefined {
+        const candidate = this.tree.getNode(this.focusedId);
+        if (SelectableTreeNode.is(candidate)) {
+            return candidate;
+        }
+    }
+
+    setFocus(node?: SelectableTreeNode): void {
+        if (node?.id !== this.focusedId) {
+            this.focusedId = node?.id;
+            this.onDidChangeFocusEmitter.fire(node);
+        }
+    }
+
+    hasFocus(node?: TreeNode): boolean {
+        return !!node && node?.id === this.focusedId;
+    }
+}

package/src/browser/tree/tree-model.ts

@@ -26,6 +26,7 @@ import { TreeExpansionService, ExpandableTreeNode } from './tree-expansion';
 import { TreeNavigationService } from './tree-navigation';
 import { TreeIterator, BottomUpTreeIterator, TopDownTreeIterator, Iterators } from './tree-iterator';
 import { TreeSearch } from './tree-search';
+import { TreeFocusService } from './tree-focus-service';
 
 /**
  * The tree model.
@@ -134,6 +135,11 @@ export interface TreeModel extends Tree, TreeSelectionService, TreeExpansionServ
      * If no node was selected previously, invoking this method does nothing.
      */
     selectRange(node: Readonly<SelectableTreeNode>): void;
+
+    /**
+     * Returns the node currently in focus in this tree, or undefined if no node is focused.
+     */
+    getFocusedNode(): SelectableTreeNode | undefined
 }
 
 @injectable()
@@ -144,6 +150,7 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
     @inject(TreeSelectionService) protected readonly selectionService: TreeSelectionService;
     @inject(TreeExpansionService) protected readonly expansionService: TreeExpansionService;
     @inject(TreeNavigationService) protected readonly navigationService: TreeNavigationService;
+    @inject(TreeFocusService) protected readonly focusService: TreeFocusService;
     @inject(TreeSearch) protected readonly treeSearch: TreeSearch;
 
     protected readonly onChangedEmitter = new Emitter<void>();
@@ -215,6 +222,10 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
         return this.tree.getNode(id);
     }
 
+    getFocusedNode(): SelectableTreeNode | undefined {
+        return this.focusService.focusedNode;
+    }
+
     validateNode(node: TreeNode | undefined): TreeNode | undefined {
         return this.tree.validateNode(node);
     }
@@ -241,7 +252,7 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
     }
 
     async expandNode(raw?: Readonly<ExpandableTreeNode>): Promise<ExpandableTreeNode | undefined> {
-        for (const node of raw ? [raw] : this.selectedNodes) {
+        for (const node of this.getExpansionCandidates(raw)) {
             if (ExpandableTreeNode.is(node)) {
                 return this.expansionService.expandNode(node);
             }
@@ -249,8 +260,14 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
         return undefined;
     }
 
+    protected *getExpansionCandidates(raw?: Readonly<TreeNode>): IterableIterator<TreeNode | undefined> {
+        yield raw;
+        yield this.getFocusedNode();
+        yield* this.selectedNodes;
+    }
+
     async collapseNode(raw?: Readonly<ExpandableTreeNode>): Promise<boolean> {
-        for (const node of raw ? [raw] : this.selectedNodes) {
+        for (const node of this.getExpansionCandidates(raw)) {
             if (ExpandableTreeNode.is(node)) {
                 return this.expansionService.collapseNode(node);
             }
@@ -259,7 +276,7 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
     }
 
     async collapseAll(raw?: Readonly<CompositeTreeNode>): Promise<boolean> {
-        const node = raw || this.selectedNodes[0];
+        const node = raw || this.getFocusedNode();
         if (SelectableTreeNode.is(node)) {
             this.selectNode(node);
         }
@@ -284,7 +301,10 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
         }
     }
 
-    getPrevSelectableNode(node: TreeNode = this.selectedNodes[0]): SelectableTreeNode | undefined {
+    getPrevSelectableNode(node: TreeNode | undefined = this.getFocusedNode()): SelectableTreeNode | undefined {
+        if (!node) {
+            return this.getNextSelectableNode(this.root);
+        }
         const iterator = this.createBackwardIterator(node);
         return iterator && this.doGetNextNode(iterator, this.isVisibleSelectableNode.bind(this));
     }
@@ -296,7 +316,7 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
         }
     }
 
-    getNextSelectableNode(node: TreeNode = this.selectedNodes[0]): SelectableTreeNode | undefined {
+    getNextSelectableNode(node: TreeNode | undefined = this.getFocusedNode() ?? this.root): SelectableTreeNode | undefined {
         const iterator = this.createIterator(node);
         return iterator && this.doGetNextNode(iterator, this.isVisibleSelectableNode.bind(this));
     }
@@ -345,7 +365,7 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
     }
 
     openNode(raw?: TreeNode | undefined): void {
-        const node = raw || this.selectedNodes[0];
+        const node = raw ?? this.focusService.focusedNode;
         if (node) {
             this.doOpenNode(node);
             this.onOpenNodeEmitter.fire(node);
@@ -359,8 +379,8 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
     }
 
     selectParent(): void {
-        if (this.selectedNodes.length === 1) {
-            const node = this.selectedNodes[0];
+        const node = this.getFocusedNode();
+        if (node) {
             const parent = SelectableTreeNode.getVisibleParent(node);
             if (parent) {
                 this.selectNode(parent);
@@ -416,6 +436,10 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
         this.selectionService.addSelection(selectionOrTreeNode);
     }
 
+    clearSelection(): void {
+        this.selectionService.clearSelection();
+    }
+
     selectNode(node: Readonly<SelectableTreeNode>): void {
         this.addSelection(node);
     }

package/src/browser/tree/tree-selection-impl.ts

@@ -19,12 +19,14 @@ import { Tree, TreeNode } from './tree';
 import { Event, Emitter } from '../../common';
 import { TreeSelectionState, FocusableTreeSelection } from './tree-selection-state';
 import { TreeSelectionService, SelectableTreeNode, TreeSelection } from './tree-selection';
+import { TreeFocusService } from './tree-focus-service';
 
 @injectable()
 export class TreeSelectionServiceImpl implements TreeSelectionService {
 
-    @inject(Tree)
-    protected readonly tree: Tree;
+    @inject(Tree) protected readonly tree: Tree;
+    @inject(TreeFocusService) protected readonly focusService: TreeFocusService;
+
     protected readonly onSelectionChangedEmitter = new Emitter<ReadonlyArray<Readonly<SelectableTreeNode>>>();
 
     protected state: TreeSelectionState;
@@ -75,7 +77,11 @@ export class TreeSelectionServiceImpl implements TreeSelectionService {
         this.transiteTo(newState);
     }
 
-    protected transiteTo(newState: TreeSelectionState): void {
+    clearSelection(): void {
+        this.transiteTo(new TreeSelectionState(this.tree), false);
+    }
+
+    protected transiteTo(newState: TreeSelectionState, setFocus = true): void {
         const oldNodes = this.state.selection();
         const newNodes = newState.selection();
 
@@ -85,7 +91,9 @@ export class TreeSelectionServiceImpl implements TreeSelectionService {
         this.unselect(toUnselect);
         this.select(toSelect);
         this.removeFocus(oldNodes, newNodes);
-        this.addFocus(newState.focus);
+        if (setFocus) {
+            this.addFocus(newState.node);
+        }
 
         this.state = newState;
         this.fireSelectionChanged();
@@ -107,6 +115,7 @@ export class TreeSelectionServiceImpl implements TreeSelectionService {
         if (node) {
             node.focus = true;
         }
+        this.focusService.setFocus(node);
     }
 
     /**

package/src/browser/tree/tree-selection-state.ts

@@ -95,10 +95,15 @@ export class TreeSelectionState {
 
     get focus(): SelectableTreeNode | undefined {
         const copy = this.checkNoDefaultSelection(this.selectionStack);
-        const candidate = copy[copy.length - 1].focus;
+        const candidate = copy[copy.length - 1]?.focus;
         return this.toSelectableTreeNode(candidate);
     }
 
+    get node(): SelectableTreeNode | undefined {
+        const copy = this.checkNoDefaultSelection(this.selectionStack);
+        return this.toSelectableTreeNode(copy[copy.length - 1]?.node);
+    }
+
     protected handleDefault(state: TreeSelectionState, node: Readonly<SelectableTreeNode>): TreeSelectionState {
         const { tree } = state;
         return new TreeSelectionState(tree, [{
@@ -116,7 +121,7 @@ export class TreeSelectionState {
             for (let i = allRanges.length - 1; i >= 0; i--) {
                 const latestRangeIndex = copy.indexOf(allRanges[i]);
                 const latestRangeSelection = copy[latestRangeIndex];
-                const latestRange = latestRangeSelection && latestRangeSelection.focus ? this.selectionRange(latestRangeSelection) : [];
+                const latestRange = latestRangeSelection?.focus ? this.selectionRange(latestRangeSelection) : [];
                 if (latestRange.indexOf(node) !== -1) {
                     if (this.focus === latestRangeSelection.focus) {
                         return latestRangeSelection.focus || node;

package/src/browser/tree/tree-selection.ts

@@ -41,6 +41,11 @@ export interface TreeSelectionService extends Disposable, SelectionProvider<Read
      */
     addSelection(selectionOrTreeNode: TreeSelection | Readonly<SelectableTreeNode>): void;
 
+    /**
+     * Clears all selected nodes
+     */
+    clearSelection(): void;
+
     /**
      * Store selection state.
      */
@@ -114,6 +119,8 @@ export interface SelectableTreeNode extends TreeNode {
     selected: boolean;
 
     /**
+     * @deprecated @since 1.27.0. Use TreeFocusService to track the focused node.
+     *
      * `true` if the tree node has the focus. Otherwise, `false`. Defaults to `false`.
      */
     focus?: boolean;
@@ -130,6 +137,9 @@ export namespace SelectableTreeNode {
         return is(node) && node.selected;
     }
 
+    /**
+     * @deprecated @since 1.27.0. Use TreeFocusService to track the focused node.
+     */
     export function hasFocus(node: TreeNode | undefined): boolean {
         return is(node) && node.focus === true;
     }

package/src/browser/tree/tree-widget-selection.ts

@@ -31,7 +31,16 @@ export namespace TreeWidgetSelection {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return Array.isArray(selection) && ('source' in selection) && <any>selection['source'] instanceof TreeWidget;
     }
+
     export function create(source: TreeWidget): TreeWidgetSelection {
-        return Object.assign(source.model.selectedNodes, { source });
+        const focusedNode = source.model.getFocusedNode();
+        const selectedNodes = source.model.selectedNodes;
+        const focusedIndex = selectedNodes.indexOf(focusedNode as SelectableTreeNode);
+        // Ensure that the focused node is at index 0 - used as default single selection.
+        if (focusedNode && focusedIndex > 0) {
+            const selection = [focusedNode, ...selectedNodes.slice(0, focusedIndex), ...selectedNodes.slice(focusedIndex + 1)];
+            return Object.assign(selection, { source });
+        }
+        return Object.assign(selectedNodes, { source });
     }
 }

package/src/browser/tree/tree-widget.tsx

@@ -41,6 +41,7 @@ import { TreeWidgetSelection } from './tree-widget-selection';
 import { MaybePromise } from '../../common/types';
 import { LabelProvider } from '../label-provider';
 import { CorePreferences } from '../core-preferences';
+import { TreeFocusService } from './tree-focus-service';
 
 const debounce = require('lodash.debounce');
 
@@ -164,6 +165,8 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
     protected readonly treeSearch: TreeSearch;
     @inject(SearchBoxFactory)
     protected readonly searchBoxFactory: SearchBoxFactory;
+    @inject(TreeFocusService)
+    protected readonly focusService: TreeFocusService;
 
     protected decorations: Map<string, TreeDecoration.Data[]> = new Map();
 
@@ -242,7 +245,8 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         this.toDispose.pushAll([
             this.model,
             this.model.onChanged(() => this.updateRows()),
-            this.model.onSelectionChanged(() => this.updateScrollToRow({ resize: false })),
+            this.model.onSelectionChanged(() => this.scheduleUpdateScrollToRow({ resize: false })),
+            this.focusService.onDidChangeFocus(() => this.scheduleUpdateScrollToRow({ resize: false })),
             this.model.onDidChangeBusy(() => this.update()),
             this.model.onNodeRefreshed(() => this.updateDecorations()),
             this.model.onExpansionChanged(() => this.updateDecorations()),
@@ -268,6 +272,11 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                         this.updateGlobalSelection();
                     }
                 }),
+                this.focusService.onDidChangeFocus(focus => {
+                    if (focus && this.node.contains(document.activeElement) && this.model.selectedNodes[0] !== focus && this.model.selectedNodes.includes(focus)) {
+                        this.updateGlobalSelection();
+                    }
+                }),
                 Disposable.create(() => {
                     const selection = this.selectionService.selection;
                     if (TreeWidgetSelection.isSource(selection, this)) {
@@ -342,6 +351,8 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         this.forceUpdate(updateOptions);
     }
 
+    protected scheduleUpdateScrollToRow = debounce(this.updateScrollToRow);
+
     /**
      * Get the `scrollToRow`.
      *
@@ -351,10 +362,8 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         if (!this.shouldScrollToRow) {
             return undefined;
         }
-        const selected = this.model.selectedNodes;
-        const node: TreeNode | undefined = selected.find(SelectableTreeNode.hasFocus) || selected[0];
-        const row = node && this.rows.get(node.id);
-        return row && row.index;
+        const { focusedNode } = this.focusService;
+        return focusedNode && this.rows.get(focusedNode.id)?.index;
     }
 
     /**
@@ -398,11 +407,6 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                 this.model.selectNode(node);
             }
         }
-        // It has to be called after nodes are selected.
-        if (this.props.globalSelection) {
-            this.updateGlobalSelection();
-        }
-        this.forceUpdate();
     }
 
     /**
@@ -411,7 +415,11 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
      * @returns the node to focus if available.
      */
     protected getNodeToFocus(): SelectableTreeNode | undefined {
-        const root = this.model.root;
+        const { focusedNode } = this.focusService;
+        if (focusedNode) {
+            return focusedNode;
+        }
+        const { root } = this.model;
         if (SelectableTreeNode.isVisible(root)) {
             return root;
         }
@@ -442,6 +450,9 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         if (!this.rows.size) {
             classNames.push('empty');
         }
+        if (this.model.selectedNodes.length === 0 && !this.focusService.focusedNode) {
+            classNames.push('focused');
+        }
         return {
             className: classNames.join(' '),
             onContextMenu: event => this.handleContextMenuEvent(this.getContainerTreeNode(), event)
@@ -821,7 +832,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             {decorationsToRender.map((decoration, index) => {
                 const { tooltip, data, fontData, color, icon, iconClass } = decoration;
                 const iconToRender = icon ?? iconClass;
-                const className = [TREE_NODE_SEGMENT_CLASS, TREE_NODE_TAIL_CLASS].join(' ');
+                const className = [TREE_NODE_SEGMENT_CLASS, TREE_NODE_TAIL_CLASS, 'flex'].join(' ');
                 const style = fontData ? this.applyFontStyles({}, fontData) : color ? { color } : undefined;
                 const content = data ? data : iconToRender
                     ? <span
@@ -932,7 +943,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             style,
             onClick: event => this.handleClickEvent(node, event),
             onDoubleClick: event => this.handleDblClickEvent(node, event),
-            onContextMenu: event => this.handleContextMenuEvent(node, event)
+            onContextMenu: event => this.handleContextMenuEvent(node, event),
         };
     }
 
@@ -954,7 +965,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         if (this.rowIsSelected(node, props)) {
             classNames.push(SELECTED_CLASS);
         }
-        if (SelectableTreeNode.hasFocus(node)) {
+        if (this.focusService.hasFocus(node)) {
             classNames.push(FOCUS_CLASS);
         }
         return classNames;
@@ -1108,6 +1119,8 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         this.addKeyListener(this.node, up, event => this.handleUp(event));
         this.addKeyListener(this.node, down, event => this.handleDown(event));
         this.addKeyListener(this.node, Key.ENTER, event => this.handleEnter(event));
+        this.addKeyListener(this.node, Key.SPACE, event => this.handleSpace(event));
+        this.addKeyListener(this.node, Key.ESCAPE, event => this.handleEscape(event));
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.addEventListener<any>(this.node, 'ps-scroll-y', (e: Event & { target: { scrollTop: number } }) => {
             if (this.view && this.view.list && this.view.list.Grid) {
@@ -1115,7 +1128,6 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                 this.view.list.Grid.handleScrollEvent({ scrollTop });
             }
         });
-        this.addEventListener(this.node, 'focus', () => this.doFocus());
     }
 
     /**
@@ -1154,6 +1166,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         } else {
             this.model.selectPrevNode();
         }
+        this.node.focus();
     }
 
     /**
@@ -1166,6 +1179,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         } else {
             this.model.selectNextNode();
         }
+        this.node.focus();
     }
 
     /**
@@ -1177,6 +1191,26 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         this.model.openNode();
     }
 
+    /**
+     * Handle the `space key` keyboard event.
+     * - By default should be similar to a single-click action.
+     * @param event the `space key` keyboard event.
+     */
+    protected handleSpace(event: KeyboardEvent): void {
+        const { focusedNode } = this.focusService;
+        if (!this.props.multiSelect || (!event.ctrlKey && !event.metaKey && !event.shiftKey)) {
+            this.tapNode(focusedNode);
+        }
+    }
+
+    protected handleEscape(event: KeyboardEvent): void {
+        if (this.model.selectedNodes.length <= 1) {
+            this.focusService.setFocus(undefined);
+            this.node.focus();
+        }
+        this.model.clearSelection();
+    }
+
     /**
      * Handle the single-click mouse event.
      * @param node the tree node if available.
@@ -1184,29 +1218,30 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
      */
     protected handleClickEvent(node: TreeNode | undefined, event: React.MouseEvent<HTMLElement>): void {
         if (node) {
+            event.stopPropagation();
             const shiftMask = this.hasShiftMask(event);
             const ctrlCmdMask = this.hasCtrlCmdMask(event);
-            if (!!this.props.multiSelect) {
-                if (SelectableTreeNode.is(node)) {
-                    if (shiftMask) {
-                        this.model.selectRange(node);
-                    } else if (ctrlCmdMask) {
-                        this.model.toggleNode(node);
-                    } else {
-                        this.model.selectNode(node);
-                    }
+            if (this.props.multiSelect && (shiftMask || ctrlCmdMask) && SelectableTreeNode.is(node)) {
+                if (shiftMask) {
+                    this.model.selectRange(node);
+                } else if (ctrlCmdMask) {
+                    this.model.toggleNode(node);
                 }
             } else {
-                if (SelectableTreeNode.is(node)) {
-                    this.model.selectNode(node);
-                }
+                this.tapNode(node);
             }
-            if (!this.props.expandOnlyOnExpansionToggleClick) {
-                if (this.isExpandable(node) && !shiftMask && !ctrlCmdMask) {
-                    this.model.toggleNodeExpansion(node);
-                }
-            }
-            event.stopPropagation();
+        }
+    }
+
+    /**
+     * The effective handler of an unmodified single-click event.
+     */
+    protected tapNode(node?: TreeNode): void {
+        if (SelectableTreeNode.is(node)) {
+            this.model.selectNode(node);
+        }
+        if (node && !this.props.expandOnlyOnExpansionToggleClick && this.isExpandable(node)) {
+            this.model.toggleNodeExpansion(node);
         }
     }
 
@@ -1233,19 +1268,17 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                 const type = !!this.props.multiSelect && this.hasCtrlCmdMask(event) ? TreeSelection.SelectionType.TOGGLE : TreeSelection.SelectionType.DEFAULT;
                 this.model.addSelection({ node, type });
             }
+            this.focusService.setFocus(node);
             const contextMenuPath = this.props.contextMenuPath;
             if (contextMenuPath) {
                 const { x, y } = event.nativeEvent;
                 const args = this.toContextMenuArgs(node);
-                this.onRender.push(Disposable.create(() =>
-                    setTimeout(() => this.contextMenuRenderer.render({
-                        menuPath: contextMenuPath,
-                        anchor: { x, y },
-                        args
-                    }))
-                ));
+                setTimeout(() => this.contextMenuRenderer.render({
+                    menuPath: contextMenuPath,
+                    anchor: { x, y },
+                    args
+                }), 10);
             }
-            this.doFocus();
         }
         event.stopPropagation();
         event.preventDefault();
@@ -1360,7 +1393,8 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             state = {
                 ...state,
                 root: this.deflateForStorage(this.model.root),
-                model: this.model.storeState()
+                model: this.model.storeState(),
+                focusedNodeId: this.focusService.focusedNode?.id
             };
         }
 
@@ -1373,7 +1407,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
      */
     restoreState(oldState: object): void {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const { root, decorations, model } = (oldState as any);
+        const { root, decorations, model, focusedNodeId } = (oldState as any);
         if (root) {
             this.model.root = this.inflateFromStorage(root);
         }
@@ -1383,6 +1417,12 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         if (model) {
             this.model.restoreState(model);
         }
+        if (focusedNodeId) {
+            const candidate = this.model.getNode(focusedNodeId);
+            if (SelectableTreeNode.is(candidate)) {
+                this.focusService.setFocus(candidate);
+            }
+        }
     }
 
     protected toNodeIcon(node: TreeNode): string {