Merge pull request #4673 from overleaf/msm-rename-project-onblur

Rename project on blur instead of canceling renaming

GitOrigin-RevId: fe58b48d5ab37357df33e970338e8b96c3ec1986

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 (

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')
     })
   })