Fix user stuck in title editing state (#1430)

* Fix user stuck in title editing state

* Fix test

src/components/common/EditableText.vue

@@ -3,6 +3,7 @@
     <span v-if="!props.isEditing">
       {{ modelValue }}
     </span>
+    <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
     <InputText
       v-else
       type="text"
@@ -10,7 +11,7 @@
       fluid
       v-model:modelValue="inputValue"
       ref="inputRef"
-      @keyup.enter="finishEditing"
+      @keyup.enter="blurInputElement"
       @click.stop
       :pt="{
         root: {
@@ -37,13 +38,12 @@ const props = withDefaults(defineProps<EditableTextProps>(), {
 
 const emit = defineEmits(['update:modelValue', 'edit'])
 const inputValue = ref<string>(props.modelValue)
-const isEditingFinished = ref<boolean>(false)
 const inputRef = ref(null)
+
+const blurInputElement = () => {
+  inputRef.value?.$el.blur()
+}
 const finishEditing = () => {
-  if (isEditingFinished.value) {
-    return
-  }
-  isEditingFinished.value = true
   emit('edit', inputValue.value)
 }
 watch(
@@ -51,7 +51,6 @@ watch(
   (newVal) => {
     if (newVal) {
       inputValue.value = props.modelValue
-      isEditingFinished.value = false
       nextTick(() => {
         if (!inputRef.value) return
         const fileName = inputValue.value.includes('.')

src/components/common/__tests__/EditableText.spec.ts

@@ -51,8 +51,10 @@ describe('EditableText', () => {
     })
     await wrapper.findComponent(InputText).setValue('New Text')
     await wrapper.findComponent(InputText).trigger('keyup.enter')
-    expect(wrapper.emitted('edit')).toBeTruthy()
-    expect(wrapper.emitted('edit')[0]).toEqual(['New Text'])
+    // Blur event should have been triggered
+    expect(wrapper.findComponent(InputText).element).not.toBe(
+      document.activeElement
+    )
   })
 
   it('finishes editing on blur', async () => {