fix(settings): set unmountOnExit behaviour for setting groups

cryostatio · May 2, 2023 · 42a7264 · 42a7264
1 parent 7ce8bc6
commit 42a7264
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 479 deletions.
diff --git a/src/app/Settings/Settings.tsx b/src/app/Settings/Settings.tsx
@@ -193,12 +193,10 @@ export const Settings: React.FC<SettingsProps> = (_) => {
               </Tabs>
             </SidebarPanel>
             <SidebarContent>
-              {settingGroups.map((grp) => (
-                <div
-                  key={`${grp.groupKey}-setting`}
-                  className={css('settings__content', grp.groupKey === activeTab ? 'active' : '')}
-                >
-                  <Form>
+              {settingGroups
+                .filter((grp) => grp.groupKey === activeTab)
+                .map((grp) => (
+                  <Form key={`${grp.groupKey}-setting`} className="settings__content">
                     {grp.settings.map((s, index) => (
                       <FeatureFlag level={s.featureLevel} key={`${grp.groupLabel}-${s.title}-${index}-flag`}>
                         <FormGroup
@@ -232,8 +230,7 @@ export const Settings: React.FC<SettingsProps> = (_) => {
                       </FeatureFlag>
                     ))}
                   </Form>
-                </div>
-              ))}
+                ))}
             </SidebarContent>
           </Sidebar>
         </Card>

diff --git a/src/app/Shared/TargetSelect.tsx b/src/app/Shared/TargetSelect.tsx
@@ -213,7 +213,7 @@ export const TargetSelect: React.FunctionComponent<TargetSelectProps> = ({ onSel
               selections={selected.alias || selected.connectUrl}
               isFlipEnabled={true}
               menuAppendTo="parent"
-              maxHeight="16em"
+              maxHeight="20em"
               isOpen={isDropdownOpen}
               aria-label="Select Target"
             >

diff --git a/src/app/app.css b/src/app/app.css
@@ -523,11 +523,6 @@ input[type=number].datetime-picker__number-input {
 
 .settings__content {
   padding: 2ch;
-  display: none; /* only show when active */
-}
-
-.settings__content.active {
-  display: block;
 }
 
 .expandable-form__accordion-toggle-block {