From c2afbd8ab0c80302575a9f2980bc85bac5e2901b Mon Sep 17 00:00:00 2001
From: The Minh Luong <theminh@inlibro.com>
Date: Tue, 1 Mar 2022 14:35:47 -0500
Subject: [PATCH] Bug 27113: Rebase and correct autocomplete appearance

Rebase of previous patches and correct the buggy behavior (See "GIF showing buggy behavior attachment")

Test plan:
1- Search for an item. Notice that the autocomplete functionnality is not available. (See "Result" attachment)
2- Make sure that you are using Elasticsearch as your searching engine. (Preference->SearchEngine->ElasticSearch)
3- Apply the patch.
4- Run ./installer/data/mysql/updatedatabase.pl
5- Looks for the following preferences :
   - IntranetAutocompleteElasticSearch
   - OPACAutocompleteElasticSearch
6- Set their value to show.
7- Rebuild the OPAC and staff client CSS (This step is important because the autocomplete CSS is moved to the main SCSS file):
   Instructions here: https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client
8- Search for an item and notice that the autocomplete functionnality is now available.
9- In the staff interface, go in "Search the catalog".
10- Notice that the buggy behavior is now fixed.
---
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss                | 3 +--
 .../bootstrap/js/opac-elasticsearch/opac-autocomplete.js       | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 158ad28933..0a5789a8d8 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -2858,7 +2858,6 @@ $star-selected: #EDB867;
 .autocomplete {
     /*the container must be positioned relative:*/
     position: relative;
-    display: inline-block;
     width: 100%;
 }
 
@@ -2867,7 +2866,7 @@ $star-selected: #EDB867;
     border: 1px solid #d4d4d4;
     border-bottom: none;
     border-top: none;
-    z-index: 99;
+    z-index: 9999;
 
     div {
         padding: 10px;
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/opac-elasticsearch/opac-autocomplete.js b/koha-tmpl/opac-tmpl/bootstrap/js/opac-elasticsearch/opac-autocomplete.js
index eaa8ece900..01d6332caa 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/opac-elasticsearch/opac-autocomplete.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/opac-elasticsearch/opac-autocomplete.js
@@ -51,6 +51,7 @@ function autocomplete(inp, nb, left, right) {
     /* create new div with position relative for class .autocomplete with absolute */
     var div_relative = document.createElement('div');
     $(div_relative).addClass( "autocomplete" );
+    $(div_relative).css("display", "inline-block");
     div_relative.append(inp);
     /* input doesn't have an elem after, add it to parent */
     if (next_elem_inp === null){
-- 
2.25.1