Fix missing back action context for changes dialog

3 files changed, 34 insertions, 38 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 886a83d8d7..23abcd8627 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -37,6 +37,7 @@ import { Scheduler } from '../shared/scheduler';
 import AppRouter from './components/AppRouter';
 import { Changelog } from './components/Changelog';
 import ErrorBoundary from './components/ErrorBoundary';
+import KeyboardNavigation from './components/KeyboardNavigation';
 import MacOsScrollbarDetection from './components/MacOsScrollbarDetection';
 import { ModalContainer } from './components/Modal';
 import PlatformWindowContainer from './containers/PlatformWindowContainer';
@@ -273,8 +274,10 @@ export default class AppRenderer {
             <PlatformWindowContainer>
               <ErrorBoundary>
                 <ModalContainer>
-                  <AppRouter />
-                  <Changelog />
+                  <KeyboardNavigation>
+                    <AppRouter />
+                    <Changelog />
+                  </KeyboardNavigation>
                   {window.env.platform === 'darwin' && <MacOsScrollbarDetection />}
                 </ModalContainer>
               </ErrorBoundary>
diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index 18a8b51063..278ad0aafc 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -24,7 +24,6 @@ import {
 } from './ExpiredAccountAddTime';
 import FilterByProvider from './FilterByProvider';
 import Focus, { IFocusHandle } from './Focus';
-import KeyboardNavigation from './KeyboardNavigation';
 import Launch from './Launch';
 import MainView from './MainView';
 import SplitTunnelingSettings from './SplitTunnelingSettings';
@@ -74,40 +73,34 @@ class AppRouter extends React.Component<IHistoryProps & IAppContext, IAppRoutesS
     const location = this.state.currentLocation;
 
     return (
-      <KeyboardNavigation>
-        <Focus ref={this.focusRef}>
-          <TransitionContainer onTransitionEnd={this.onNavigation} {...this.state.transition}>
-            <TransitionView viewId={location.key || ''}>
-              <Switch key={location.key} location={location}>
-                <Route exact path={RoutePath.launch} component={Launch} />
-                <Route exact path={RoutePath.login} component={LoginPage} />
-                <Route exact path={RoutePath.tooManyDevices} component={TooManyDevices} />
-                <Route exact path={RoutePath.deviceRevoked} component={DeviceRevokedView} />
-                <Route exact path={RoutePath.main} component={MainView} />
-                <Route exact path={RoutePath.redeemVoucher} component={VoucherInput} />
-                <Route
-                  exact
-                  path={RoutePath.voucherSuccess}
-                  component={VoucherVerificationSuccess}
-                />
-                <Route exact path={RoutePath.timeAdded} component={TimeAdded} />
-                <Route exact path={RoutePath.setupFinished} component={SetupFinished} />
-                <Route exact path={RoutePath.settings} component={SettingsPage} />
-                <Route exact path={RoutePath.selectLanguage} component={SelectLanguagePage} />
-                <Route exact path={RoutePath.accountSettings} component={AccountPage} />
-                <Route exact path={RoutePath.preferences} component={PreferencesPage} />
-                <Route exact path={RoutePath.advancedSettings} component={AdvancedSettingsPage} />
-                <Route exact path={RoutePath.wireguardSettings} component={WireguardSettingsPage} />
-                <Route exact path={RoutePath.openVpnSettings} component={OpenVPNSettingsPage} />
-                <Route exact path={RoutePath.splitTunneling} component={SplitTunnelingSettings} />
-                <Route exact path={RoutePath.support} component={SupportPage} />
-                <Route exact path={RoutePath.selectLocation} component={SelectLocationPage} />
-                <Route exact path={RoutePath.filterByProvider} component={FilterByProvider} />
-              </Switch>
-            </TransitionView>
-          </TransitionContainer>
-        </Focus>
-      </KeyboardNavigation>
+      <Focus ref={this.focusRef}>
+        <TransitionContainer onTransitionEnd={this.onNavigation} {...this.state.transition}>
+          <TransitionView viewId={location.key || ''}>
+            <Switch key={location.key} location={location}>
+              <Route exact path={RoutePath.launch} component={Launch} />
+              <Route exact path={RoutePath.login} component={LoginPage} />
+              <Route exact path={RoutePath.tooManyDevices} component={TooManyDevices} />
+              <Route exact path={RoutePath.deviceRevoked} component={DeviceRevokedView} />
+              <Route exact path={RoutePath.main} component={MainView} />
+              <Route exact path={RoutePath.redeemVoucher} component={VoucherInput} />
+              <Route exact path={RoutePath.voucherSuccess} component={VoucherVerificationSuccess} />
+              <Route exact path={RoutePath.timeAdded} component={TimeAdded} />
+              <Route exact path={RoutePath.setupFinished} component={SetupFinished} />
+              <Route exact path={RoutePath.settings} component={SettingsPage} />
+              <Route exact path={RoutePath.selectLanguage} component={SelectLanguagePage} />
+              <Route exact path={RoutePath.accountSettings} component={AccountPage} />
+              <Route exact path={RoutePath.preferences} component={PreferencesPage} />
+              <Route exact path={RoutePath.advancedSettings} component={AdvancedSettingsPage} />
+              <Route exact path={RoutePath.wireguardSettings} component={WireguardSettingsPage} />
+              <Route exact path={RoutePath.openVpnSettings} component={OpenVPNSettingsPage} />
+              <Route exact path={RoutePath.splitTunneling} component={SplitTunnelingSettings} />
+              <Route exact path={RoutePath.support} component={SupportPage} />
+              <Route exact path={RoutePath.selectLocation} component={SelectLocationPage} />
+              <Route exact path={RoutePath.filterByProvider} component={FilterByProvider} />
+            </Switch>
+          </TransitionView>
+        </TransitionContainer>
+      </Focus>
     );
   }
 
diff --git a/gui/src/renderer/components/KeyboardNavigation.tsx b/gui/src/renderer/components/KeyboardNavigation.tsx
index d098adc2b7..9f657fb54b 100644
--- a/gui/src/renderer/components/KeyboardNavigation.tsx
+++ b/gui/src/renderer/components/KeyboardNavigation.tsx
@@ -5,7 +5,7 @@ import { useHistory } from '../lib/history';
 import { disableDismissForRoutes, RoutePath } from '../lib/routes';
 
 interface IKeyboardNavigationProps {
-  children: React.ReactElement;
+  children: React.ReactElement | Array<React.ReactElement>;
 }
 
 // Listens for and handles keyboard shortcuts