Fix searchbar collapsing on input. Shold not happen with stimulus.

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)
+    }
 }

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"
@@ -50,8 +49,7 @@
                                              data-action="click->collapse#toggle">
                                             <use href="#icon-calendar"></use>
                                         </svg>
-                                        <div
+                                        <div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
-                                            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">