team-alpha/railsgoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify modal initialization and fix display issue

Browse Source 
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>
This commit is contained in:
Ken Johnson
2025-12-07 01:39:43 -05:00
parent b6fa2db72e
commit e9e5c582f5
1 changed files with 7 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/layouts/shared/_header.html.erb
+7 -38
View File
@@ -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();
});
});
}