From aa9f491db3abde8d1a1337cc9b989635b1080c22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 16 Sep 2021 17:44:52 +0200
Subject: [PATCH] Fix searchbar collapsing on input. Shold not happen with
 stimulus.

---
 .../Assets/js/controllers/searchbar_controller.js  | 11 +++++++++++
 .../Private/Templates/Searchbar/Index.html         | 14 ++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/searchbar_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/searchbar_controller.js
index 3e8c4096..f6fdf472 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/searchbar_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/searchbar_controller.js
@@ -4,6 +4,7 @@ import { useDispatch } from 'stimulus-use'
 export default class extends Controller {
 
     static targets = [
+        'container',
         'dateFrom',
         'dateTo',
         'destinationUid',
@@ -16,6 +17,8 @@ export default class extends Controller {
         'priceRangeLabel',
     ]
 
+    static values = { collapsed: Boolean }
+
     initialize() {
         useDispatch(this)
     }
@@ -68,4 +71,12 @@ export default class extends Controller {
             priceRange: this.priceRangeTarget.value,
         }
     }
+
+    toggle() {
+        this.collapsedValue = !this.collapsedValue
+    }
+
+    collapsedValueChanged() {
+        this.containerTarget.classList.toggle('hidden', this.collapsedValue === true)
+    }
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
index dc8501fa..6a7b2edd 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
@@ -3,11 +3,11 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <div data-controller="searchbar collapse"
+        <div data-controller="searchbar"
              <f:if condition="{collapsed}">
-                data-collapse-collapsed-value="true"
+                data-searchbar-collapsed-value="true"
              </f:if>
-             data-action="datepicker:range-select->searchbar#setDateRange searchbar-toggle:toggle@window->collapse#toggle">
+             data-action="datepicker:range-select->searchbar#setDateRange searchbar-toggle:toggle@window->searchbar#toggle">
             <f:form action="processSearch" controller="Search" method="post" name="searchParams"
                     object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
                     pageUid="{settings.defaultSearchPageUid}" data="{'searchbar-target': 'form'}">
@@ -18,7 +18,6 @@
                 <f:form.hidden property="destinationType" data="{'searchbar-target': 'destinationType'}"/>
                 <f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/>
                 <div class="searchbar{f:if(condition: collapsed, then: ' reduced hidden')}"
-                     data-collapse-target="container"
                 <f:if condition="{collapsed}">
                     <f:else>
                         data-controller="sticky"
@@ -27,7 +26,7 @@
                         data-sticky-classes-value="sticky reduced"
                     </f:else>
                 </f:if>
-                     data-searchbar-target="container">
+                    data-searchbar-target="container">
                     <div class="bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark">
                         <div class="reduced:max-w-screen-xl reduced:mx-auto reduced:px-4 flex flex-col reduced:flex-row reduced:items-center">
                             <div class="flex items-start justify-between reduced:flex-1 pt-8 px-8 reduced:px-0 reduced:py-4">
@@ -50,9 +49,8 @@
                                              data-action="click->collapse#toggle">
                                             <use href="#icon-calendar"></use>
                                         </svg>
-                                        <div
-                                            class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
-                                            data-collapse-target="container">
+                                        <div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
+                                             data-collapse-target="container">
                                             <div class="flex justify-between divide-x divide-gray-200">
                                                 <div class="pr-2">
                                                     <input type="hidden"