From 5b75a165ce5e3bae00fc6ddcd07155ef7a851954 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 9 Dec 2025 11:42:31 +0100
Subject: [PATCH] fix: account for htmx issues in mobile safari with select
 fields

---
 config/packages/twig.yaml                     |  2 ++
 templates/booking/_participant_form.html.twig | 18 +++++++++---------
 templates/booking/create/step_1.html.twig     |  4 +++-
 templates/booking/create/step_3.html.twig     |  2 +-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
index 1b672d8..029d094 100644
--- a/config/packages/twig.yaml
+++ b/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:
diff --git a/templates/booking/_participant_form.html.twig b/templates/booking/_participant_form.html.twig
index 36d0d44..070e35a 100644
--- a/templates/booking/_participant_form.html.twig
+++ b/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'
                     }
diff --git a/templates/booking/create/step_1.html.twig b/templates/booking/create/step_1.html.twig
index 16519d2..39aabcf 100644
--- a/templates/booking/create/step_1.html.twig
+++ b/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>
diff --git a/templates/booking/create/step_3.html.twig b/templates/booking/create/step_3.html.twig
index 70b0701..32a9e71 100644
--- a/templates/booking/create/step_3.html.twig
+++ b/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">