fixes #924 (#1107)

client/modules/IDE/components/Preferences.jsx

@@ -16,12 +16,27 @@ class Preferences extends React.Component {
     super(props);
     this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this);
     this.handleUpdateLinewrap = this.handleUpdateLinewrap.bind(this);
-    this.handleUpdateFont = this.handleUpdateFont.bind(this);
     this.handleLintWarning = this.handleLintWarning.bind(this);
+    this.onFontInputChange = this.onFontInputChange.bind(this);
+    this.onFontInputSubmit = this.onFontInputSubmit.bind(this);
+    this.increaseFontSize = this.increaseFontSize.bind(this);
+    this.decreaseFontSize = this.decreaseFontSize.bind(this);
+    this.setFontSize = this.setFontSize.bind(this);
+
+    this.state = {
+      fontSize: props.fontSize
+    };
   }
 
-  handleUpdateFont(event) {
+  onFontInputChange(event) {
-    let value = parseInt(event.target.value, 10);
+    this.setState({
+      fontSize: event.target.value
+    });
+  }
+
+  onFontInputSubmit(event) {
+    event.preventDefault();
+    let value = parseInt(this.state.fontSize, 10);
     if (Number.isNaN(value)) {
       value = 16;
     }
@@ -31,9 +46,24 @@ class Preferences extends React.Component {
     if (value < 8) {
       value = 8;
     }
+    this.setFontSize(value);
+  }
+
+  setFontSize(value) {
+    this.setState({ fontSize: value });
     this.props.setFontSize(value);
   }
 
+  decreaseFontSize() {
+    const newValue = this.state.fontSize - 2;
+    this.setFontSize(newValue);
+  }
+
+  increaseFontSize() {
+    const newValue = this.state.fontSize + 2;
+    this.setFontSize(newValue);
+  }
+
   handleUpdateAutosave(event) {
     const value = event.target.value === 'true';
     this.props.setAutosave(value);
@@ -107,29 +137,31 @@ class Preferences extends React.Component {
               <h4 className="preference__title">Text size</h4>
               <button
                 className="preference__minus-button"
-                onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
+                onClick={this.decreaseFontSize}
                 aria-label="decrease font size"
-                disabled={this.props.fontSize <= 8}
+                disabled={this.state.fontSize <= 8}
               >
                 <InlineSVG src={minusUrl} alt="Decrease Font Size" />
                 <h6 className="preference__label">Decrease</h6>
               </button>
+              <form onSubmit={this.onFontInputSubmit}>
                 <input
                   className="preference__value"
                   aria-live="polite"
                   aria-atomic="true"
-                value={this.props.fontSize}
+                  value={this.state.fontSize}
-                onChange={this.handleUpdateFont}
+                  onChange={this.onFontInputChange}
                   ref={(element) => { this.fontSizeInput = element; }}
                   onClick={() => {
                     this.fontSizeInput.select();
                   }}
                 />
+              </form>
               <button
                 className="preference__plus-button"
-                onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
+                onClick={this.increaseFontSize}
                 aria-label="increase font size"
-                disabled={this.props.fontSize >= 36}
+                disabled={this.state.fontSize >= 36}
               >
                 <InlineSVG src={plusUrl} alt="Increase Font Size" />
                 <h6 className="preference__label">Increase</h6>