Merge branch 'fix-scroll-jumping' into devel

webapp/packages/core-administration/src/Administration/Administration.tsx

@@ -7,6 +7,7 @@
  */
 
 import { observer } from 'mobx-react';
+import { useLayoutEffect, useRef } from 'react';
 import styled, { css } from 'reshadow';
 
 import { TabsState, TabList, verticalTabStyles } from '@cloudbeaver/core-blocks';
@@ -75,9 +76,14 @@ type Props = React.PropsWithChildren<{
 export const Administration: React.FC<Props> = observer(function Administration({
   configurationWizard, activeScreen, onItemSelect, children,
 }) {
+  const contentRef = useRef<HTMLDivElement>(null);
   const controller = useController(AdministrationController);
   const items = controller.getItems(configurationWizard);
 
+  useLayoutEffect(() => {
+    contentRef.current?.scrollTo({ top: 0, left: 0 });
+  }, [activeScreen?.item]);
+
   return styled(useStyles(verticalTabStyles, administrationStyles, tabsStyles))(
     <container as='div'>
       <TabsState currentTabId={activeScreen?.item} orientation='vertical'>
@@ -94,7 +100,7 @@ export const Administration: React.FC<Props> = observer(function Administration(
             ))}
           </TabList>
         </drawer>
-        <content as='div'>
+        <content ref={contentRef} as='div'>
           {children}
           <ItemContent
             activeScreen={activeScreen}

webapp/packages/core-blocks/src/Tabs/TabsState.tsx

@@ -63,7 +63,7 @@ export function TabsState<T = Record<string, any>>({
     open: onOpen,
     close: onClose,
     props: rest as T,
-    selectedId: null as string | null | undefined,
+    selectedId: selectedId || currentTabId,
     state,
   });
 
@@ -76,21 +76,14 @@ export function TabsState<T = Record<string, any>>({
     state.selectedId = currentTabId;
   }
 
-  useEffect(() => {
-    if (!currentTabId) {
-      return;
-    }
-    state.select(currentTabId);
-  }, [currentTabId]); // hack currentId and selectedId not works
-
   useEffect(() => {
     const openHandler: IExecutorHandler<ITabData<T>> = data => {
+      dynamic.current.open?.(data);
       if (dynamic.current.selectedId === data.tabId) {
         return false;
       }
       dynamic.current.selectedId = data.tabId;
       dynamic.current.state.select(data.tabId);
-      dynamic.current.open?.(data);
       return undefined;
     };
     const closeHandler: IExecutorHandler<ITabData<T>> = data => dynamic.current.close?.(data);