Merge branch 'fix-custom-dns-height'

2 files changed, 19 insertions, 9 deletions

diff --git a/gui/src/renderer/components/Accordion.tsx b/gui/src/renderer/components/Accordion.tsx
index 87dfdede24..682f5aa779 100644
--- a/gui/src/renderer/components/Accordion.tsx
+++ b/gui/src/renderer/components/Accordion.tsx
@@ -67,7 +67,16 @@ export default class Accordion extends React.Component<IProps, IState> {
     // Make sure the children are mounted first before expanding the accordion
     this.mountChildren(() => {
       this.onWillExpand();
-      this.setState({ containerHeight: this.getContentHeightWithUnit() });
+
+      const contentHeight = this.getContentHeight();
+      const containerHeight = this.containerRef.current?.offsetHeight;
+      if (containerHeight === contentHeight) {
+        // If the height new height is the same as the current then we want to change the height to
+        // auto immediately since no transition is needed.
+        this.setState({ containerHeight: 'auto' });
+      } else {
+        this.setState({ containerHeight: contentHeight + 'px' });
+      }
     });
   }
 
@@ -81,7 +90,7 @@ export default class Accordion extends React.Component<IProps, IState> {
 
   private collapse() {
     // First change height to height in px since it's not possible to transition to/from auto
-    this.setState({ containerHeight: this.getContentHeightWithUnit() }, () => {
+    this.setState({ containerHeight: this.getContentHeight() + 'px' }, () => {
       // Make sure new height has been applied
       // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       this.containerRef.current?.offsetHeight;
@@ -89,12 +98,8 @@ export default class Accordion extends React.Component<IProps, IState> {
     });
   }
 
-  private getContentHeightWithUnit(): string {
-    return (this.getContentHeight() ?? 0) + 'px';
-  }
-
-  private getContentHeight(): number | undefined {
-    return this.contentRef.current?.offsetHeight;
+  private getContentHeight(): number {
+    return this.contentRef.current?.offsetHeight ?? 0;
   }
 
   private onWillExpand() {
diff --git a/gui/src/renderer/components/CustomDnsSettings.tsx b/gui/src/renderer/components/CustomDnsSettings.tsx
index d70b9d0eba..ae65f0f1fb 100644
--- a/gui/src/renderer/components/CustomDnsSettings.tsx
+++ b/gui/src/renderer/components/CustomDnsSettings.tsx
@@ -39,6 +39,7 @@ export default function CustomDnsSettings() {
   const [inputVisible, showInput, hideInput] = useBoolean(false);
   const [invalid, setInvalid, setValid] = useBoolean(false);
   const [confirmAction, setConfirmAction] = useState<() => Promise<void>>();
+  const [savingAdd, setSavingAdd] = useState(false);
   const [savingEdit, setSavingEdit] = useState(false);
   const willShowConfirmationDialog = useRef(false);
 
@@ -108,6 +109,7 @@ export default function CustomDnsSettings() {
             },
           });
 
+          setSavingAdd(true);
           hideInput();
         };
 
@@ -182,6 +184,9 @@ export default function CustomDnsSettings() {
   );
 
   useEffect(() => setSavingEdit(false), [dns.customOptions.addresses]);
+  useEffect(() => setSavingAdd(false), [dns.customOptions.addresses]);
+
+  const listExpanded = featureAvailable && (dns.state === 'custom' || inputVisible || savingAdd);
 
   return (
     <>
@@ -201,7 +206,7 @@ export default function CustomDnsSettings() {
           </AriaInput>
         </AriaInputGroup>
       </StyledCustomDnsSwitchContainer>
-      <Accordion expanded={featureAvailable && (dns.state === 'custom' || inputVisible)}>
+      <Accordion expanded={listExpanded}>
         <Cell.Section role="listbox">
           <List
             items={dns.customOptions.addresses}