fix focus issue

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "resources/css/app.css": {
-    "file": "assets/app-eff15392.css",
+    "file": "assets/app-2c6e7578.css",
     "isEntry": true,
     "src": "resources/css/app.css"
   },
@@ -12,7 +12,7 @@
     "css": [
       "assets/app-a1ae07b3.css"
     ],
-    "file": "assets/app-a74f846c.js",
+    "file": "assets/app-5f99a92f.js",
     "isEntry": true,
     "src": "resources/js/app.js"
   }

resources/js/app.js

@@ -26,7 +26,9 @@ document.body.addEventListener('htmx:configRequest', (event) => {
     if (window.getSelection) { window.getSelection().removeAllRanges(); }
     else if (document.selection) { document.selection.empty(); }
 });
+let activeElement = null;
 document.body.addEventListener('htmx:beforeRequest', (event) => {
+    activeElement = document.activeElement;
     let targetElements = event.target.querySelectorAll('[hx-disable]');
     for (let i = 0; i < targetElements.length; i++) {
         targetElements[i].disabled = true;
@@ -38,6 +40,18 @@ document.body.addEventListener('htmx:afterRequest', (event) => {
         targetElements[i].disabled = false;
     }
 });
+document.body.addEventListener('htmx:afterSwap', (event) => {
+    tippy('[data-tooltip]', {
+        content(reference) {
+            return reference.getAttribute('data-tooltip');
+        },
+    });
+    if (activeElement) {
+        activeElement.blur();
+        activeElement.focus();
+        activeElement = null;
+    }
+});
 
 import toastr from 'toastr';
 window.toastr = toastr;
@@ -49,13 +63,6 @@ window.toastr.options = {
 
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
-document.body.addEventListener('htmx:afterSettle', (event) => {
-    tippy('[data-tooltip]', {
-        content(reference) {
-            return reference.getAttribute('data-tooltip');
-        },
-    });
-});
 tippy('[data-tooltip]', {
     content(reference) {
         return reference.getAttribute('data-tooltip');

resources/views/components/code-editor.blade.php

@@ -11,18 +11,13 @@
         disabled: @js($disabled),
         lang: @js($lang),
         init() {
-            document.body.addEventListener('htmx:afterSettle', (event) => {
             let editor = null
             let theme =
                 document.documentElement.className === 'dark'
                     ? 'one-dark'
                     : 'github'
-                editor = window.ace.edit(this.editorId, {
-                    tabSize: 1,
-                })
-                let contentElement = document.getElementById(
-                    `text-${this.editorId}`,
-                )
+            editor = window.ace.edit(this.editorId, {})
+            let contentElement = document.getElementById(`text-${this.editorId}`)
             editor.setValue(contentElement.innerText, 1)
             if (this.disabled) {
                 editor.setReadOnly(true)
@@ -38,7 +33,6 @@
                 theme = event.detail.theme === 'dark' ? 'one-dark' : 'github'
                 editor.setTheme(`ace/theme/${theme}`)
             })
-            })
         },
     }"
 >