@theia/core 1.77.0-next.4 → 1.77.0-next.43

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@theia/core",
-  "version": "1.77.0-next.4+4f24ee401",
+  "version": "1.77.0-next.43+5dbb84a9f",
   "description": "Theia is a cloud & desktop IDE framework implemented in TypeScript.",
   "main": "lib/common/index.js",
   "typings": "lib/common/index.d.ts",
   "dependencies": {
-    "@babel/runtime": "^7.29.7",
+    "@babel/runtime": "^7.29.10",
     "@lumino/algorithm": "^2.0.5",
     "@lumino/commands": "^2.3.4",
     "@lumino/coreutils": "^2.2.3",
@@ -17,8 +17,8 @@
     "@lumino/virtualdom": "^2.0.5",
     "@lumino/widgets": "2.7.5",
     "@parcel/watcher": "^2.6.0",
-    "@theia/application-package": "1.77.0-next.4+4f24ee401",
-    "@theia/request": "1.77.0-next.4+4f24ee401",
+    "@theia/application-package": "1.77.0-next.43+5dbb84a9f",
+    "@theia/request": "1.77.0-next.43+5dbb84a9f",
     "@types/body-parser": "^1.19.6",
     "@types/express": "^4.17.25",
     "@types/fs-extra": "^4.0.15",
@@ -28,16 +28,16 @@
     "@types/markdown-it-emoji": "^3.0.1",
     "@types/route-parser": "^0.1.7",
     "@types/safer-buffer": "^2.1.3",
-    "@types/ws": "^8.18.1",
+    "@types/ws": "^8.18.2",
     "@types/yargs": "^17.0.35",
     "@vscode/codicons": "0.0.45",
     "ajv": "^6.15.0",
     "async-mutex": "^0.4.1",
     "body-parser": "^1.20.8",
     "cookie": "^1.1.1",
-    "dompurify": "^3.4.15",
+    "dompurify": "^3.4.16",
     "drivelist": "^12.0.2",
-    "express": "^4.22.2",
+    "express": "^4.22.3",
     "fast-json-stable-stringify": "^2.1.0",
     "file-icons-js": "~1.0.3",
     "font-awesome": "^4.7.0",
@@ -51,7 +51,7 @@
     "keytar": "7.9.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "markdown-it": "^14.3.1",
+    "markdown-it": "^14.3.2",
     "markdown-it-anchor": "^9.2.1",
     "markdown-it-emoji": "^3.1.0",
     "msgpackr": "^1.12.1",
@@ -62,13 +62,13 @@
     "reflect-metadata": "^0.2.2",
     "route-parser": "^0.0.5",
     "safer-buffer": "^2.1.2",
-    "socket.io": "^4.8.3",
-    "socket.io-client": "^4.8.3",
+    "socket.io": "^4.8.4",
+    "socket.io-client": "^4.8.4",
     "tslib": "^2.8.1",
     "uuid": "^11.1.1",
     "vscode-languageserver-protocol": "3.17.5",
     "vscode-uri": "3.0.8",
-    "ws": "^8.21.3",
+    "ws": "^8.22.0",
     "yargs": "^17.7.3"
   },
   "peerDependencies": {
@@ -223,15 +223,15 @@
   "devDependencies": {
     "@theia/ext-scripts": "1.76.0",
     "@theia/re-exports": "1.76.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.7",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "minimist": "^1.2.8",
     "nodejs-file-downloader": "4.13.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
   },
   "nyc": {
     "extends": "../../configs/nyc.json"
   },
-  "gitHead": "4f24ee40105b8c53808c8293c41387304d15960c"
+  "gitHead": "5dbb84a9f43e9287fe3d6f0f52ee1dd2c3c4a20f"
 }

package/src/browser/color-application-contribution.spec.ts

