diff --git a/packages/learn/src/templates/Challenges/project/ProjectForm.js b/packages/learn/src/templates/Challenges/project/ProjectForm.js index 7567f7df773..82f94b20ae1 100644 --- a/packages/learn/src/templates/Challenges/project/ProjectForm.js +++ b/packages/learn/src/templates/Challenges/project/ProjectForm.js @@ -36,17 +36,61 @@ const options = { }; export class ProjectForm extends PureComponent { + constructor(props) { + super(props); + this.state = { + keysDown: { + Control: false, + Enter: false + } + }; + this.handleKeyDown = this.handleKeyDown.bind(this); + this.handleKeyUp = this.handleKeyUp.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } componentDidMount() { this.props.updateProjectForm({}); + window.addEventListener('keydown', this.handleKeyDown); + window.addEventListener('keyup', this.handleKeyUp); } componentDidUpdate() { this.props.updateProjectForm({}); } - handleSubmit = values => { - this.props.openModal('completion'); - this.props.updateProjectForm(values); - }; - + componentWillUnmount() { + window.removeEventListener('keydown', this.handleKeyDown); + window.removeEventListener('keyup', this.handleKeyUp); + } + handleKeyDown(e) { + if (e.key === 'Control') { + this.setState(state => ({ + ...state, keysDown: { ...state.keysDown, Control: true } + })); + } + if (e.key === 'Enter') { + this.setState(state => ({ + ...state, keysDown: { ...state.keysDown, Enter: true } + })); + } + } + handleKeyUp(e) { + if (e.key === 'Control') { + this.setState(state => ({ + ...state, keysDown: { ...state.keysDown, Control: false } + })); + } + if (e.key === 'Enter') { + this.setState(state => ({ + ...state, keysDown: { ...state.keysDown, Enter: false } + })); + } + } + handleSubmit(values) { + const { keysDown: { Control, Enter } } = this.state; + if (Control && Enter || !Enter) { + this.props.openModal('completion'); + this.props.updateProjectForm(values); + } + } render() { const { isSubmitting, isFrontEnd } = this.props; const buttonCopy = isSubmitting