From e9e5c582f5061a9afba7421a41061bba00cf1122 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 01:39:43 -0500
Subject: [PATCH] Simplify modal initialization and fix display issue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed debugging code and aria-hidden event listeners that were
preventing the modal from displaying. Using Bootstrap's
getOrCreateInstance() to avoid modal instance conflicts.

Changes:
- Remove aria-hidden event listeners that blocked modal display
- Remove debugging console.log statements
- Use Modal.getOrCreateInstance() instead of new Modal()
- Simplify event handler to essential functionality only

The aria-hidden event listeners were preventing the modal from
showing properly. getOrCreateInstance() prevents duplicate modal
instances that can cause display issues.

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

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

diff --git a/app/views/layouts/shared/_header.html.erb b/app/views/layouts/shared/_header.html.erb
index 468dd5f..d3ff2f2 100755
--- a/app/views/layouts/shared/_header.html.erb
+++ b/app/views/layouts/shared/_header.html.erb
@@ -135,59 +135,28 @@
       const modalElement = document.getElementById('credentialsModal');
 
       if (showCredsBtn && modalElement) {
-        // Remove any existing listeners
+        // Remove any existing listeners by cloning
         const newBtn = showCredsBtn.cloneNode(true);
         showCredsBtn.parentNode.replaceChild(newBtn, showCredsBtn);
 
-        // Fix aria-hidden timing issue with Bootstrap 5
-        modalElement.addEventListener('hide.bs.modal', function() {
-          // Remove aria-hidden before the modal closes to prevent focus conflict
-          this.removeAttribute('aria-hidden');
-        });
-
-        modalElement.addEventListener('hidden.bs.modal', function() {
-          // Add aria-hidden back after modal is fully closed and focus has moved
-          setTimeout(() => {
-            this.setAttribute('aria-hidden', 'true');
-          }, 0);
-        });
-
-        modalElement.addEventListener('show.bs.modal', function() {
-          // Ensure aria-hidden is removed when opening
-          this.removeAttribute('aria-hidden');
-        });
-
         newBtn.addEventListener('click', function(event) {
           event.preventDefault();
-          console.log('Demo Credentials button clicked');
-          console.log('Bootstrap available:', typeof bootstrap !== 'undefined');
-          console.log('Modal element:', modalElement);
 
           fetch('<%= credentials_tutorials_path %>')
-            .then(response => {
-              console.log('Fetch response status:', response.status);
-              return response.text();
-            })
+            .then(response => response.text())
             .then(html => {
-              console.log('Content loaded, length:', html.length);
               document.getElementById('modal_content').innerHTML = html;
 
-              if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
-                const modal = new bootstrap.Modal(modalElement);
-                console.log('Modal instance created:', modal);
-                modal.show();
-              } else {
-                console.error('Bootstrap Modal not available');
-              }
+              // Use Bootstrap 5 Modal API directly
+              const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
+              modal.show();
             })
             .catch(error => {
               console.error('Error loading credentials:', error);
               document.getElementById('modal_content').innerHTML = '<p class="text-danger">Error loading credentials. Please try again.</p>';
 
-              if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
-                const modal = new bootstrap.Modal(modalElement);
-                modal.show();
-              }
+              const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
+              modal.show();
             });
         });
       }