From b4412b73904d758f52da5c021a457c00fdab3c5e Mon Sep 17 00:00:00 2001 From: Laura_Escamilla Date: Tue, 23 Jul 2024 19:30:36 +0000 Subject: [PATCH] Bug 33668: Added clear button to global js To test: 1. Apply the patch and perform a yarn build. 2. Navigate to the OPAC. * Verify the presence of an X icon on the far right of the search box. 3. Perform the following steps: * Type a search term (e.g., "Books") into the search box. * Before clicking the search button or pressing 'Enter', click on the X icon. * Note that the text ("Books") should be cleared from the search box. * Repeat the above step, but this time complete the search. * Verify that the search term remains in the search box. Clicking the X icon now should clear the text. 4. Confirm that searched terms persist in the Search history even after clearing a search. * Terms cleared without completing a search should not appear in the history. 5. Sign off and have a great day! Signed-off-by: Roman Dolny Signed-off-by: Andreas Roussos Signed-off-by: Roman Dolny --- 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 ebc755270f..8bc54fadc8 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 = $(''); + + $("#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.5