Use switch confirmation for block-when-disconnected

1 files changed, 6 insertions, 3 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 3f3440242d..42f48b1b87 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -25,6 +25,7 @@ import {
 } from './NavigationBar';
 import { ISelectorItem } from './cell/Selector';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
+import Switch from './Switch';
 
 type OptionalTunnelProtocol = TunnelProtocol | undefined;
 
@@ -51,6 +52,8 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
     showConfirmBlockWhenDisconnectedAlert: false,
   };
 
+  private blockWhenDisconnectedRef = React.createRef<Switch>();
+
   public render() {
     const hasWireguardKey = this.props.wireguardKeyState.type === 'key-set';
 
@@ -118,6 +121,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                     </AriaLabel>
                     <AriaInput>
                       <Cell.Switch
+                        ref={this.blockWhenDisconnectedRef}
                         isOn={this.props.blockWhenDisconnected}
                         onChange={this.setBlockWhenDisconnected}
                       />
@@ -257,7 +261,6 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
 
   private setBlockWhenDisconnected = (newValue: boolean) => {
     if (newValue) {
-      this.props.setBlockWhenDisconnected(true);
       this.setState({ showConfirmBlockWhenDisconnectedAlert: true });
     } else {
       this.props.setBlockWhenDisconnected(false);
@@ -265,13 +268,13 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
   };
 
   private hideConfirmBlockWhenDisconnectedAlert = () => {
-    this.props.setBlockWhenDisconnected(false);
     this.setState({ showConfirmBlockWhenDisconnectedAlert: false });
+    this.blockWhenDisconnectedRef.current?.setOn(this.props.blockWhenDisconnected);
   };
 
   private confirmEnableBlockWhenDisconnected = () => {
-    this.props.setBlockWhenDisconnected(true);
     this.setState({ showConfirmBlockWhenDisconnectedAlert: false });
+    this.props.setBlockWhenDisconnected(true);
   };
 
   private onSelectTunnelProtocol = (protocol?: TunnelProtocol) => {