fix: avoid form jumping to top after making a selection

src/Controller/Groups/Step2Controller.php

@@ -72,7 +72,7 @@ class Step2Controller extends AbstractAccommodationController
 
         return $this->htmxOobResponse(
             'groups/booking/step_2.html.twig',
-            ['accommodation_form', 'accommodation_summary'],
+            ['booking_form', 'accommodation_summary'],
             ['dto' => $dto, 'ctx' => $ctx, 'form' => $form->createView()],
         );
     }

templates/groups/booking/step_2.html.twig

@@ -33,21 +33,48 @@
             {# Main form #}
             {% block accommodation_form %}
                 <div id="accommodation-form"
-                     class="flex-1 order-2 lg:order-1 lg:col-span-3 bg-white flex flex-col min-h-0"
+                     class="flex-1 order-2 lg:order-1 lg:col-span-3 bg-white flex flex-col min-h-0">
-                     {% if htmx_oob_swap is defined and htmx_oob_swap %}hx-swap-oob="true"{% endif %}>
-
-                    {% include '_partials/_flashes.html.twig' %}
 
                     {# Pagination - desktop only (fixed above scrollable content) #}
                     <div class="hidden lg:block shrink-0">
                         {% include 'groups/booking/_pagination.html.twig' with { 'current_step': 2 } %}
                     </div>
 
-                    <div id="participant-form"
+                    {# The scroll container itself must survive the htmx refresh — only its contents
+                       are swapped, so assets/loading.js can restore the scroll position. #}
+                    <div id="booking-form"
                          class="flex-1 overflow-y-auto px-4 lg:px-8 py-8"
                          hx-post="{{ path('app_groups_booking_step_2_refresh') }}"
                          hx-trigger="change delay:300ms"
-                         hx-swap="none">
+                         hx-target="#booking-form"
+                         hx-swap="innerHTML">
+                        {{ block('booking_form') }}
+                    </div>
+                </div>
+            {% endblock %}
+
+        </div>
+
+        <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
+            <div class="flex items-center justify-between">
+                <a href="{{ path('app_groups_booking_step_1') }}" class="button button--secondary">
+                    Zurück
+                </a>
+                <button type="submit" class="button button--primary">
+                    Weiter zu Schritt 3
+                </button>
+            </div>
+        </div>
+
+    {{ form_rest(form) }}
+    {{ form_end(form) }}
+{% endblock %}
+
+{# Swapped into #booking-form on every htmx refresh #}
+{% block booking_form %}
+
+    {# Flash messages - must be inside the swapped region to be displayed #}
+    {% include '_partials/_flashes.html.twig' %}
 
     {# Validation errors #}
     {% from '_partials/_validation_errors.html.twig' import validation_alert %}
@@ -201,23 +228,4 @@
 
     {% endif %}
 
-                    </div>
-                </div>
-            {% endblock %}
-
-        </div>
-
-        <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
-            <div class="flex items-center justify-between">
-                <a href="{{ path('app_groups_booking_step_1') }}" class="button button--secondary">
-                    Zurück
-                </a>
-                <button type="submit" class="button button--primary">
-                    Weiter zu Schritt 3
-                </button>
-            </div>
-        </div>
-
-    {{ form_rest(form) }}
-    {{ form_end(form) }}
 {% endblock %}

templates/groups/booking/step_3.html.twig

@@ -36,7 +36,7 @@
                     {% include 'groups/booking/_pagination.html.twig' with { 'current_step': 3 } %}
                 </div>
 
-                <div id="participant-form" class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+                <div id="booking-form" class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
                     <h2 class="pb-4">
                         Persönliche Daten
                     </h2>