fix(profile): remote destinations tab broken — lazy-init Bootstrap modal
Universal: PR Check / Branch Policy (pull_request) Successful in 2s
Joomla: Extension CI / Release Readiness Check (pull_request) Failing after 9s
Joomla: Extension CI / Lint & Validate (pull_request) Failing after 12s
Universal: PR Check / Secret Scan (pull_request) Successful in 11s
Generic: Repo Health / Site Health (pull_request) Has been skipped
Generic: Repo Health / Access control (pull_request) Successful in 3s
Universal: Pre-Release / Build Pre-Release (${{ inputs.stability || github.ref_name }}) (push) Successful in 34s
Generic: Project CI / Lint & Validate (pull_request) Successful in 18s
Universal: Build & Release / Promote to RC (pull_request) Failing after 15s
Universal: Build & Release / Build & Release Pipeline (pull_request) Has been skipped
Universal: PR Check / Validate PR (pull_request) Failing after 43s
Joomla: Metadata Validation / Validate Joomla Metadata (pull_request) Successful in 46s
Generic: Project CI / Tests (pull_request) Has been cancelled
Joomla: Extension CI / Tests (PHP 8.2) (pull_request) Has been cancelled
Joomla: Extension CI / Tests (PHP 8.3) (pull_request) Has been cancelled
Joomla: Extension CI / PHPStan Analysis (pull_request) Has been cancelled
Joomla: Extension CI / Build RC Pre-Release (pull_request) Has been cancelled
Universal: PR Check / Build RC Package (pull_request) Has been cancelled
Universal: PR Check / Report Issues (pull_request) Has been cancelled
Generic: Repo Health / Scripts governance (pull_request) Has been cancelled
Generic: Repo Health / Repository health (pull_request) Has been cancelled
Generic: Repo Health / Report: Scripts Governance (pull_request) Has been cancelled
Generic: Repo Health / Report: Repository Health (pull_request) Has been cancelled

The remote destinations table stayed stuck at "Loading…" and the "Add
Destination" button did nothing. Root cause: the profile-edit DOMContentLoaded
handler instantiated the Bootstrap modal eagerly at the top
(`bootstrap.Modal.getOrCreateInstance`). In Joomla 6, Bootstrap loads as a
deferred ES module, so `bootstrap` is undefined at DOMContentLoaded — the
reference threw a ReferenceError that aborted the entire handler, so
loadRemotes() never ran and the Add button was never bound. (The purge and
stepped-backup modals worked because they resolve the modal lazily inside
click handlers.)

- Resolve the modal lazily via getModal() at click-time (matches the working modals)
- Explicitly load the bootstrap.modal web asset so window.bootstrap.Modal is registered

Claude-Session: https://claude.ai/code/session_01WbGBN9VyRK61zczYWcCQ2i
This commit is contained in:
2026-07-04 16:58:14 -05:00
parent 939964bff9
commit 597e033f62
@@ -17,6 +17,7 @@ use Joomla\CMS\Session\Session;
HTMLHelper::_('behavior.formvalidator');
HTMLHelper::_('behavior.keepalive');
HTMLHelper::_('bootstrap.modal');
$profileId = (int) $this->item->id;
$token = Session::getFormToken();
@@ -274,7 +275,11 @@ document.addEventListener('DOMContentLoaded', function() {
const emptyMsg = document.getElementById('remoteDestEmpty');
const loadingTr = document.getElementById('remoteDestLoading');
const modalEl = document.getElementById('remoteModal');
const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
// Lazy: resolve the Bootstrap modal at click-time. Bootstrap loads as a
// deferred ES module, so `bootstrap` is not defined yet at DOMContentLoaded;
// referencing it here would throw and abort the whole handler (leaving the
// table stuck at "Loading…" and the Add button unbound).
const getModal = () => bootstrap.Modal.getOrCreateInstance(modalEl);
// Type badge colours
const typeBadge = {sftp: 'bg-primary', s3: 'bg-warning text-dark', google_drive: 'bg-success'};
@@ -507,7 +512,7 @@ document.addEventListener('DOMContentLoaded', function() {
}
updateTypeFields();
modal.show();
getModal().show();
}
// ---- Type selector toggles field visibility ----
@@ -587,7 +592,7 @@ document.addEventListener('DOMContentLoaded', function() {
return;
}
modal.hide();
getModal().hide();
loadRemotes();
})
.catch(() => {