@@ -0,0 +1,108 @@
+// *****************************************************************************
+// Copyright (C) 2026 EclipseSource GmbH.
+//
+// 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-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { enableJSDOM } from './test/jsdom';
+let disableJSDOM = enableJSDOM();
+
+import { expect } from 'chai';
+import './shell/application-shell'; // load first to avoid a circular import failure via `SecondaryWindowHandler`
+import { ColorApplicationContribution } from './color-application-contribution';
+import { ColorRegistry } from './color-registry';
+import { ThemeService } from './theming';
+disableJSDOM();
+
+class TestColorRegistry extends ColorRegistry {
+
+    readonly values = new Map<string, string>();
+
+    override *getColors(): IterableIterator<string> {
+        yield* this.values.keys();
+    }
+
+    override getCurrentColor(id: string): string | undefined {
+        return this.values.get(id);
+    }
+}
+
+class TestColorApplicationContribution extends ColorApplicationContribution {
+
+    protected override readonly themeService = { getCurrentTheme: () => ({ type: 'dark' }) } as unknown as ThemeService;
+
+    constructor(protected override readonly colors: ColorRegistry) {
+        super();
+    }
+
+    updateWindowForTest(win: Window): void {
+        this.updateWindow(win);
+    }
+}
+
+describe('ColorApplicationContribution', () => {
+
+    let colors: TestColorRegistry;
+    let contribution: TestColorApplicationContribution;
+
+    beforeEach(() => {
+        disableJSDOM = enableJSDOM();
+        colors = new TestColorRegistry();
+        colors.values.set('editor.background', '#1e1e1e');
+        colors.values.set('scmGraph.historyItemHoverAdditionsForeground', '#487e02');
+        colors.values.set('unresolved.color', '');
+        contribution = new TestColorApplicationContribution(colors);
+    });
+
+    afterEach(() => {
+        disableJSDOM();
+    });
+
+    it('sets a --theia- and a --vscode- prefixed variable for every resolved color', () => {
+        contribution.updateWindowForTest(window);
+        const style = document.documentElement.style;
+        expect(style.getPropertyValue('--theia-editor-background')).to.equal('#1e1e1e');
+        expect(style.getPropertyValue('--vscode-editor-background')).to.equal('#1e1e1e');
+        expect(style.getPropertyValue('--theia-scmGraph-historyItemHoverAdditionsForeground')).to.equal('#487e02');
+        expect(style.getPropertyValue('--vscode-scmGraph-historyItemHoverAdditionsForeground')).to.equal('#487e02');
+        expect(style.length).to.equal(4);
+    });
+
+    it('does not set variables for colors without a value', () => {
+        contribution.updateWindowForTest(window);
+        const style = document.documentElement.style;
+        expect(style.getPropertyValue('--theia-unresolved-color')).to.equal('');
+        expect(style.getPropertyValue('--vscode-unresolved-color')).to.equal('');
+    });
+
+    it('overwrites the variables in place on a subsequent update', () => {
+        contribution.updateWindowForTest(window);
+        colors.values.set('editor.background', '#ffffff');
+        contribution.updateWindowForTest(window);
+        const style = document.documentElement.style;
+        expect(style.getPropertyValue('--theia-editor-background')).to.equal('#ffffff');
+        expect(style.getPropertyValue('--vscode-editor-background')).to.equal('#ffffff');
+        expect(style.length).to.equal(4);
+    });
+
+    it('removes both variables of a color that the current theme does not provide anymore', () => {
+        contribution.updateWindowForTest(window);
+        colors.values.delete('scmGraph.historyItemHoverAdditionsForeground');
+        contribution.updateWindowForTest(window);
+        const style = document.documentElement.style;
+        expect(style.getPropertyValue('--theia-scmGraph-historyItemHoverAdditionsForeground')).to.equal('');
+        expect(style.getPropertyValue('--vscode-scmGraph-historyItemHoverAdditionsForeground')).to.equal('');
+        expect(style.getPropertyValue('--theia-editor-background')).to.equal('#1e1e1e');
+        expect(style.length).to.equal(2);
+    });
+});

package/src/browser/color-application-contribution.ts

@@ -73,6 +73,13 @@ export class ColorApplicationContribution implements FrontendApplicationContribu
         this.onDidChangeEmitter.fire();
     }
 
