From 4e38c6c6dae8b902e355546ee246a55a92a56721 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Wed, 10 Jun 2020 12:58:45 -0400
Subject: [PATCH] fix: panel on change remove referesgh

---
 ui/app-components/src/Sidebar/Sidebar.tsx       |  1 +
 ui/app/src/DocPage/DocPage.tsx                  |  4 ++--
 .../src/PanelContainer/PanelContainer.tsx       | 17 ++++++++++++-----
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/ui/app-components/src/Sidebar/Sidebar.tsx b/ui/app-components/src/Sidebar/Sidebar.tsx
index f00761fb2..ea94789f1 100644
--- a/ui/app-components/src/Sidebar/Sidebar.tsx
+++ b/ui/app-components/src/Sidebar/Sidebar.tsx
@@ -55,6 +55,7 @@ export const Sidebar: FC<SidebarProps & BoxProps> = ({
     width,
     minWidth,
     position: 'relative',
+    flexShrink: 0,
   };
   const style: SxStyleProp = !responsive
     ? defaultStyle
diff --git a/ui/app/src/DocPage/DocPage.tsx b/ui/app/src/DocPage/DocPage.tsx
index 6c508c40e..1608ae59e 100644
--- a/ui/app/src/DocPage/DocPage.tsx
+++ b/ui/app/src/DocPage/DocPage.tsx
@@ -30,7 +30,7 @@ export const BasePage: FC<DocPageProps> = ({ pagesFn }) => {
     0,
   );
   return (
-    <Box sx={{ flex: '1 0 auto' }}>
+    <Flex sx={{ flex: '1 0 auto' }}>
       <Sidebar />
       <Box sx={{ flexGrow: 1 }} id="content">
         <Tabs
@@ -67,7 +67,7 @@ export const BasePage: FC<DocPageProps> = ({ pagesFn }) => {
         </Tabs>
       </Box>
       <SideContext pageRef={pageRef} />
-    </Box>
+    </Flex>
   );
 };
 
diff --git a/ui/components/src/PanelContainer/PanelContainer.tsx b/ui/components/src/PanelContainer/PanelContainer.tsx
index e49760acf..e5bf3e993 100644
--- a/ui/components/src/PanelContainer/PanelContainer.tsx
+++ b/ui/components/src/PanelContainer/PanelContainer.tsx
@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC, MouseEvent, useCallback } from 'react';
 import { Button, ButtonProps, useThemeUI } from 'theme-ui';
 import { Collapsible } from '../Collapsible';
 import { Tab, Tabs, TabList, TabPanel } from '../Tabs';
@@ -52,16 +52,23 @@ export const PanelContainer: FC<PanelContainerProps> = ({
   const [tabsIndex, setTabsIndex] = React.useState<number | undefined>(
     undefined,
   );
+
   const { theme } = useThemeUI();
 
   const panels: ActionItems = getSortedPanels(actions);
 
+  const findPanel = useCallback(
+    (id: PanelContainerOwnProps['openTab']) => {
+      return panels.findIndex((p: ActionItem) => p.id === id || p.title === id);
+    },
+    // do not update on each panel change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
   React.useEffect(() => {
-    const index = panels.findIndex(
-      (p: ActionItem) => p.id === openTab || p.title === openTab,
-    );
+    const index = findPanel(openTab);
     setTabsIndex(index > -1 ? index : undefined);
-  }, [openTab, actions, panels]);
+  }, [openTab, findPanel]);
   const panelActions = React.useMemo(
     () =>
       actions.map((panel: ActionItem) => {