From 45e624e9071a24a8e59896a936c97f5230e5a084 Mon Sep 17 00:00:00 2001
From: deepjyoti30 <deep.barman30@gmail.com>
Date: Mon, 10 Aug 2020 15:31:31 +0530
Subject: [PATCH] Fix a bug related to overlay of the suggestions

The suggestions div has a certain amount of padding that create a div
kind of object when the entered content doesn't match anything, however
this was creating an issue for the settings page.

Fixed that bug by hiding that div when the settings page is opened
---
 css/main.css       | 5 +++--
 js/autocomplete.js | 2 +-
 js/main.js         | 4 +++-
 scss/main.scss     | 3 ++-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/css/main.css b/css/main.css
index 30f45e0..5b8606e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -71,7 +71,8 @@ body {
         padding: 7px 14px;
         font-size: 18px;
         color: #fff;
-        box-sizing: border-box; }
+        box-sizing: border-box;
+        z-index: -1; }
         .main #search-bar .autocomplete-items-container .autocomplete-item:hover {
           background: #3b3b3b; }
       .main #search-bar .autocomplete-items-container .autocomplete-active {
@@ -131,7 +132,7 @@ body {
 .settings-modal {
   display: none;
   position: fixed;
-  z-index: 1;
+  z-index: 3;
   width: 80vw;
   height: 80vh;
   overflow: auto;
diff --git a/js/autocomplete.js b/js/autocomplete.js
index bb5d366..5be0f83 100644
--- a/js/autocomplete.js
+++ b/js/autocomplete.js
@@ -15,7 +15,7 @@ function autocomplete(inp, passedValues) {
         currentFocus = -1;
 
         // Update some values of the parent container
-        parentContainer.setAttribute("id", this.id + "autocomplete-list");
+        parentContainer.setAttribute("id", this.id + "-autocomplete-list");
         parentContainer.style.paddingBottom = "1rem";
 
 
diff --git a/js/main.js b/js/main.js
index 84979d1..a5885a4 100644
--- a/js/main.js
+++ b/js/main.js
@@ -3,7 +3,7 @@ window.onload = function() {
 }
 
 
-debug = true; // Enable while testing on local
+debug = false; // Enable while testing on local
 searchBarDivId = "search-bar"
 searchBarId = "search-bar-input"
 messageDivId = "message"
@@ -81,6 +81,8 @@ function initSearchBar(jsonData) {
         if (query == "--setting") {
             showSettings()
             document.getElementById(searchBarId).value = ""
+            // Remove the autocomplete boxes
+            document.getElementById("search-bar-input-autocomplete-list").style.display = "none";
             return
         }
 
diff --git a/scss/main.scss b/scss/main.scss
index 7046525..fc4ccc1 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -107,6 +107,7 @@ body {
                 font-size: 18px;
                 color: $foreground;
                 box-sizing: border-box;
+                z-index: -1;
 
                 &:hover {
                     background: lighten($background, 10);
@@ -224,7 +225,7 @@ body {
 .settings-modal {
     display: none;
     position: fixed;
-    z-index: 1;
+    z-index: 3;
     width: 80vw;
     height: 80vh;
     overflow: auto;