Fix modal not displaying by disposing stale instances

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>
This commit is contained in:
Ken Johnson
2025-12-07 01:45:07 -05:00
parent e9e5c582f5
commit 0c4533a88a
+18 -4
View File
@@ -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();
});
});