fix: account for htmx issues in mobile safari with select fields

config/packages/twig.yaml

@@ -1,6 +1,8 @@
 twig:
     file_name_pattern: '*.twig'
     form_themes: ['forms.html.twig']
+    globals:
+        htmx_change_trigger: 'change delay:100ms'
 
 when@test:
     twig:

templates/booking/_participant_form.html.twig

@@ -241,7 +241,7 @@
                     participantIndex,
                     {
                         'attr': {
-                        'hx-trigger': 'change',
+                        'hx-trigger': htmx_change_trigger,
                         'hx-post': path(refreshRouteName, refreshRouteParams|default({index: participantIndex})),
                         'hx-target': '#main-content',
                         'hx-swap': 'innerHTML'
@@ -282,7 +282,7 @@
                 </h3>
                 {{ macros.field_or_static(form, 'assignedRoomId', 'Zimmer', roomLabel, bookingDto, participantIndex, {
                     'attr': {
-                        'hx-trigger': 'change',
+                        'hx-trigger': htmx_change_trigger,
                         'hx-post': path(refreshRouteName, refreshRouteParams|default({index: participantIndex})),
                         'hx-target': '#main-content',
                         'hx-swap': 'innerHTML'
@@ -302,7 +302,7 @@
             </h3>
             {{ macros.service_field(form, 'skiPass', 'Skipass', {
                 'attr': {
-                    'hx-trigger': 'change',
+                    'hx-trigger': htmx_change_trigger,
                     'hx-post': path(refreshRouteName, refreshRouteParams|default({index: participantIndex})),
                     'hx-target': '#main-content', 'hx-swap': 'innerHTML'
                 }
@@ -310,7 +310,7 @@
 
             {{ macros.service_field(form, 'courses', 'Kurse', {
                 'attr': {
-                    'hx-trigger': 'change',
+                    'hx-trigger': htmx_change_trigger,
                     'hx-post': path(refreshRouteName, refreshRouteParams|default({index: participantIndex})),
                     'hx-target': '#main-content', 'hx-swap': 'innerHTML'
                 }
@@ -318,7 +318,7 @@
 
             {{ macros.service_field(form, 'additionalServices', 'Zusatzleistungen', {
                 'attr': {
-                    'hx-trigger': 'change',
+                    'hx-trigger': htmx_change_trigger,
                     'hx-post': path(refreshRouteName, refreshRouteParams|default({index: participantIndex})),
                     'hx-target': '#main-content', 'hx-swap': 'innerHTML'
                 }
@@ -326,14 +326,14 @@
 
             {{ macros.service_field(form, 'board', 'Verpflegung', {
                 'attr': {
-                    'hx-trigger': 'change',
+                    'hx-trigger': htmx_change_trigger,
                     'hx-post': path(refreshRouteName, refreshRouteParams|default({index: participantIndex})),
                     'hx-target': '#main-content', 'hx-swap': 'innerHTML'
                 }
             }) }}
 
             {% set htmxAttr = {
-                'hx-trigger': 'change',
+                'hx-trigger': htmx_change_trigger,
                 'hx-post': path(refreshRouteName, refreshRouteParams|default({index: participantIndex})),
                 'hx-target': '#main-content',
                 'hx-swap': 'innerHTML'
@@ -557,7 +557,7 @@
             {% if form.transportationInbound is defined %}
                 {{ form_row(form.transportationInbound, {
                     'attr': {
-                        'hx-trigger': 'change',
+                        'hx-trigger': htmx_change_trigger,
                         'hx-post': path(refreshRouteName, refreshRouteParams|default({index: participantIndex})),
                         'hx-target': '#main-content', 'hx-swap': 'innerHTML'
                     }
@@ -566,7 +566,7 @@
             {% if form.pickup is defined %}
                 {{ form_row(form.pickup, {
                     'attr': {
-                        'hx-trigger': 'change',
+                        'hx-trigger': htmx_change_trigger,
                         'hx-post': path(refreshRouteName, refreshRouteParams|default({index: participantIndex})),
                         'hx-target': '#main-content', 'hx-swap': 'innerHTML'
                     }

templates/booking/create/step_1.html.twig

@@ -1,5 +1,7 @@
 {% extends 'layout_booking.html.twig' %}
 
+{% set htmx_change_trigger = 'change delay:300ms' %}
+
 {% macro stepFormField(form) %}
     <div class="grid grid-cols-3 pb-2">
         <div class="col-span-2 pr-2">
@@ -15,7 +17,7 @@
                 'attr': {
                     'hx-post': path('app_booking_create_step_1_refresh'),
                     'hx-swap': 'none',
-                    'hx-trigger': 'change delay:300ms',
+                    'hx-trigger': htmx_change_trigger,
                 }
             }) }}
         </div>

templates/booking/create/step_3.html.twig

@@ -40,7 +40,7 @@
                         {# Payment method selection with HTMX #}
                         <div id="form-payment"
                              hx-post="{{ path('app_booking_create_step_3_refresh') }}"
-                             hx-trigger="change"
+                             hx-trigger="{{ htmx_change_trigger }}"
                              hx-target="#form-payment"
                              hx-select="#form-payment"
                              hx-swap="outerHTML">