diff --git a/src/app/components/ModificationsMenu.jsx b/src/app/components/ModificationsMenu.jsx
index 55dea6f6..6bf82707 100644
--- a/src/app/components/ModificationsMenu.jsx
+++ b/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 (
,
,
, 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(
this.modItems[key] = modItem}>{grade}
);
}
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();
@@ -455,7 +464,7 @@ export default class ModificationsMenu extends TranslatedComponent {
{ showRolls ?
-
{ translate('roll') }:
+
{ translate('roll') }:
{ translate('0%') }
{ translate('50%') }
{ translate('100%') }
diff --git a/src/app/components/Slider.jsx b/src/app/components/Slider.jsx
index 16a398f2..d36ca968 100644
--- a/src/app/components/Slider.jsx
+++ b/src/app/components/Slider.jsx
@@ -251,11 +251,11 @@ class TextInputBox extends React.Component {
*/
constructor(props) {
super(props);
- this._handleFocus = this._handleFocus.bind(this);
- this._handleBlur = this._handleBlur.bind(this);
- this._handleChange = this._handleChange.bind(this);
- this._keyup = this._keyup.bind(this);
- this.state = this._getInitialState();
+ this._handleFocus = this._handleFocus.bind(this);
+ this._handleBlur = this._handleBlur.bind(this);
+ this._handleChange = this._handleChange.bind(this);
+ this._keyup = this._keyup.bind(this);
+ this.state = this._getInitialState();
}
/**
* Update input value if slider changes will change props/state
@@ -263,10 +263,10 @@ class TextInputBox extends React.Component {
* @param {Object} nextState React Component state values
*/
componentWillReceiveProps(nextProps, nextState) {
- let nextValue = nextProps.percent * nextProps.max;
- // See https://stackoverflow.com/questions/32414308/updating-state-on-props-change-in-react-form
- if (nextValue !== this.state.inputValue && nextValue <= nextProps.max) {
- this.setState({ inputValue: nextValue });
+ let nextValue = nextProps.percent * nextProps.max;
+ // See https://stackoverflow.com/questions/32414308/updating-state-on-props-change-in-react-form
+ if (nextValue !== this.state.inputValue && nextValue <= nextProps.max) {
+ this.setState({ inputValue: nextValue });
}
}
/**
@@ -276,14 +276,14 @@ class TextInputBox extends React.Component {
*/
componentDidUpdate(prevProps, prevState) {
if (prevState.divStyle.display == 'none' && this.state.divStyle.display == 'block') {
- this.enterTimer = setTimeout(() => this.sliderVal.focus(), 10);
+ this.enterTimer = setTimeout(() => this.sliderVal.focus(), 10);
}
if (prevProps.max !== this.props.max && this.state.inputValue > this.props.max) {
- // they chose a different module
- this.setState({ inputValue: this.props.max });
+ // they chose a different module
+ this.setState({ inputValue: this.props.max });
}
if (this.state.inputValue != prevState.inputValue && prevProps.max == this.props.max) {
- this.props.onChange(this.state.inputValue/this.props.max);
+ this.props.onChange(this.state.inputValue / this.props.max);
}
}
/**
@@ -294,9 +294,9 @@ class TextInputBox extends React.Component {
*/
_getInitialState() {
return {
- divStyle: {display:'none'},
- inputStyle: {width:'4em'},
- labelStyle: {marginLeft: '.1em'},
+ divStyle: { display:'none' },
+ inputStyle: { width:'4em' },
+ labelStyle: { marginLeft: '.1em' },
maxLength:5,
size:5,
min:0,
@@ -304,7 +304,7 @@ class TextInputBox extends React.Component {
type:'number',
readOnly: true,
inputValue: this.props.percent * this.props.max
- }
+ };
}
/**
*
@@ -312,7 +312,7 @@ class TextInputBox extends React.Component {
*/
_setDisplay(val) {
this.setState({
- divStyle: {display:val}
+ divStyle: { display:val }
});
}
/**
@@ -330,7 +330,7 @@ class TextInputBox extends React.Component {
_handleBlur() {
this._setDisplay('none');
if (this.state.inputValue !== '') {
- this.props.onChange(this.state.inputValue/this.props.max);
+ this.props.onChange(this.state.inputValue / this.props.max);
} else {
this.setState({
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,15 +349,15 @@ 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) {
- this.setState({inputValue: 0});
+ this.setState({ inputValue: 0 });
} else if (event.target.value <= this.props.max) {
- this.setState({inputValue: event.target.value});
+ this.setState({ inputValue: event.target.value });
} else {
- this.setState({inputValue: this.props.max});
+ this.setState({ inputValue: this.props.max });
}
}
/**
@@ -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