From a8c8b38f51f0f6c4e92792d8a2d3ef0cc73f43e0 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 13 Apr 2026 23:23:25 +0530
Subject: [PATCH] fix: create article on title blur instead of debounce
 (#14037)

---
 .../Pages/ArticleEditorPage/ArticleEditor.vue | 27 ++++++++++++-------
 .../pages/PortalsArticlesNewPage.vue          |  4 +--
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
index 4c4d95f0c..bdc6a56cb 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
+++ b/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) {
-    quickSaveNewArticle(value);
-  } else {
-    quickSave(value);
-    saveAndSyncDebounced(value);
-  }
+  if (isNewArticle.value) return;
+  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"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue
index 0c541fd19..baee8a2bb 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue
+++ b/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"