fix: create article on title blur instead of debounce (#14037)

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { debounce } from '@chatwoot/utils';
 import { useI18n } from 'vue-i18n';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
@@ -32,6 +32,7 @@ const emit = defineEmits([
   'setAuthor',
   'setCategory',
   'previewArticle',
+  'createArticle',
 ]);
 
 const { t } = useI18n();
@@ -57,16 +58,10 @@ const quickSave = debounce(
 // Only use to save for existing articles
 const saveAndSyncDebounced = debounce(saveAndSync, 2500, false);
 
-// Debounced save for new articles
-const quickSaveNewArticle = debounce(saveAndSync, 400, false);
-
 const handleSave = value => {
-  if (isNewArticle.value) {
+  if (isNewArticle.value) return;
-    quickSaveNewArticle(value);
+  quickSave(value);
-  } else {
+  saveAndSyncDebounced(value);
-    quickSave(value);
-    saveAndSyncDebounced(value);
-  }
 };
 
 const articleTitle = computed({
@@ -76,9 +71,12 @@ const articleTitle = computed({
   },
 });
 
+const localContent = ref(props.article.content || '');
+
 const articleContent = computed({
   get: () => props.article.content,
   set: content => {
+    localContent.value = content;
     handleSave({ content });
   },
 });
@@ -98,6 +96,14 @@ const setCategoryId = categoryId => {
 const previewArticle = () => {
   emit('previewArticle');
 };
+
+const handleCreateArticle = event => {
+  if (!isNewArticle.value) return;
+  const title = event?.target?.value || '';
+  if (title.trim()) {
+    emit('createArticle', { title, content: localContent.value });
+  }
+};
 </script>
 
 <template>
@@ -122,6 +128,7 @@ const previewArticle = () => {
           custom-text-area-wrapper-class="border-0 !bg-transparent dark:!bg-transparent !py-0 !px-0"
           placeholder="Title"
           autofocus
+          @blur="handleCreateArticle"
         />
         <ArticleEditorControls
           :article="article"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue

@@ -39,7 +39,7 @@ const createNewArticle = async ({ title, content }) => {
   if (title) article.value.title = title;
   if (content) article.value.content = content;
 
-  if (!article.value.title) return;
+  if (!article.value.title || isUpdating.value) return;
 
   isUpdating.value = true;
   try {
@@ -86,7 +86,7 @@ const goBackToArticles = () => {
     :article="article"
     :is-updating="isUpdating"
     :is-saved="isSaved"
-    @save-article="createNewArticle"
+    @create-article="createNewArticle"
     @go-back="goBackToArticles"
     @set-author="setAuthorId"
     @set-category="setCategoryId"