Fix server selection issues

2 files changed, 11 insertions, 3 deletions

diff --git a/modern/src/Navigation.js b/modern/src/Navigation.js
index d9ca1817..ad02106c 100644
--- a/modern/src/Navigation.js
+++ b/modern/src/Navigation.js
@@ -48,7 +48,7 @@ import AccumulatorsPage from './settings/AccumulatorsPage';
 import CommandDevicePage from './settings/CommandDevicePage';
 import CommandGroupPage from './settings/CommandGroupPage';
 import App from './App';
-import ChangeServerPage from './other/ChangeServerPage';
+import ChangeServerPage from './login/ChangeServerPage';
 import DevicesPage from './settings/DevicesPage';
 import ScheduledPage from './reports/ScheduledPage';
 import DeviceConnectionsPage from './settings/DeviceConnectionsPage';
diff --git a/modern/src/other/ChangeServerPage.js b/modern/src/login/ChangeServerPage.js
index 0343a941..a92536d0 100644
--- a/modern/src/other/ChangeServerPage.js
+++ b/modern/src/login/ChangeServerPage.js
@@ -2,8 +2,9 @@ import React from 'react';
 import ElectricalServicesIcon from '@mui/icons-material/ElectricalServices';
 import { makeStyles } from '@mui/styles';
 import {
-  Autocomplete, Container, createFilterOptions, TextField,
+  Autocomplete, Button, Container, createFilterOptions, TextField,
 } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from '../common/components/LocalizationProvider';
 
 const currentServer = `${window.location.protocol}//${window.location.host}`;
@@ -36,6 +37,7 @@ const useStyles = makeStyles((theme) => ({
 
 const ChangeServerPage = () => {
   const classes = useStyles();
+  const navigate = useNavigate();
   const t = useTranslation();
 
   const filter = createFilterOptions();
@@ -59,7 +61,7 @@ const ChangeServerPage = () => {
         options={officialServers}
         renderInput={(params) => <TextField {...params} label={t('settingsServer')} />}
         value={currentServer}
-        onChange={(_, value) => handleSubmit(value)}
+        onChange={(_, value) => value && handleSubmit(value)}
         filterOptions={(options, params) => {
           const filtered = filter(options, params);
           if (params.inputValue && !filtered.includes(params.inputValue)) {
@@ -68,6 +70,12 @@ const ChangeServerPage = () => {
           return filtered;
         }}
       />
+      <Button
+        onClick={() => navigate(-1)}
+        color="secondary"
+      >
+        {t('sharedCancel')}
+      </Button>
     </Container>
   );
 };