Handle external updates to mssfix value

1 files changed, 30 insertions, 8 deletions

diff --git a/gui/packages/desktop/src/renderer/components/AdvancedSettings.js b/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
index b593c33f0a..108ea5fced 100644
--- a/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
+++ b/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
@@ -28,7 +28,9 @@ type Props = {
 };
 
 type State = {
-  mssfix: ?number,
+  persistedMssfix: ?number,
+  editedMssfix: ?number,
+  focusOnMssfix: boolean,
 };
 
 export class AdvancedSettings extends Component<Props, State> {
@@ -36,10 +38,22 @@ export class AdvancedSettings extends Component<Props, State> {
     super(props);
 
     this.state = {
-      mssfix: props.mssfix,
+      persistedMssfix: props.mssfix,
+      editedMssfix: props.mssfix,
+      focusOnMssfix: false,
     };
   }
 
+  componentDidUpdate(_oldProps: Props, _oldState: State) {
+    if (this.props.mssfix !== this.state.persistedMssfix) {
+      this.setState((state, props) => ({
+        ...state,
+        persistedMssfix: props.mssfix,
+        editedMssfix: state.focusOnMssfix ? state.editedMssfix : props.mssfix,
+      }));
+    }
+  }
+
   render() {
     let portSelector = null;
     let protocol = this.props.protocol.toUpperCase();
@@ -94,9 +108,10 @@ export class AdvancedSettings extends Component<Props, State> {
                     keyboardType={'numeric'}
                     maxLength={5}
                     placeholder={'None'}
-                    value={this.state.mssfix}
+                    value={this.state.editedMssfix}
                     onChangeText={this._onMssfixChange}
-                    onBlur={this._persistMssfix}
+                    onFocus={this._onMssfixFocus}
+                    onBlur={this._onMssfixBlur}
                   />
                 </Cell.Container>
                 <Cell.Footer>Change OpenVPN MSS value</Cell.Footer>
@@ -131,14 +146,21 @@ export class AdvancedSettings extends Component<Props, State> {
     const mssfix = mssfixString.replace(/[^0-9]/g, '');
 
     if (mssfix === '') {
-      this.setState({ mssfix: null });
+      this.setState({ editedMssfix: null });
     } else {
-      this.setState({ mssfix: parseInt(mssfix, 10) });
+      this.setState({ editedMssfix: parseInt(mssfix, 10) });
     }
   };
 
-  _persistMssfix = () => {
-    this.props.setOpenVpnMssfix(this.state.mssfix);
+  _onMssfixFocus = () => {
+    this.setState({ focusOnMssfix: true });
+  };
+
+  _onMssfixBlur = () => {
+    this.props.setOpenVpnMssfix(this.state.editedMssfix);
+    this.setState((state, _props) => {
+      return { focusOnMssfix: false, persistedMssfix: state.editedMssfix };
+    });
   };
 }