From 75ffab21602eda76803980d12ca68f7acd92307b Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 4 Nov 2024 21:59:40 -0500
Subject: [PATCH] Fix user stuck in title editing state (#1430)

* Fix user stuck in title editing state

* Fix test
---
 src/components/common/EditableText.vue              | 13 ++++++-------
 .../common/__tests__/EditableText.spec.ts           |  6 ++++--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/common/EditableText.vue b/src/components/common/EditableText.vue
index 991c0d2a8..affdd22f7 100644
--- a/src/components/common/EditableText.vue
+++ b/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('.')
diff --git a/src/components/common/__tests__/EditableText.spec.ts b/src/components/common/__tests__/EditableText.spec.ts
index abe9e7702..76f86cfc1 100644
--- a/src/components/common/__tests__/EditableText.spec.ts
+++ b/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 () => {