Fixed missing dropdown after some link navigations

assets/css/components/autocomplete_bootstrap.css

@@ -1,106 +0,0 @@
-/*
- * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
- *
- *  Copyright (C) 2019 - 2024 Jan Böhmer (https://github.com/jbtronics)
- *
- *  This program is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU Affero General Public License as published
- *  by the Free Software Foundation, either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  This program is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU Affero General Public License for more details.
- *
- *  You should have received a copy of the GNU Affero General Public License
- *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-/***
- * Override some styles from the algolia autocomplete library to harmonize more with the bootstrap theme
- */
-
-/** Ensure that the autocomplete dropdown is always on top */
-.aa-Panel {
-    z-index: 1000;
-}
-
-/** Use a form definition similar to bootstraps form-control */
-.aa-Form {
-    background-color: var(--bs-body-bg);
-    border: var(--bs-border-width) solid var(--bs-border-color);
-    border-radius: var(--bs-border-radius);
-    color: var(--bs-body-color);
-    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-
-}
-
-.aa-Form:focus-within {
-    background-color: var(--bs-body-bg);
-    border-color: #86b7fe;
-    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
-    color: var(--bs-body-color);
-    outline: 0;
-}
-
-/** Use a panel definition similar to bootstraps dropdown */
-.aa-Panel {
-    --bs-dropdown-zindex: 1000;
-    --bs-dropdown-min-width: 10rem;
-    --bs-dropdown-padding-x: 0;
-    --bs-dropdown-padding-y: 0.5rem;
-    --bs-dropdown-spacer: 0.125rem;
-    --bs-dropdown-font-size: 1rem;
-    --bs-dropdown-color: var(--bs-body-color);
-    --bs-dropdown-bg: var(--bs-body-bg);
-    --bs-dropdown-border-color: var(--bs-border-color-translucent);
-    --bs-dropdown-border-radius: var(--bs-border-radius);
-    --bs-dropdown-border-width: var(--bs-border-width);
-    --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
-    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
-    --bs-dropdown-divider-margin-y: 0.5rem;
-    --bs-dropdown-box-shadow: var(--bs-box-shadow);
-    --bs-dropdown-link-color: var(--bs-body-color);
-    --bs-dropdown-link-hover-color: var(--bs-body-color);
-    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
-    --bs-dropdown-link-active-color: #fff;
-    --bs-dropdown-link-active-bg: #0d6efd;
-    --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
-    --bs-dropdown-item-padding-x: 1rem;
-    --bs-dropdown-item-padding-y: 0.25rem;
-    --bs-dropdown-header-color: #6c757d;
-    --bs-dropdown-header-padding-x: 1rem;
-    --bs-dropdown-header-padding-y: 0.5rem;
-
-    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
-    margin: 0;
-    font-size: var(--bs-dropdown-font-size);
-    color: var(--bs-dropdown-color);
-    background-color: var(--bs-dropdown-bg);
-    background-clip: padding-box;
-    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
-    border-radius: var(--bs-dropdown-border-radius);
-}
-
-:root {
-    /** Font colors */
-    --aa-text-color-rgb: var(--bs-body-color-rgb);
-    --aa-primary-color-rgb: var(--bs-primary-text-emphasis);
-    --aa-muted-color-rgb: var(--bs-secondary-text-emphasis);
-
-    /** Border colors */
-    --aa-panel-border-color-rgb: var(--bs-dropdown-border-color);
-    --aa-input-border-color-rgb: var(--bs-border-color);
-    --aa-input-border-color-alpha: 1.0;
-
-    /* Background colors */
-    --aa-background-color-rgb: var(--bs-dropdown-bg);
-    --aa-input-background-color-rgb: var(--bs-body-color);
-    --aa-selected-color-rgb: var(--bs-dropdown-link-hover-bg);
-    --aa-description-highlight-background-color-rgb: var(--bs-secondary-bg);
-
-    /** Shadow colors */
-    --aa-panel-shadow: var(--bs-dropdown-box-shadow)
-
-}

templates/_navbar_search.html.twig

@@ -69,7 +69,8 @@
         </div>
     </div>
 
-    <div {{ stimulus_controller('elements/part_livesearch') }} class="mt-auto mb-auto"
+    {# It is important that this element has an id field. Otherwise the dropdown panel wont appear after some link clicks #}
+    <div {{ stimulus_controller('elements/part_livesearch') }} class="mt-auto mb-auto" id="navbar-quicksearch-container"
          data-autocomplete="{{ path('typeahead_parts', {'query': '__QUERY__'}) }}" data-detail-url="{{ path('part_info', {'id': '__ID__'}) }}">
         <input type="hidden" name="keyword" required {{ stimulus_target('elements/part_livesearch', 'input') }}>
     </div>