+    /**
+     * The CSS variables currently applied to the document element of a window. Used to only remove
+     * those that the current theme does not provide anymore, instead of removing and re-applying all
+     * of them on every update.
+     */
+    protected readonly appliedCssVariables = new WeakMap<Window, ReadonlySet<string>>();
+
     protected readonly toUpdate = new DisposableCollection();
     protected update(): void {
         this.toUpdate.dispose();
@@ -88,14 +95,19 @@ export class ColorApplicationContribution implements FrontendApplicationContribu
 
         const documentElement = win.document.documentElement;
         if (documentElement) {
+            const applied = new Set<string>();
             for (const id of this.colors.getColors()) {
-                const variable = this.colors.getCurrentCssVariable(id);
-                if (variable) {
-                    const { name, value } = variable;
+                for (const { name, value } of this.colors.getCurrentCssVariables(id)) {
                     documentElement.style.setProperty(name, value);
-                    this.toUpdate.push(Disposable.create(() => documentElement.style.removeProperty(name)));
+                    applied.add(name);
+                }
+            }
+            for (const name of this.appliedCssVariables.get(win) ?? []) {
+                if (!applied.has(name)) {
+                    documentElement.style.removeProperty(name);
                 }
             }
+            this.appliedCssVariables.set(win, applied);
         }
     }
 

package/src/browser/color-registry.ts

@@ -39,6 +39,19 @@ export class ColorRegistry {
         return { name, value };
     }
 
+    /**
+     * All CSS variables to set for the given color: the primary one from {@link getCurrentCssVariable} and the
+     * `--vscode-` prefixed alias. VS Code extensions reference colors with the `--vscode-` prefix, e.g. in the
+     * inline styles of the HTML they render, and Monaco only defines those variables within its own containers.
+     */
+    getCurrentCssVariables(id: string): ColorCssVariable[] {
+        const variable = this.getCurrentCssVariable(id);
+        if (!variable) {
+            return [];
+        }
+        return [variable, { name: this.toCssVariableName(id, 'vscode'), value: variable.value }];
+    }
+
     toCssVariableName(id: string, prefix = 'theia'): string {
         return `--${prefix}-${id.replace(/\./g, '-')}`;
     }

package/src/browser/style/hover-service.css

@@ -31,8 +31,6 @@
   max-width: var(--theia-hover-max-width);
   overflow-wrap: break-word;
   user-select: text;
-  --vscode-scmGraph-historyItemHoverAdditionsForeground: var(--theia-scmGraph-historyItemHoverAdditionsForeground);
-  --vscode-scmGraph-historyItemHoverDeletionsForeground: var(--theia-scmGraph-historyItemHoverDeletionsForeground);
 }
 
 /* overwrite potentially different default user agent styles */

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

