From 721b22a1e9dad5aea17bb9dd3cd113c514630f8a Mon Sep 17 00:00:00 2001
From: Bartuccio Antoine <klmp200@klmp200.net>
Date: Wed, 12 Dec 2018 15:45:05 +0100
Subject: [PATCH] forum: improve search bar UX behavior

---
 forum/templates/forum/macros.jinja | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/forum/templates/forum/macros.jinja b/forum/templates/forum/macros.jinja
index a70881b0..6f287ebb 100644
--- a/forum/templates/forum/macros.jinja
+++ b/forum/templates/forum/macros.jinja
@@ -157,9 +157,31 @@
 
 {% macro display_search_bar() %}
 <form class="search_bar" action="{{ url('forum:search') }}" method="GET">
-    <input type="text" placeholder="{% trans %}Search{% endtrans %}" name="query"/>
-    <input type="checkbox" class="sreach_check" name="order" value="date" checked> {% trans %}Order by date{% endtrans %}<br>
+    <input type="text" id="forum_search_input" placeholder="{% trans %}Search{% endtrans %}" name="query"/>
+    <input type="checkbox" id="forum_search_order_date" class="sreach_check" name="order" value="date" checked> {% trans %}Order by date{% endtrans %}<br>
     <input type="submit" class="search_bouton" value="{% trans %}Search{% endtrans %}"/>
+    <script type="text/javascript">
+        // Uncheck the order by date checkbox if previously unchecked
+        const searchParams = new URLSearchParams(window.location.search);
+        var waitForJQuery = setInterval(function () {
+            if (typeof $ != 'undefined'){
+                fillSearchBar();
+                clearInterval(waitForJQuery);
+            }
+        }, 10);
+        function fillSearchBar() {
+            if (searchParams.has('query')){
+                $('#forum_search_input').val(searchParams.get('query'));
+            }
+            if (
+                   (!searchParams.has('order') && searchParams.has('query') )||
+                   (searchParams.has('order') && searchParams.get('order') != 'date')
+            ) {
+                $('#forum_search_order_date').removeAttr('checked');
+                clearInterval(waitForJQuery);
+            }
+        }
+    </script>
 
 </form>
 {% endmacro %}