diff --git a/client/src/templates/Challenges/classic/Editor.js b/client/src/templates/Challenges/classic/Editor.js
index a12ce73abf..29322e747d 100644
--- a/client/src/templates/Challenges/classic/Editor.js
+++ b/client/src/templates/Challenges/classic/Editor.js
@@ -105,6 +105,7 @@ class Editor extends Component {
};
this._editor = null;
+ this.focusOnEditor = this.focusOnEditor.bind(this);
}
editorWillMount = monaco => {
@@ -145,6 +146,10 @@ class Editor extends Component {
}
}
+ focusOnEditor() {
+ this._editor.focus();
+ }
+
onChange = editorValue => {
const { updateFile, fileKey } = this.props;
updateFile({ key: fileKey, editorValue });
@@ -179,7 +184,11 @@ class Editor extends Component {
Editor.displayName = 'Editor';
Editor.propTypes = propTypes;
+// NOTE: withRef gets replaced by forwardRef in react-redux 6,
+// https://github.com/reduxjs/react-redux/releases/tag/v6.0.0
export default connect(
mapStateToProps,
- mapDispatchToProps
+ mapDispatchToProps,
+ null,
+ { withRef: true }
)(Editor);
diff --git a/client/src/templates/Challenges/classic/Show.js b/client/src/templates/Challenges/classic/Show.js
index d5d3fc2389..6c8886ff8a 100644
--- a/client/src/templates/Challenges/classic/Show.js
+++ b/client/src/templates/Challenges/classic/Show.js
@@ -105,6 +105,7 @@ class ShowClassic extends Component {
};
this.containerRef = React.createRef();
+ this.editorRef = React.createRef();
}
onResize() {
this.setState({ resizing: true });
@@ -222,6 +223,7 @@ class ShowClassic extends Component {
challengeFile && (
@@ -259,6 +261,7 @@ class ShowClassic extends Component {
} = this.props;
return (
{
+ e.preventDefault();
+ if (editorRef && editorRef.current) {
+ editorRef.current.getWrappedInstance().focusOnEditor();
+ }
+ },
NAVIGATION_MODE: () => setEditorFocusability(false),
NAVIGATE_PREV: () => {
if (!canFocusEditor) navigate(prevChallengePath);