summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx20
1 files changed, 18 insertions, 2 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx
index b4aa0129e9..7df1931bbf 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx
@@ -11,17 +11,33 @@ export type SettingsAccordion = Omit<AccordionProps, 'animation'> & {
};
function SettingsAccordion({ accordionId, anchorId, ...props }: SettingsAccordion) {
- const { location } = useHistory();
+ const history = useHistory();
+ const { location } = history;
+ const { state } = location;
const initialExpanded = location.state.expandedSections[accordionId];
const [expanded, setExpanded] = React.useState(initialExpanded);
const { ref, animation } = useScrollToListItem(anchorId);
+ const handleOnExpandedChange = React.useCallback(
+ (value: boolean) => {
+ setExpanded(value);
+ history.replace(location, {
+ ...state,
+ expandedSections: {
+ ...state.expandedSections,
+ [accordionId]: value,
+ },
+ });
+ },
+ [accordionId, history, location, state],
+ );
+
return (
<Accordion
ref={ref}
animation={animation}
expanded={expanded}
- onExpandedChange={setExpanded}
+ onExpandedChange={handleOnExpandedChange}
{...props}
/>
);