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:
@@ -147,15 +147,29 @@
|
|||||||
.then(html => {
|
.then(html => {
|
||||||
document.getElementById('modal_content').innerHTML = html;
|
document.getElementById('modal_content').innerHTML = html;
|
||||||
|
|
||||||
// Use Bootstrap 5 Modal API directly
|
// Dispose of any existing modal instance first
|
||||||
const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
|
const existingModal = bootstrap.Modal.getInstance(modalElement);
|
||||||
modal.show();
|
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 => {
|
.catch(error => {
|
||||||
console.error('Error loading credentials:', error);
|
console.error('Error loading credentials:', error);
|
||||||
document.getElementById('modal_content').innerHTML = '<p class="text-danger">Error loading credentials. Please try again.</p>';
|
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();
|
modal.show();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user