Restore scroll position in ConnectionsMenu when going back to relation types from instances list

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Fix relation having changed `data` but missing from `AuthoringState` when the source or target entity becomes deleted then restored back.
 - Fix grouped relation (`RelationGroup` item) does not updating its `data` when changed by `EditorController`.
 - Fix `ConnectionsMenu` displaying no links when there is only a single incoming/outgoing relation type. (by @cristianvasquez)
+- Restore scroll position in `ConnectionsMenu` when going back to relation types from instances list.
 - Exclude collapsed `DropdownMenu` and `UnifiedSearch` content from Tab-navigation.
 - Exclude canvas elements from Tab-navigation unless the element is only one selected.
 - Block canvas interacton (including Tab-navigation) when displaying a blocking modal overlay i.e. an overlay task or viewport-centered dialog.

src/widgets/connectionsMenu/connectionList.tsx

@@ -17,7 +17,7 @@ import {
     CLASS_NAME, LINK_COUNT_PER_PAGE,
 } from './menuCommon';
 
-export function ConnectionsList(props: {
+export function ConnectionList(props: {
     data: ConnectionsData;
     filterKey: string;
     sortMode: SortMode;
@@ -27,7 +27,7 @@ export function ConnectionsList(props: {
     onExpandLink: (chunk: LinkDataChunk) => void;
     onMoveToFilter?: (chunk: LinkDataChunk) => void;
 
-    scrolledListRef?: React.RefObject<HTMLUListElement | null>;
+    scrolledListRef?: React.RefObject<HTMLDivElement | null>;
 }) {
     const {
         data, filterKey, sortMode, suggestions,
@@ -99,6 +99,10 @@ export function ConnectionsList(props: {
                 'reactodia-scrollable',
                 entries.length === 0 ? `${CLASS_NAME}__links-list-empty` : undefined
             )}
+            ref={
+                /* For compatibility with React 19 typings */
+                scrolledListRef as React.RefObject<HTMLDivElement>
+            }
             tabIndex={-1}
         >
             <FocusGroup>

src/widgets/connectionsMenu/connectionsMenu.tsx

@@ -31,7 +31,7 @@ import {
     ConnectionCount, ObjectsData, LinkDataChunk, ObjectPlacingMode,
     CLASS_NAME, LINK_COUNT_PER_PAGE, LoadingSpinner,
 } from './menuCommon';
-import { ConnectionsList } from './connectionList';
+import { ConnectionList } from './connectionList';
 import { EntityList } from './entityList';
 
 /**
@@ -258,7 +258,7 @@ class ConnectionsMenuInner extends React.Component<ConnectionsMenuInnerProps, Me
 
     private suggestionCancellation = new AbortController();
 
-    private linksScrolledListRef = React.createRef<HTMLUListElement>();
+    private linksScrolledListRef = React.createRef<HTMLDivElement>();
     private linksScrollPosition: number | undefined;
 
     constructor(props: ConnectionsMenuInnerProps) {
@@ -598,7 +598,7 @@ class ConnectionsMenuInner extends React.Component<ConnectionsMenuInnerProps, Me
             commands.trigger('findCapabilities', event);
 
             return (
-                <ConnectionsList
+                <ConnectionList
                     data={connections}
                     suggestions={connectionSuggestions}
                     filterKey={connectionSearch.value}

test/widgets/connectionsList.test.tsx → test/widgets/connectionsMenu.test.tsx

@@ -3,11 +3,11 @@ import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-react';
 
 import type { LinkTypeModel } from '../../src/data/model';
-import { ConnectionsList } from '../../src/widgets/connectionsMenu/connectionList';
+import { ConnectionList } from '../../src/widgets/connectionsMenu/connectionList';
 import { WorkspaceProvider, createWorkspace } from '../../src/workspace/workspaceProvider';
 import { blockingDefaultLayout } from '../../src/layout-sync';
 
-describe('ConnectionsList', () => {
+describe('ConnectionList', () => {
     it('renders the only connection link', async () => {
         const link: LinkTypeModel = {id: 'urn:test:single-link', label: []};
         const workspace = createWorkspace({
@@ -16,7 +16,7 @@ describe('ConnectionsList', () => {
 
         await render(
             <WorkspaceProvider workspace={workspace}>
-                <ConnectionsList
+                <ConnectionList
                     data={{
                         links: [link],
                         counts: new Map([