Fixing search bugs.

js-src/index.js

@@ -62,9 +62,19 @@ function fillFarmaciaGuardia() {
 
 function addListenersSearch() {
     if (searchMobile !== null) {
-        const searchIcon = searchMobile.querySelector('div.search-icon')
+        console.log('hola')
-        searchIcon.addEventListener('click', onFakeSearchClick);
+        const searchIcon = searchMobile.querySelector('a.search-icon')
+        searchIcon.addEventListener('click', (e) => {
+            const searchOverlay = document.querySelector('div.search-overlay');
+            const searchInput = searchOverlay.querySelector('div.search input');
+            searchInput.value = fakeSearchInput.value;
+            onSearchChange(e)
+            onFakeSearchClick(e)
+            return true;
+
+        })
         fakeSearchInput.addEventListener('keydown', (e) => {
+            console.log(e.code)
             if (e.code !== 'Enter') {
                 return false;
             }
@@ -76,8 +86,8 @@ function addListenersSearch() {
             return true;
         });
     }
-    const nextResult = searchMobile.querySelector('div.down');
+    const nextResult = searchMobile.querySelector('a.down');
-    const prevResult = searchMobile.querySelector('div.up');
+    const prevResult = searchMobile.querySelector('a.up');
     if (nextResult !== null && prevResult !== null) {
         nextResult.addEventListener('click', () => {
             searchInWebsite(fakeSearchInput.value, true);
@@ -109,6 +119,7 @@ function searchInWebsite(value, isToBottom) {
     const anchorNode = selection.anchorNode.parentNode
     if (anchorNode !== null) {
         anchorNode.scrollIntoView()
+        anchorNode.focus()
     }
 }
 

public/css/styles.css

@@ -40,7 +40,7 @@ body {
         height: 60px;
         margin-left: 0px;
         margin-right: 0px; }
-      body div.search-overlay div.bounding-search-bar div.up, body div.search-overlay div.bounding-search-bar div.down {
+      body div.search-overlay div.bounding-search-bar a.up, body div.search-overlay div.bounding-search-bar a.down {
         display: none; }
       body div.search-overlay div.bounding-search-bar a.exit-search {
         width: 60px;
@@ -56,18 +56,18 @@ body {
     margin-left: 10px;
     margin-right: 10px;
     display: flex; }
-    body div.search div.search-icon, body div.search div.down, body div.search div.up {
+    body div.search a.search-icon, body div.search a.down, body div.search a.up {
-      align-self: center;
       height: calc(100% - 24px);
+      align-self: center;
       margin: 3px;
       display: flex;
       background: aliceblue;
       align-items: center;
-      padding: 10px;
+      padding: 9px;
       border-radius: 10px;
       border: solid gray 1px;
       aspect-ratio: 1/1; }
-      body div.search div.search-icon img, body div.search div.down img, body div.search div.up img {
+      body div.search a.search-icon img, body div.search a.down img, body div.search a.up img {
         height: 80%; }
     body div.search div.fake-text-box {
       width: calc(100% - 60px);

public/css/styles.scss

@@ -54,7 +54,7 @@ body {
             margin-left: 0px;
             margin-right: 0px;
         }
-        div.up,div.down {
+        a.up,a.down {
             display: none;
         }
         a.exit-search {
@@ -75,14 +75,14 @@ body {
     margin-left: 10px;
     margin-right: 10px;
     display: flex;
-    div.search-icon,div.down,div.up {
+    a.search-icon,a.down,a.up {
-        align-self: center;
         height: calc(100% - 24px);
+        align-self: center;
         margin: 3px;
         display: flex;
         background: aliceblue;
         align-items: center;
-        padding: 10px;
+        padding: 9px;
         border-radius: 10px;
         border: solid gray 1px;
         aspect-ratio: 1/1;

templates/page/_search_bar.html.ep

@@ -1,14 +1,14 @@
 <div class="search">
-    <div tabindex="-1" class="search-icon">
+    <a href="#" class="search-icon">
         <img alt="Buscar" src="/img/search.svg"/>
-    </div>
+    </a>
     <div class="fake-text-box">
         <input type="text"></input>
     </div>
-    <div class="down">
+    <a href="#" class="down">
         <img alt="Siguiente resultado." src="/img/down.svg"/>
-    </div>
+    </a>
-    <div class="up">
+    <a href="#" class="up">
         <img alt="Anterior resultado" src="/img/up.svg"/>
-    </div>
+    </a>
 </div>