From 269fe2e3bb717bb64bcc28f027ba8e29da89a33c Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Thu, 25 Jul 2024 09:35:01 -0400
Subject: [PATCH] track accordions in tabs separately so open/close state isnt
 shared

---
 .../AdvancedSettingsAccordion.tsx                | 12 +++---------
 .../GenerationSettingsAccordion.tsx              | 16 +++-------------
 .../hooks/useStandaloneAccordionToggle.ts        |  5 +----
 3 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
index 06f9f74da1..7ed7eaf5cc 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
@@ -15,7 +15,7 @@ import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEP
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { memo, useEffect, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGetModelConfigQuery } from 'services/api/endpoints/models';
 
@@ -63,17 +63,11 @@ export const AdvancedSettingsAccordion = memo(() => {
   );
   const badges = useAppSelector(selectBadges);
   const { t } = useTranslation();
-  const { isOpen, onToggle, onClose } = useStandaloneAccordionToggle({
-    id: 'advanced-settings',
+  const { isOpen, onToggle } = useStandaloneAccordionToggle({
+    id: `'advanced-settings-${activeTabName}`,
     defaultIsOpen: false,
   });
 
-  useEffect(() => {
-    if (activeTabName === 'upscaling') {
-      onClose();
-    }
-  }, [activeTabName, onClose]);
-
   return (
     <StandaloneAccordion label={t('accordions.advanced.title')} badges={badges} isOpen={isOpen} onToggle={onToggle}>
       <Flex gap={4} alignItems="center" p={4} flexDir="column" data-testid="advanced-settings-accordion">
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
index 50d7ea00b3..a809a35587 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
@@ -16,7 +16,7 @@ import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpander
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { filter } from 'lodash-es';
-import { memo, useEffect, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelectedModelConfig } from 'services/api/hooks/useSelectedModelConfig';
 
@@ -43,21 +43,11 @@ export const GenerationSettingsAccordion = memo(() => {
     id: 'generation-settings-advanced',
     defaultIsOpen: false,
   });
-  const {
-    isOpen: isOpenAccordion,
-    onToggle: onToggleAccordion,
-    onClose: onCloseAccordion,
-  } = useStandaloneAccordionToggle({
-    id: 'generation-settings',
+  const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } = useStandaloneAccordionToggle({
+    id: `generation-settings-${activeTabName}`,
     defaultIsOpen: activeTabName !== 'upscaling',
   });
 
-  useEffect(() => {
-    if (activeTabName === 'upscaling') {
-      onCloseAccordion();
-    }
-  }, [activeTabName, onCloseAccordion]);
-
   return (
     <StandaloneAccordion
       label={t('accordions.generation.title')}
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
index c7b92d9750..ac094a093f 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
+++ b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
@@ -19,8 +19,5 @@ export const useStandaloneAccordionToggle = (arg: UseStandaloneAccordionToggleAr
     dispatch(accordionStateChanged({ id: arg.id, isOpen: !isOpen }));
   }, [arg.id, dispatch, isOpen]);
 
-  const onClose = useCallback(() => {
-    dispatch(accordionStateChanged({ id: arg.id, isOpen: false }));
-  }, [arg.id, dispatch]);
-  return { isOpen, onToggle, onClose };
+  return { isOpen, onToggle };
 };