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

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>