@@ -54,9 +54,48 @@ export namespace FocusableTreeSelection {
  */
 export class TreeSelectionState {
 
+    /**
+     * The stack of selections, by the id of the nodes they refer to.
+     *
+     * Everything this state does with a selection resolves the node through the tree anyway, so keeping the nodes
+     * themselves would only pin a subtree that a refresh has since replaced, along with whatever its elements refer
+     * to. Keeping the ids also lets a selection outlive its nodes briefly leaving the tree, as happens when a tree
+     * updates itself by clearing its contents before filling them in again.
+     */
+    protected readonly ids: ReadonlyArray<{
+        readonly node: string,
+        readonly focus?: string,
+        readonly type?: TreeSelection.SelectionType
+    }>;
+
     constructor(
         protected readonly tree: Tree,
-        readonly selectionStack: ReadonlyArray<FocusableTreeSelection> = []) {
+        selectionStack: ReadonlyArray<FocusableTreeSelection> = []) {
+        this.ids = selectionStack.map(({ node, focus, type }) => ({ node: node.id, focus: focus?.id, type }));
+    }
+
+    /**
+     * The selections of this state that refer to a node the tree currently has. Selections of nodes that are not in
+     * the tree are left out, but are kept by this state, so that they apply again if their nodes come back.
+     */
+    get selectionStack(): ReadonlyArray<FocusableTreeSelection> {
+        const stack: FocusableTreeSelection[] = [];
+        for (const { node, focus, type } of this.ids) {
+            const selected = this.findSelectableTreeNode(node);
+            if (selected) {
+                stack.push({ node: selected, focus: this.findSelectableTreeNode(focus), type });
+            }
+        }
+        return stack;
+    }
+
+    /**
+     * Resolves a node id against the tree. Unlike {@link toSelectableTreeNode} this does not report an id that does
+     * not resolve, because the stack is expected to outlive the nodes it refers to.
+     */
+    protected findSelectableTreeNode(id: string | undefined): SelectableTreeNode | undefined {
+        const candidate = id === undefined ? undefined : this.tree.getNode(id);
+        return SelectableTreeNode.is(candidate) ? candidate : undefined;
     }
 
     nextState(selection: FocusableTreeSelection): TreeSelectionState {

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

@@ -38,6 +38,14 @@ class CountingView extends TreeWidget.View {
             this.scrollCount++;
         }
     };
+    /** Reports the list height the way Virtuoso does once it has measured the list. */
+    measure(height: number, renderedHeight = height): void {
+        this.setRenderedHeight(renderedHeight);
+        this.onTotalListHeightChanged(height);
+    }
+    setRenderedHeight(scrollHeight: number): void {
+        this.scroller = { scrollHeight } as HTMLElement;
+    }
 }
 
 class TestTreeWidget extends TreeWidget {
@@ -190,6 +198,8 @@ describe('TreeWidget', () => {
         let container: HTMLElement;
         let root: Root;
         let view: CountingView | undefined;
+        let frames: FrameRequestCallback[];
+        let requestAnimationFrame: typeof window.requestAnimationFrame;
         const rows: TreeWidget.NodeRow[] = [0, 1, 2].map(index => ({ index, depth: 0, node: leaf(`node-${index}`) }));
 
         const render = (props: Partial<TreeWidget.ViewProps>): void => flushSync(() => root.render(
@@ -202,20 +212,66 @@ describe('TreeWidget', () => {
                 {...props}
             />
         ));
+        const runFrames = (): void => frames.splice(0).forEach(frame => frame(0));
+        /** Mount and measure the list, and serve the mount-time request. */
+        const mount = (props: Partial<TreeWidget.ViewProps>): void => {
+            render(props);
+            view!.measure(300);
+            runFrames();
+        };
 
         beforeEach(() => {
             container = document.createElement('div');
             document.body.appendChild(container);
             root = createRoot(container);
+            frames = [];
+            requestAnimationFrame = window.requestAnimationFrame;
+            window.requestAnimationFrame = frame => frames.push(frame);
         });
 
         afterEach(() => {
+            window.requestAnimationFrame = requestAnimationFrame;
             flushSync(() => root.unmount());
             document.body.removeChild(container);
         });
 
-        it('does not scroll again when re-rendered without a new scroll request', () => {
+        it('holds a scroll request made before the list is measured until the list is rendered at its height', () => {
+            render({ scrollToRow: 2, scrollToRowRequestId: 1 });
+            expect(view!.scrollCount).to.equal(0);
+
+            view!.measure(300, 100);
+            runFrames();
+            expect(view!.scrollCount).to.equal(0);
+
+            view!.setRenderedHeight(300);
+            runFrames();
+            expect(view!.scrollCount).to.equal(1);
+
+            runFrames();
+            expect(view!.scrollCount).to.equal(1);
+        });
+
+        it('waits for the latest list height when the first reported height shrinks', () => {
+            render({ scrollToRow: 2, scrollToRowRequestId: 1 });
+            view!.measure(300, 100);
+            view!.measure(200, 200);
+            runFrames();
+            expect(view!.scrollCount).to.equal(1);
+        });
+
+        it('serves a held scroll request when the list is never rendered at its height', () => {
             render({ scrollToRow: 2, scrollToRowRequestId: 1 });
+            view!.measure(300, 100);
+            for (let frame = 0; frame < 30; frame++) {
+                runFrames();
+                expect(view!.scrollCount).to.equal(0);
+            }
+            runFrames();
+            expect(view!.scrollCount).to.equal(1);
+        });
+
+        it('does not scroll again when re-rendered without a new scroll request', () => {
+            mount({ scrollToRow: 2, scrollToRowRequestId: 1 });
             const scrollsAfterMount = view!.scrollCount;
 
             render({ scrollToRow: 2, scrollToRowRequestId: 1 });
@@ -225,7 +281,7 @@ describe('TreeWidget', () => {
         });
 
         it('scrolls again when a new scroll request arrives for the same row', () => {
-            render({ scrollToRow: 2, scrollToRowRequestId: 1 });
+            mount({ scrollToRow: 2, scrollToRowRequestId: 1 });
             const scrollsAfterMount = view!.scrollCount;
 
             render({ scrollToRow: 2, scrollToRowRequestId: 2 });
@@ -234,7 +290,7 @@ describe('TreeWidget', () => {
         });
 
         it('scrolls when the row to scroll to changes', () => {
-            render({ scrollToRow: 1 });
+            mount({ scrollToRow: 1 });
             const scrollsAfterMount = view!.scrollCount;
 
             render({ scrollToRow: 2 });

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

@@ -1655,13 +1655,73 @@ export namespace TreeWidget {
             }
         };
 
+        /**
+         * `true` once Virtuoso has measured the list. Before that, `scrollIntoView` sees every row as visible and does nothing.
+         */
+        protected measured = false;
+        /**
+         * `true` while a scroll request made before the list was measured waits to be served.
+         */
+        protected scrollHeld = false;
+        /**
+         * The latest list height reported by Virtuoso. It can still change after the first report, as more rows are measured.
+         */
+        protected listHeight = 0;
+        /**
+         * How many frames a held scroll request waits for the list to be rendered at its height, about half a second at 60 Hz.
+         */
+        protected readonly maxRenderWaitFrames = 30;
+        protected scroller: HTMLElement | undefined;
+
+        /**
+         * Scroll now, or hold the request until the list is measured, e.g. for the focus restored when the view mounts.
+         */
+        protected requestScroll(): void {
+            if (this.measured) {
+                this.scrollIntoViewIfNeeded();
+            } else {
+                this.scrollHeld = this.props.scrollToRow !== undefined;
+            }
+        }
+
+        protected readonly onTotalListHeightChanged = (height: number): void => {
+            this.listHeight = height;
+            if (!this.measured && height > 0) {
+                this.measured = true;
+                if (this.scrollHeld) {
+                    this.scrollHeld = false;
+                    this.scrollWhenRendered();
+                }
+            }
+            this.props.totalListHeightChanged?.(height);
+        };
+
+        protected readonly setScroller = (scroller: HTMLElement | Window | null): void => {
+            this.scroller = scroller instanceof HTMLElement ? scroller : undefined;
+            this.props.scrollerRef?.(scroller);
+        };
+
+        /**
+         * Virtuoso reports the list height before React renders the list at it, and a scroll before that is clamped
+         * to the old height. Wait for the rendered height, at most `maxRenderWaitFrames` frames.
+         */
+        protected scrollWhenRendered(framesLeft = this.maxRenderWaitFrames): void {
+            window.requestAnimationFrame(() => {
+                if (this.scroller && this.scroller.scrollHeight < this.listHeight && framesLeft > 0) {
+                    this.scrollWhenRendered(framesLeft - 1);
+                } else {
+                    this.scrollIntoViewIfNeeded();
+                }
+            });
+        }
+
         override componentDidMount(): void {
-            this.scrollIntoViewIfNeeded();
+            this.requestScroll();
         }
 
         override componentDidUpdate(prevProps: ViewProps): void {
             if (this.props.scrollToRow !== prevProps.scrollToRow || this.props.scrollToRowRequestId !== prevProps.scrollToRowRequestId) {
-                this.scrollIntoViewIfNeeded();
+                this.requestScroll();
             }
         }
 
@@ -1681,6 +1741,8 @@ export namespace TreeWidget {
                 // Higher value provides smoother scrolling experience especially during inference, but uses more memory
                 overscan={800}
                 {...other}
+                totalListHeightChanged={this.onTotalListHeightChanged}
+                scrollerRef={this.setScroller}
             />;
         }
     }

package/src/browser/widgets/select-component.spec.ts

@@ -0,0 +1,77 @@
+// *****************************************************************************
+// Copyright (C) 2026 EclipseSource GmbH.
+//
+// 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-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { enableJSDOM } from '../test/jsdom';
+let disableJSDOM = enableJSDOM();
+
+import { expect } from 'chai';
+import * as React from 'react';
+import * as sinon from 'sinon';
+import * as browser from '../browser';
+import { SelectComponent, SelectOption } from './select-component';
+
+disableJSDOM();
+
+class TestSelectComponent extends SelectComponent {
+    dropdown(): React.ReactElement<{ style: React.CSSProperties }> {
+        this.state = { ...this.state, dimensions: new DOMRect(20, 20, 90, 23) };
+        return this.renderDropdown() as React.ReactElement<{ style: React.CSSProperties }>;
+    }
+}
+
+describe('SelectComponent dropdown width', () => {
+    let component: TestSelectComponent;
+    let textWidth: sinon.SinonStub;
+
+    before(() => disableJSDOM = enableJSDOM());
+    after(() => disableJSDOM());
+
+    beforeEach(() => {
+        textWidth = sinon.stub(browser, 'measureTextWidth').returns(84);
+        sinon.stub(document.documentElement, 'getBoundingClientRect').returns(new DOMRect(0, 0, 800, 600));
+    });
+
+    afterEach(() => {
+        component.componentWillUnmount();
+        sinon.restore();
+    });
+
+    function dropdown(options: SelectOption[], alignment?: 'left' | 'right'): React.ReactElement<{ style: React.CSSProperties }> {
+        component = new TestSelectComponent({ options, alignment });
+        return component.dropdown();
+    }
+
+    it('keeps label-based sizing when no option has a description', () => {
+        expect(dropdown([{ label: 'Off' }, { label: 'None', description: '' }]).props.style.width).to.equal(100);
+    });
+
+    it('reserves readable space even when only an unselected option has a description', () => {
+        expect(dropdown([{ label: 'Auto' }, { label: 'Off', description: 'Uses provider defaults.' }]).props.style.width).to.equal(300);
+    });
+
+    it('keeps enough space for labels wider than the description minimum', () => {
+        textWidth.returns(384);
+        expect(dropdown([{ label: 'A long label', description: 'Description' }]).props.style.width).to.equal(400);
+    });
+
+    it('caps the description width at the available space for either alignment', () => {
+        (document.documentElement.getBoundingClientRect as sinon.SinonStub).returns(new DOMRect(0, 0, 200, 600));
+        const options = [{ label: 'Off', description: 'Uses provider defaults.' }];
+        expect(dropdown(options).props.style.width).to.equal(180);
+        component.componentWillUnmount();
+        expect(dropdown(options, 'right').props.style.width).to.equal(110);
+    });
+});

package/src/browser/widgets/select-component.tsx

@@ -163,7 +163,8 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
 
     protected getOptimalWidth(): number {
         const textWidth = measureTextWidth(this.props.options.map(e => e.label || e.value || '' + (e.detail || '')));
-        return Math.ceil(textWidth + 16);
+        const minWidth = this.props.options.some(option => option.description) ? 300 : 0;
+        return Math.max(Math.ceil(textWidth + 16), minWidth);
     }
 
     protected getOptimalHeight(maxWidth?: number): number {
@@ -320,15 +321,10 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
         if (!this.fieldRef.current) {
             return;
         }
-        if (ev.key === 'ArrowUp') {
-            const selected = this.nextNotSeparator('backwards', this.state.hover);
-            this.setState({
-                selected,
-                hover: selected
-            });
-        } else if (ev.key === 'ArrowDown') {
+        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
+            const direction = ev.key === 'ArrowUp' ? 'backwards' : 'forwards';
             if (this.state.dimensions) {
-                const selected = this.nextNotSeparator('forwards', this.state.hover);
+                const selected = this.nextNotSeparator(direction, this.state.hover);
                 this.setState({
                     selected,
                     hover: selected
@@ -337,7 +333,7 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
                 this.toggleVisibility();
                 // Start on the first selectable option (startFrom -1 evaluates index 0 first), so a
                 // leading separator or disabled option is skipped instead of becoming the active row.
-                const selected = this.nextNotSeparator('forwards', -1);
+                const selected = this.nextNotSeparator(direction, -1);
                 this.setState({
                     selected,
                     hover: selected,