From 4194e8fa64ca1eb7408c91e9ac5c53562035d6c0 Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Thu, 21 May 2026 14:42:39 +0100
Subject: [PATCH] Improve return date UX on search form

Disable the return date input until Return journey type is selected.
Clicking anywhere in the return date group auto-selects Return and
enables the field. The return date min is kept in sync with the
outbound date, bumping the value forward if it would otherwise fall
before the outbound date.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 templates/base.html  |  1 +
 templates/index.html | 39 +++++++++++++++++++++++++++++----------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 5009f0c..02bf182 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -196,6 +196,7 @@
     /* Form groups */
     .form-group    { margin-bottom: 1.2rem; }
     .form-group-lg { margin-bottom: 1.5rem; }
+    #return-date-group:has(input:disabled) { cursor: pointer; }
 
     /* Buttons */
     .btn-primary {
diff --git a/templates/index.html b/templates/index.html
index 655d415..3a3317f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -70,13 +70,13 @@
         class="form-control">
     </div>
 
-    <div class="form-group-lg">
+    <div class="form-group-lg" id="return-date-group">
       <label for="return_date" class="field-label">
         Return date
       </label>
       <input type="date" id="return_date" name="return_date"
         min="{{ today }}" value="{{ default_return_date }}"
-        class="form-control">
+        class="form-control" disabled>
     </div>
 
     <div class="form-group">
@@ -108,6 +108,7 @@
   <script>
     (function() {
       var form = document.getElementById('search-form');
+      var travelDate = document.getElementById('travel_date');
       var returnDate = document.getElementById('return_date');
       var returnRadio = document.getElementById('journey-return');
       var journeyRadios = document.querySelectorAll('input[name="journey_type"]');
@@ -119,21 +120,39 @@
       }
 
       function syncReturnDate() {
-        returnDate.name = currentJourneyType() === 'return' ? returnDateName : '';
+        var isReturn = currentJourneyType() === 'return';
+        returnDate.name = isReturn ? returnDateName : '';
+        returnDate.disabled = !isReturn;
       }
 
-      returnDate.addEventListener('focus', function() {
-        returnRadio.checked = true;
-        syncReturnDate();
-      });
-      returnDate.addEventListener('change', function() {
-        returnRadio.checked = true;
-        syncReturnDate();
+      function updateReturnMin() {
+        if (travelDate.value) {
+          returnDate.min = travelDate.value;
+          if (returnDate.value < travelDate.value) {
+            returnDate.value = travelDate.value;
+          }
+        }
+      }
+
+      // Clicking anywhere in the return date group (including label/disabled input)
+      // activates return journey type and enables the field
+      document.getElementById('return-date-group').addEventListener('click', function() {
+        if (returnDate.disabled) {
+          returnRadio.checked = true;
+          syncReturnDate();
+          returnDate.focus();
+        }
       });
+
+      travelDate.addEventListener('change', updateReturnMin);
+
       journeyRadios.forEach(function(radio) {
         radio.addEventListener('change', syncReturnDate);
       });
+
       form.addEventListener('submit', syncReturnDate);
+
+      updateReturnMin();
       syncReturnDate();
     })();
   </script>