From ed298eac380340c51b3f3c65a459610003098af7 Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Tue, 23 Jun 2026 09:08:15 +0100
Subject: [PATCH] Fixed Create Ticket

---
 .../views/livewire/ticket-create.blade.php    | 46 +++++++++++--------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
index 3132cbf3..b835fa53 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
@@ -363,47 +363,50 @@
             outline: none;
         }
     </style>
+    @script
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
+        const initialiseHelpdeskTicketCreate = function () {
             const form = document.querySelector('.helpdesk-ticket-form');
             const editor = document.querySelector('[data-helpdesk-details-editor]');
             const bodyField = document.getElementById('body');
 
-            if (!form || !editor || !bodyField) {
+            if (! form || ! editor || ! bodyField || form.dataset.editorReady === 'true') {
                 return;
             }
 
-            const syncBody = function() {
-                bodyField.value = editor.innerHTML.trim();
-                bodyField.dispatchEvent(new Event('input', {
-                    bubbles: true
-                }));
-                bodyField.dispatchEvent(new Event('change', {
-                    bubbles: true
-                }));
+            form.dataset.editorReady = 'true';
+
+            const syncBody = function () {
+                const value = editor.innerHTML.trim();
+
+                bodyField.value = value;
+                bodyField.dispatchEvent(new Event('input', { bubbles: true }));
+                bodyField.dispatchEvent(new Event('change', { bubbles: true }));
+
+                @this.set('body', value, false);
             };
 
-            document.querySelectorAll('[data-helpdesk-editor-command]').forEach(function(button) {
-                button.addEventListener('click', function() {
+            document.querySelectorAll('[data-helpdesk-editor-command]').forEach(function (button) {
+                button.addEventListener('click', function () {
                     editor.focus();
                     document.execCommand(button.dataset.helpdeskEditorCommand, false, null);
                     syncBody();
                 });
             });
 
-            document.querySelectorAll('[data-helpdesk-editor-format]').forEach(function(button) {
-                button.addEventListener('click', function() {
+            document.querySelectorAll('[data-helpdesk-editor-format]').forEach(function (button) {
+                button.addEventListener('click', function () {
                     editor.focus();
                     document.execCommand('formatBlock', false, button.dataset.helpdeskEditorFormat);
                     syncBody();
                 });
             });
 
-            document.querySelectorAll('[data-helpdesk-editor-link]').forEach(function(button) {
-                button.addEventListener('click', function() {
+            document.querySelectorAll('[data-helpdesk-editor-link]').forEach(function (button) {
+                button.addEventListener('click', function () {
                     const url = window.prompt('Enter link URL');
 
-                    if (!url) {
+                    if (! url) {
                         return;
                     }
 
@@ -413,8 +416,15 @@
                 });
             });
 
+            editor.addEventListener('input', syncBody);
+            editor.addEventListener('keyup', syncBody);
             editor.addEventListener('blur', syncBody);
             form.addEventListener('submit', syncBody, true);
-        });
+        };
+
+        initialiseHelpdeskTicketCreate();
+
+        document.addEventListener('livewire:navigated', initialiseHelpdeskTicketCreate);
     </script>
+    @endscript
 </div>