refactor: don't use anchor link in form action (#2032)

mbta · May 7, 2024 · fd9adcd · fd9adcd
1 parent 91c70fc
commit fd9adcd
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -59,6 +59,14 @@ Hooks.AlgoliaAutocomplete = {
     setupAlgoliaAutocomplete(this.el);
   }
 };
+Hooks.ScrollIntoView = {
+  // FIXME: This shouldn't need a hook; it could be implemented with
+  // `phx-mounted={JS.dispatch("scrollIntoView", to: #element)}` and a window
+  // event listener.
+  mounted() {
+    this.el.scrollIntoView({ behavior: "smooth" });
+  }
+};
 let liveSocket = new LiveSocket("/live", Socket, {
   params: { _csrf_token: csrfToken },
   hooks: Hooks

diff --git a/lib/dotcom_web/templates/partial/_trip_planner_widget.html.eex b/lib/dotcom_web/templates/partial/_trip_planner_widget.html.eex
@@ -17,7 +17,7 @@
   <%= if assigns[:text] do %>
     <p><%= @text %></p>
   <% end %>
-  <%= form_for @conn, "/trip-planner"<>"#plan_result_focus", form_options, fn _ -> %>
+  <%= form_for @conn, "/trip-planner", form_options, fn _ -> %>
   <%= DotcomWeb.TripPlanView.render("_to_from_inputs.html", Map.merge(assigns, %{ from_error: from_error, to_error: to_error, from_position: from_position, to_position: to_position })) %>
   <%= DotcomWeb.TripPlanView.render("_submit_button.html", assigns) %>
   <% end %>

diff --git a/lib/dotcom_web/templates/trip_plan/_sidebar.html.eex b/lib/dotcom_web/templates/trip_plan/_sidebar.html.eex
@@ -30,7 +30,7 @@
   <%= render "_error.html", plan_error: plan_error %>
   <div class="m-trip-plan__form-container callout">
     <%= render "_mobile_trip_summary.html", query: query, itineraries?: itineraries? %>
-    <%= form_for @conn, @conn.request_path<>"#plan_result_focus", form_options, fn f -> %>
+    <%= form_for @conn, @conn.request_path, form_options, fn f -> %>
       <%= render "_to_from_inputs.html", Map.merge(assigns, to_from_assigns)  %>
       <%= render "_options.html", conn: @conn, parent_form: f, errors: plan_error, query: query, modes: @modes, wheelchair: @wheelchair, plan_datetime_selector_fields: @plan_datetime_selector_fields %>
       <%= render "_submit_button.html" %>

diff --git a/lib/dotcom_web/templates/trip_plan/index.html.eex b/lib/dotcom_web/templates/trip_plan/index.html.eex
@@ -6,7 +6,7 @@
       <link rel="stylesheet" href="<%= static_url(@conn, "/css/map.css") %>">
       <%= case assigns[:query] do %>
        <% %{itineraries: {:ok, _}} -> %>
-          <p class="no-trips page-section">
+          <p class="no-trips page-section" autofocus phx-hook="ScrollIntoView">
             <% l = length(@itineraries) %>
             <%= "We found #{l} #{Inflex.inflect("trip", l)} for you" %>
           </p>