Cleanup for linting issues, and added last bit of focus handling for … (#304)

* Cleanup for linting issues, and added last bit of focus handling for selected modifications and specials

* added correct value for selectedRefId for utility slot section menu when Empty All selected

src/app/components/ModificationsMenu.jsx

@@ -43,13 +43,13 @@ export default class ModificationsMenu extends TranslatedComponent {
     this._rollBest = this._rollBest.bind(this);
     this._rollWorst = this._rollWorst.bind(this);
     this._reset = this._reset.bind(this);
-
     this._keyDown = this._keyDown.bind(this);
-
     this.modItems = [];// Array to hold various element refs (<li>, <div>, <ul>, etc.)
     this.firstModId = null;
     this.firstBPLabel = null;// First item in mod menu
     this.lastModId = null;
+    this.selectedModId = null;
+    this.selectedSpecialId = null;
     this.lastNeId = null;// Last number editor id. Used to set focus to last number editor when shift-tab pressed on first element in mod menu.
     this.modValDidChange = false; // used to determine if component update was caused by change in modification value.
     this._handleModChange = this._handleModChange.bind(this);
@@ -83,8 +83,7 @@ export default class ModificationsMenu extends TranslatedComponent {
         const close = this._blueprintSelected.bind(this, blueprintName, grade);
         const key = blueprintName + ':' + grade;
         const tooltipContent = blueprintTooltip(translate, blueprint.grades[grade], Modifications.modules[m.grp].blueprints[blueprintName].grades[grade].engineers, m.grp);
-
-
+        if (classes.indexOf('active') >= 0) this.selectedModId = key;
         blueprintGrades.unshift(<li key={key} tabIndex="0" data-id={key} className={classes} style={{ width: '2em' }} onMouseOver={termtip.bind(null, tooltipContent)} onMouseOut={tooltip.bind(null, null)} onClick={close} onKeyDown={this._keyDown} ref={modItem => this.modItems[key] = modItem}>{grade}</li>);
       }
       if (blueprintGrades) {
@@ -178,6 +177,7 @@ export default class ModificationsMenu extends TranslatedComponent {
         const classes = cn('button-inline-menu', {
           active: m.blueprint && m.blueprint.special && m.blueprint.special.edname == specialName
         });
+        if (classes.indexOf('active') >= 0) this.selectedSpecialId = specialName;
         const close = this._specialSelected.bind(this, specialName);
         if (m.blueprint && m.blueprint.name) {
           let tmp = {};
@@ -324,6 +324,8 @@ export default class ModificationsMenu extends TranslatedComponent {
     const { m, ship } = this.props;
     ship.clearModifications(m);
     ship.clearModuleBlueprint(m);
+    this.selectedModId = null;
+    this.selectedSpecialId = null;
     this.props.onChange();
   }
 
@@ -356,6 +358,13 @@ export default class ModificationsMenu extends TranslatedComponent {
   componentDidUpdate() {
     if (!this.modValDidChange) {
       if (this.modItems['modMainDiv'].children.length > 0) {
+        if (this.modItems[this.selectedModId]) {
+          this.modItems[this.selectedModId].focus();
+          return;
+        } else if (this.modItems[this.selectedSpecialId]) {
+          this.modItems[this.selectedSpecialId].focus();
+          return;
+        }
         let firstEleCn = this.modItems['modMainDiv'].children[0].className;
         if (firstEleCn.indexOf('button-inline-menu') >= 0) {
           this.modItems['modMainDiv'].firstElementChild.focus();

src/app/components/Slider.jsx

@@ -304,7 +304,7 @@ class TextInputBox extends React.Component {
       type:'number',
       readOnly: true,
       inputValue: this.props.percent * this.props.max
-    }
+    };
   }
   /**
    * 
@@ -339,6 +339,7 @@ class TextInputBox extends React.Component {
   }
   /**
    * Get the value in the text box
+   * @returns {number} inputValue Value of the input box 
    */
   _getValue() {
     return this.state.inputValue;
@@ -348,7 +349,7 @@ class TextInputBox extends React.Component {
    * values depending on what user
    * has selected
    * 
-   * @param {SyntheticEvent} event 
+   * @param {SyntheticEvent} event ReactJs onChange event
    */
   _handleChange(event) {
     if (event.target.value < 0) {
@@ -373,9 +374,13 @@ class TextInputBox extends React.Component {
         return;
     }
   }
+  /**
+   * Get the value in the text box
+   * @return {React.Component} Text Input component for Slider
+   */
   render() {
     let {  axisUnit, onChange, percent, scale } = this.props;
-    return <div style={this.state.divStyle}><input style={this.state.inputStyle} value={this._getValue()} min={this.state.min} max={this.props.max} onChange={this._handleChange} onKeyUp={this._keyup} tabIndex={this.state.tabIndex} maxLength={this.state.maxLength} size={this.state.size} onBlur={() => {this._handleBlur()}} onFocus={() => {this._handleFocus()}} type={this.state.type} ref={(ip) => this.sliderVal = ip}/><text className="primary upp" style={this.state.labelStyle}>{this.props.axisUnit}</text></div>;
+    return <div style={this.state.divStyle}><input style={this.state.inputStyle} value={this._getValue()} min={this.state.min} max={this.props.max} onChange={this._handleChange} onKeyUp={this._keyup} tabIndex={this.state.tabIndex} maxLength={this.state.maxLength} size={this.state.size} onBlur={() => {this._handleBlur();}} onFocus={() => {this._handleFocus();}} type={this.state.type} ref={(ip) => this.sliderVal = ip}/><text className="primary upp" style={this.state.labelStyle}>{this.props.axisUnit}</text></div>;
   }
 }
 

src/app/components/UtilitySlotSection.jsx

@@ -33,6 +33,7 @@ export default class UtilitySlotSection extends SlotSection {
    * Empty all utility slots and close the menu
    */
   _empty() {
+    this.selectedRefId = this.firstRefId;
     this.props.ship.emptyUtility();
     this.props.onChange();
     this._close();