Fix modal bug

app/javascript/application.js

@@ -6,13 +6,16 @@ import "@uswds/uswds"
 
 // make sure USWDS components are wired to their behavior after a Turbo navigation
 import components from "@uswds/uswds/src/js/components"
-let initialLoad = true;
+
 document.addEventListener("turbo:load", () => {
-  if (initialLoad) {
+  this.initialLoad = true;
+
+  if (this.initialLoad) {
     // initial domready is handled by `import "uswds"` code
-    initialLoad = false
-    return
+    this.initialLoad = false
+    return;
   }
+
   const target = document.body
   Object.keys(components).forEach((key) => {
     const behavior = components[key]

app/views/cbv_flows/employer_search.html.erb

@@ -11,9 +11,9 @@
     <%= f.label :query, "Search for your employer", class: "usa-sr-only" %>
     <%= f.text_field :query, class: "usa-input", type: 'search', data: { "cbv-flows-target": "searchTerms" } %>
     <a
-      href="#example-modal-3"
+      href="#data-fetching-modal"
       class="display-none"
-      aria-controls="example-modal-3"
+      aria-controls="data-fetching-modal"
       data-open-modal
       data-cbv-flows-target="modal"
     ></a>
@@ -34,11 +34,10 @@
   <h3 class="site-preview-heading margin-bottom-2">Results</h3>
   <%= render partial: 'employer', locals: { employer: @employers } %>
 
-
   <div class="margin-y-3">
     <div
       class="usa-modal"
-      id="example-modal-3"
+      id="data-fetching-modal"
       aria-labelledby="modal-3-heading"
       aria-describedby="modal-3-description"
       data-force-action