4 files changed, 24 insertions, 8 deletions
diff --git a/gui/src/renderer/components/VpnSettings.tsx b/gui/src/renderer/components/VpnSettings.tsx
index f6d446cc43..1213703f61 100644
--- a/gui/src/renderer/components/VpnSettings.tsx
+++ b/gui/src/renderer/components/VpnSettings.tsx
@@ -260,7 +260,7 @@ function DnsBlockers() {
   );
 
   return (
-    <Cell.ExpandableSection sectionTitle={title}>
+    <Cell.ExpandableSection sectionTitle={title} expandableId="dns-blockers">
       <BlockAds />
       <BlockTrackers />
       <BlockMalware />
diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index dea8c6dbc2..18c39a7396 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -276,6 +276,8 @@ function Udp2tcpPortSetting() {
     [],
   );
 
+  const expandableProps = useMemo(() => ({ expandable: true, id: 'udp2tcp-port' }), []);
+
   const selectPort = useCallback(
     async (port: LiftedConstraint<number>) => {
       await setObfuscationSettings({
@@ -307,7 +309,7 @@ function Udp2tcpPortSetting() {
           value={port}
           onSelect={selectPort}
           disabled={obfuscationSettings.selectedObfuscation === ObfuscationType.off}
-          expandable
+          expandable={expandableProps}
           thinTitle
           automaticValue={'any' as const}
         />
diff --git a/gui/src/renderer/components/cell/Section.tsx b/gui/src/renderer/components/cell/Section.tsx
index 1971e8dcb7..8ba5975476 100644
--- a/gui/src/renderer/components/cell/Section.tsx
+++ b/gui/src/renderer/components/cell/Section.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
+import { useAppContext } from '../../context';
+import { useHistory } from '../../lib/history';
 import { useBoolean } from '../../lib/utilityHooks';
 import Accordion from '../Accordion';
 import ChevronButton from '../ChevronButton';
@@ -56,12 +58,23 @@ const StyledTitleContainer = styled(Container)({
 });
 
 interface ExpandableSectionProps extends SectionProps {
+  expandableId: string;
   expandedInitially?: boolean;
 }
 
 export function ExpandableSection(props: ExpandableSectionProps) {
-  const { expandedInitially, sectionTitle, ...otherProps } = props;
-  const [expanded, , , toggleExpanded] = useBoolean(!!expandedInitially);
+  const { expandableId, expandedInitially, sectionTitle, ...otherProps } = props;
+
+  const history = useHistory();
+  const { setNavigationHistory } = useAppContext();
+  const expandedValue =
+    history.location.state.expandedSections[props.expandableId] ?? !!expandedInitially;
+  const [expanded, , , toggleExpanded] = useBoolean(expandedValue);
+
+  useEffect(() => {
+    history.location.state.expandedSections[props.expandableId] = expanded;
+    setNavigationHistory(history.asObject);
+  }, [expanded]);
 
   const title = (
     <>
diff --git a/gui/src/renderer/components/cell/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index cfd2357d6c..ed49444da1 100644
--- a/gui/src/renderer/components/cell/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -26,7 +26,7 @@ interface CommonSelectorProps<T, U> {
   selectedCellRef?: React.Ref<HTMLElement>;
   className?: string;
   details?: React.ReactElement;
-  expandable?: boolean;
+  expandable?: { expandable: boolean; id: string };
   disabled?: boolean;
   thinTitle?: boolean;
   automaticLabel?: string;
@@ -98,14 +98,15 @@ export default function Selector<T, U>(props: SelectorProps<T, U>) {
     </Cell.Group>
   );
 
-  if (props.expandable) {
+  if (props.expandable?.expandable) {
     return (
       <AriaInput>
         <Cell.ExpandableSection
           role="listbox"
           expandedInitially={false}
           className={props.className}
-          sectionTitle={title}>
+          sectionTitle={title}
+          expandableId={props.expandable.id}>
           {children}
         </Cell.ExpandableSection>
       </AriaInput>