track accordions in tabs separately so open/close state isnt shared

Author: Mary Hipp

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">

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')}

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 };
 };