Ensure components are initiated when a page uses Turbo

Author: paulrobertlloyd

app/assets/javascripts/application.js

@@ -1,6 +1,7 @@
 import "@hotwired/turbo-rails";
 import {
   createAll,
+  isSupported,
   Button,
   Checkboxes,
   ErrorSummary,
@@ -15,8 +16,7 @@ import { UpgradedRadios as Radios } from "./components/radios.js";
 // Configure Turbo
 Turbo.session.drive = false;
 
-// Initiate NHS.UK frontend components on page load
-document.addEventListener("DOMContentLoaded", () => {
+function initializeComponents() {
   createAll(Autocomplete);
   createAll(Button, { preventDoubleClick: true });
   createAll(Checkboxes);
@@ -25,4 +25,30 @@ document.addEventListener("DOMContentLoaded", () => {
   createAll(Radios);
   createAll(NotificationBanner);
   createAll(SkipLink);
+}
+
+// Initiate components once page has loaded
+document.addEventListener("DOMContentLoaded", () => {
+  initializeComponents();
+});
+
+// Reinitialize components when Turbo loads (and preloads) a page
+document.addEventListener("turbo:load", (event) => {
+  // Skip if initial page load (already handled by DOMContentLoaded)
+  if (event.detail?.timing?.visitStart) {
+    if (!isSupported()) {
+      document.body.classList.add("nhsuk-frontend-supported");
+    }
+
+    initializeComponents();
+  }
+});
+
+// Reinitialize components when Turbo morphs a page
+document.addEventListener("turbo:morph", () => {
+  if (!isSupported()) {
+    document.body.classList.add("nhsuk-frontend-supported");
+  }
+
+  initializeComponents();
 });