From 0c4533a88addd17a6ea0c0ab5413c8de699a2606 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 01:45:07 -0500
Subject: [PATCH] Fix modal not displaying by disposing stale instances
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed modal showing backdrop but not the modal itself by explicitly
disposing old instances and adding a timing delay.

Changes:
- Dispose of existing modal instance before creating new one
- Create fresh modal with explicit options (backdrop, keyboard, focus)
- Add 10ms setTimeout before show() to ensure DOM readiness
- Remove getOrCreateInstance which was causing conflicts

The modal was creating a backdrop but staying display:none because
getOrCreateInstance was returning a stale modal instance that couldn't
properly transition. Disposing and recreating fixes this.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/layouts/shared/_header.html.erb | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/views/layouts/shared/_header.html.erb b/app/views/layouts/shared/_header.html.erb
index d3ff2f2..08ab102 100755
--- a/app/views/layouts/shared/_header.html.erb
+++ b/app/views/layouts/shared/_header.html.erb
@@ -147,15 +147,29 @@
             .then(html => {
               document.getElementById('modal_content').innerHTML = html;
 
-              // Use Bootstrap 5 Modal API directly
-              const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
-              modal.show();
+              // Dispose of any existing modal instance first
+              const existingModal = bootstrap.Modal.getInstance(modalElement);
+              if (existingModal) {
+                existingModal.dispose();
+              }
+
+              // Create fresh modal instance and show
+              const modal = new bootstrap.Modal(modalElement, {
+                backdrop: true,
+                keyboard: true,
+                focus: true
+              });
+
+              // Force show after a small delay to ensure DOM is ready
+              setTimeout(() => {
+                modal.show();
+              }, 10);
             })
             .catch(error => {
               console.error('Error loading credentials:', error);
               document.getElementById('modal_content').innerHTML = '<p class="text-danger">Error loading credentials. Please try again.</p>';
 
-              const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
+              const modal = new bootstrap.Modal(modalElement);
               modal.show();
             });
         });