From 1fb1c08348398c7bd8cf533014cccc2cbc408d15 Mon Sep 17 00:00:00 2001
From: June Kelly <shane@kilkelly.me>
Date: Wed, 11 Aug 2021 09:50:01 +0100
Subject: [PATCH] Merge pull request #4673 from
 overleaf/msm-rename-project-onblur

Rename project on blur instead of canceling renaming

GitOrigin-RevId: fe58b48d5ab37357df33e970338e8b96c3ec1986
---
 .../components/project-name-editable-label.js    | 12 +++++++++---
 .../project-name-editable-label.test.js          | 16 +++++++++++++---
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/project-name-editable-label.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/project-name-editable-label.js
index 54b457830b..a06a83279d 100644
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/project-name-editable-label.js
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/project-name-editable-label.js
@@ -34,11 +34,15 @@ function ProjectNameEditableLabel({
     }
   }
 
+  function finishRenaming() {
+    setIsRenaming(false)
+    onChange(inputContent)
+  }
+
   function handleKeyDown(event) {
     if (event.key === 'Enter') {
       event.preventDefault()
-      setIsRenaming(false)
-      onChange(event.target.value)
+      finishRenaming()
     }
   }
 
@@ -47,7 +51,9 @@ function ProjectNameEditableLabel({
   }
 
   function handleBlur() {
-    setIsRenaming(false)
+    if (isRenaming) {
+      finishRenaming()
+    }
   }
 
   return (
diff --git a/services/web/test/frontend/features/editor-navigation-toolbar/components/project-name-editable-label.test.js b/services/web/test/frontend/features/editor-navigation-toolbar/components/project-name-editable-label.test.js
index d172ac56e9..cb7de63733 100644
--- a/services/web/test/frontend/features/editor-navigation-toolbar/components/project-name-editable-label.test.js
+++ b/services/web/test/frontend/features/editor-navigation-toolbar/components/project-name-editable-label.test.js
@@ -43,11 +43,21 @@ describe('<ProjectNameEditableLabel />', function () {
       expect(props.onChange).to.be.calledWith('new project name')
     })
 
-    it('cancels renaming when the input loses focus', function () {
-      render(<ProjectNameEditableLabel {...editableProps} />)
+    it('calls "onChange" when the input loses focus', function () {
+      const props = {
+        ...editableProps,
+        onChange: sinon.stub(),
+      }
+      render(<ProjectNameEditableLabel {...props} />)
+
       fireEvent.doubleClick(screen.getByText('test-project'))
+      const input = screen.getByRole('textbox')
+
+      fireEvent.change(input, { target: { value: 'new project name' } })
+
       fireEvent.blur(screen.getByRole('textbox'))
-      expect(screen.queryByRole('textbox')).to.not.exist
+
+      expect(props.onChange).to.be.calledWith('new project name')
     })
   })