diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx | 20 |
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} /> ); |
