From 91624a3e53e120aa4cd6a7481244639809713a36 Mon Sep 17 00:00:00 2001
From: chfhtw <christopher.hacker@technikum-wien.at>
Date: Wed, 30 Jul 2025 09:42:47 +0200
Subject: [PATCH] searchbar clear button, searchbar z-indexes

---
 public/css/components/searchbar/searchbar.css | 11 ++++++++
 public/js/components/searchbar/searchbar.js   | 25 +++++++++++++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/public/css/components/searchbar/searchbar.css b/public/css/components/searchbar/searchbar.css
index c55e13f7e..a27ffe224 100644
--- a/public/css/components/searchbar/searchbar.css
+++ b/public/css/components/searchbar/searchbar.css
@@ -10,6 +10,17 @@
 }
 
 
+.searchbar_input:focus,
+.searchbar_input:focus ~ .searchbar_input_clear {
+	z-index: 5; /* same as bootstrap .input-group > .form-control:focus */
+}
+
+
+.searchbar_searchbox.open {
+	z-index: 10000;
+}
+
+
 .searchbar_settings {
     position: absolute; 
     z-index: 9999; 
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index 0b30bd12f..afaf93782 100644
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -55,19 +55,35 @@ export default {
             @focusin="searchfocusin"
             @focusout="searchfocusout"
         >
-			<div ref="searchbox" class="h-100 input-group me-2">
+			<div
+				ref="searchbox"
+				class="h-100 input-group me-2 searchbar_searchbox"
+				:class="showresult ? 'open' : 'closed'"
+			>
 				<span class="input-group-text">
 					<i class="fa-solid fa-magnifying-glass"></i>
 				</span>
                 <input
+                	ref="input"
                     @keyup="search"
                     @focus="showsearchresult"
                     v-model="searchsettings.searchstr"
-                    class="form-control"
+                    class="form-control searchbar_input"
                     type="search"
                     :placeholder="$p.t('search/input_search_label', {types:search_types_string})"
                     :aria-label="$p.t('search/input_search_label', {types:search_types_string})"
                 >
+				<span
+					v-if="searchsettings.searchstr"
+					class="w-0 position-relative searchbar_input_clear"
+				>
+					<button
+						class="position-absolute end-0 btn bg-transparent"
+						@click="clearInput"
+					>
+						<i class="fas fa-close"></i>
+					</button>
+				</span>
                 <span
                     data-bs-toggle="collapse"
                     data-bs-target="#searchSettings"
@@ -170,6 +186,11 @@ export default {
 		}
 	},
     methods: {
+    	clearInput() {
+    		this.searchsettings.searchstr = "";
+    		this.hideresult();
+    		this.$refs.input.focus()
+    	},
 		getSearchTypes: function () {
 			let result = this.allSearchTypes();
 			if (this.searchoptions.origin) {