Merge pull request #1726 from NatLibFi/issue1724-autocomplete-result-…

…list Issue1724 autocomplete result list
NatLibFi · Dec 19, 2024 · fd78acb · fd78acb
2 parents 33119f5 + d7c0e14
commit fd78acb
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
@@ -20,6 +20,7 @@
   --sidebar-scrollbar-bg: var(--light-color);
   --sidebar-scrollbar-thumb: var(--secondary-medium-color);
   --search-bg: var(--white-color);
+  --search-dropdown-bg: var(--light-color);
   --search-border: var(--medium-color);
   --search-button-bg: var(--dark-color);
   --search-button-text: var(--white-color);
@@ -271,7 +272,7 @@ body {
 
   #search-wrapper .dropdown-menu {
     transform: translateY(-1px);
-    background-color: var(--search-bg);
+    background-color: var(--search-dropdown-bg);
     color: var(--headerbar-text-2);
     border: 1px solid var(--search-border);
     border-radius: 0;
@@ -280,6 +281,8 @@ body {
   #search-wrapper ul {
     padding-top: 0rem;
     padding-bottom: 0rem;
+    max-height: 50vh;
+    overflow-y: auto;
   }
 
   #search-wrapper .autocomplete {

diff --git a/resource/js/vocab-search.js b/resource/js/vocab-search.js
@@ -249,16 +249,18 @@ const vocabSearch = Vue.createApp({
             @input="autoComplete()"
             @keyup.enter="gotoSearchPage()"
             @click="showAutoComplete()">
-          <ul id="search-autocomplete-results" class="dropdown-menu" :class="{ 'show': showDropdown }"
-            aria-labelledby="search-field">
+          <ul id="search-autocomplete-results"
+              class="dropdown-menu w-100"
+              :class="{ 'show': showDropdown }"
+              aria-labelledby="search-field">
             <li class="autocomplete-result container" v-for="result in renderedResultsList"
               :key="result.prefLabel" >
               <template v-if="result.pageUrl">
                 <a :href=result.pageUrl>
                   <div class="row pb-1">
                     <div class="col" v-if="result.hitType == 'hidden'">
                       <span class="result">
-                        <template v-if="result.showNotation">
+                        <template v-if="result.showNotation && result.notation">
                           {{ result.notation }}&nbsp;
                         </template>
                         <template v-if="result.hit.hasOwnProperty('match')">
@@ -272,7 +274,7 @@ const vocabSearch = Vue.createApp({
                     <div class="col" v-else-if="result.hitType == 'alt'">
                       <span>
                         <i>
-                          <template v-if="result.showNotation">
+                          <template v-if="result.showNotation && result.notation">
                             {{ result.notation }}&nbsp;
                           </template>
                           <template v-if="result.hit.hasOwnProperty('match')">
@@ -284,7 +286,7 @@ const vocabSearch = Vue.createApp({
                         </i>
                       </span>
                       <span> &rarr;&nbsp;<span class="result">
-                          <template v-if="result.showNotation">
+                          <template v-if="result.showNotation && result.notation">
                             {{ result.notation }}&nbsp;
                           </template>
                           <template v-if="result.hitPref.hasOwnProperty('match')">
@@ -306,12 +308,12 @@ const vocabSearch = Vue.createApp({
                         </template>
                       </span>
                       <span>
-                        &nbsp;{{ result.prefLabel }}
+                        {{ result.prefLabel }}
                       </span>
                     </div>
                     <div class="col" v-else-if="result.hitType == 'pref'">
                       <span class="result">
-                        <template v-if="result.showNotation">
+                        <template v-if="result.showNotation && result.notation">
                           {{ result.notation }}&nbsp;
                         </template>
                         <template v-if="result.hit.hasOwnProperty('match')">

diff --git a/tests/cypress/template/vocab-search-bar.cy.js b/tests/cypress/template/vocab-search-bar.cy.js
@@ -212,5 +212,20 @@ describe('Vocab search bar', () => {
         cy.get('li').last().find('b').eq(0).should('have.text', '51')
       })
     })
+      it('Long autocomplete result list should have a scroll bar', () => {
+        // go to YSO vocab front page
+        cy.visit('/yso/fi/')
+
+        // resize the window to smaller size
+        cy.viewport(1200, 600)
+
+        // type a search term and wait for the autocomplete to appear
+        cy.get('#search-field').type('mu')
+        cy.get('#search-autocomplete-results').should('be.visible')
+
+        // the result list should have a CSS-based scroll
+        cy.get('#search-autocomplete-results').should('have.css', 'overflow-y', 'auto')
+        cy.get('#search-autocomplete-results').should('have.css', 'max-height', '300px')
+      });
   });
 })