From c42cedbcdca53e3a020a381fcc53827915dcc7c6 Mon Sep 17 00:00:00 2001
From: Alexandre Bourdin <abourdin@users.noreply.github.com>
Date: Mon, 26 Sep 2022 10:57:18 +0200
Subject: [PATCH] Merge pull request #9623 from
 overleaf/mf-enter-submit-create-project

Create new project upon pressing 'Enter' key in new project modal

GitOrigin-RevId: 754572613d805e87b6746d5f38e9543e76e617e8
---
 .../modal-content-new-project-form.tsx        | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx b/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx
index b9099b6c11..575e8f43cb 100644
--- a/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx
+++ b/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { Alert, Button, FormControl, Modal } from 'react-bootstrap'
+import React, { useState } from 'react'
+import { Alert, Button, Form, FormControl, Modal } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import useAsync from '../../../../shared/hooks/use-async'
 import {
@@ -54,6 +54,11 @@ function ModalContentNewProjectForm({ onCancel, template = 'none' }: Props) {
     setProjectName(e.currentTarget.value)
   }
 
+  const handleSubmit = (e: React.FormEvent<Form>) => {
+    e.preventDefault()
+    createNewProject()
+  }
+
   return (
     <>
       <Modal.Header closeButton>
@@ -64,14 +69,16 @@ function ModalContentNewProjectForm({ onCancel, template = 'none' }: Props) {
         {isError && (
           <Alert bsStyle="danger">{getUserFacingMessage(error)}</Alert>
         )}
-        <input
-          type="text"
-          className="form-control"
-          ref={autoFocusedRef}
-          placeholder={t('project_name')}
-          onChange={handleChangeName}
-          value={projectName}
-        />
+        <Form onSubmit={handleSubmit}>
+          <input
+            type="text"
+            className="form-control"
+            ref={autoFocusedRef}
+            placeholder={t('project_name')}
+            onChange={handleChangeName}
+            value={projectName}
+          />
+        </Form>
       </Modal.Body>
 
       <Modal.Footer>