diff --git a/webapp/packages/core-administration/src/Administration/Administration.tsx b/webapp/packages/core-administration/src/Administration/Administration.tsx index e516b184ae..e3de8247ed 100644 --- a/webapp/packages/core-administration/src/Administration/Administration.tsx +++ b/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 = observer(function Administration({ configurationWizard, activeScreen, onItemSelect, children, }) { + const contentRef = useRef(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))( @@ -94,7 +100,7 @@ export const Administration: React.FC = observer(function Administration( ))} - + {children} >({ 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>({ state.selectedId = currentTabId; } - useEffect(() => { - if (!currentTabId) { - return; - } - state.select(currentTabId); - }, [currentTabId]); // hack currentId and selectedId not works - useEffect(() => { const openHandler: IExecutorHandler> = 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> = data => dynamic.current.close?.(data);