From 938c6551870308933a9190ed5e452320ec5dea7a Mon Sep 17 00:00:00 2001
From: Laura_Escamilla <laura.escamilla@bywatersolutions.com>
Date: Tue, 23 Jul 2024 19:30:36 +0000
Subject: [PATCH] Bug 33668: Added clear button to global js

Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl>
Signed-off-by: Andreas Roussos <a.roussos@dataly.gr>
---
 koha-tmpl/opac-tmpl/bootstrap/js/global.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
index 694239e95a..715233b8ea 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
@@ -251,7 +251,22 @@ var facetHandler = function (e) {
 
 function setPlaceholder(){
     let search_placeholder = $("#masthead_search option:selected").data("placeholder");
-    $("#translControl1").attr("placeholder", search_placeholder );
+    let clearButton = $('<span class="clear-search"><i class="fa-sharp fa-regular fa-circle-xmark"></i></span>');
+
+    $("#translControl1").attr("placeholder", search_placeholder ).after(clearButton);
+
+       clearButton.click(function() {
+        $("#translControl1").val('').focus();
+        $(this).hide();
+    });
+
+ $("#translControl1").on('input', function() {
+        if ($(this).val() !== '') {
+            clearButton.show();
+        } else {
+            clearButton.hide();
+        }
+    });
 }
 
 $(document).ready(function(){
-- 
2.39.2