Merge pull request #7371 from stopfstedt/global-search-box

hide text overflow in global search results.
ilios · Sep 1, 2023 · 378ba2a · 378ba2a
2 parents c710edc + e544612
commit 378ba2a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 61 deletions.
diff --git a/app/components/global-search-box.hbs b/app/components/global-search-box.hbs
@@ -27,21 +27,19 @@
   </button>
   {{#if this.hasResults}}
     <div {{on-click-outside (set this.results null)}}>
-      <ul class="autocomplete" data-test-autocomplete>
+      <div class="autocomplete" data-test-autocomplete>
         {{#each this.results as |result|}}
-          <li class="autocomplete-row">
-            <button
-              type="button"
-              {{on "click" (fn this.searchFromResult result)}}
-            >
-              <FaIcon @icon="magnifying-glass" />
-              <span class="result-text">
-                {{result.text}}
-              </span>
-            </button>
-          </li>
+          <button
+            type="button"
+            class="autocomplete-row"
+            data-test-autocomplete-row
+            {{on "click" (fn this.searchFromResult result)}}
+          >
+            <FaIcon @icon="magnifying-glass" />
+            {{result.text}}
+          </button>
         {{/each}}
-      </ul>
+      </div>
     </div>
   {{/if}}
 </div>
diff --git a/app/components/global-search-box.js b/app/components/global-search-box.js
@@ -116,7 +116,7 @@ export default class GlobalSearchBox extends Component {
       this.resultListAction(listArray, keyCode);
     } else {
       const selector = keyCode === 40 ? 'first' : 'last';
-      const option = container.querySelector(`.autocomplete li:${selector}-child`);
+      const option = container.querySelector(`.autocomplete-row:${selector}-child`);
       option.classList.add('active');
       this.autocompleteSelectedQuery = option.innerText.trim();
     }

diff --git a/app/styles/components/global-search-box.scss b/app/styles/components/global-search-box.scss
@@ -52,51 +52,19 @@
     &.hidden {
       display: none;
     }
+  }
 
-    li {
-      padding: 0.25rem 0.375rem;
-
-      button {
-        @include m.ilios-button-reset;
-      }
-
-      .fa-search {
-        bottom: 0.125rem;
-        display: inline-block;
-        @include m.font-size("small");
-        margin-right: 0.125rem;
-        position: relative;
-      }
-
-      .result-text {
-        display: inline-block;
-        vertical-align: top;
-      }
-
-      &.inactive {
-        color: color.adjust(c.$culturedGrey, $lightness: -20%);
-        font-style: italic;
-      }
-
-      &.summary {
-        color: c.$fernGreen;
-      }
-
-      a,
-      &.clickable {
-        display: block;
-        padding: 0.1rem;
-        width: 100%;
-
-        &:hover {
-          background-color: color.adjust(c.$blueMunsell, $lightness: 50%);
-        }
-      }
+  .autocomplete-row {
+    @include m.ilios-button-reset;
+    overflow: hidden;
+    padding: 0.25rem 0.375rem;
+    text-align: left;
+    vertical-align: top;
+    white-space: nowrap;
+    width: 100%;
 
-      &.active,
-      &:hover {
-        background: c.$culturedGrey;
-      }
+    &:hover {
+      background-color: color.adjust(c.$blueMunsell, $lightness: 50%);
     }
   }
 }
diff --git a/tests/pages/components/global-search-box.js b/tests/pages/components/global-search-box.js
@@ -16,10 +16,10 @@ const definition = {
   inputHasFocus: hasFocus('input'),
   triggerInput: triggerable('keyup', 'input'),
   clickIcon: clickable('[data-test-search-icon]'),
-  autocompleteResults: collection('[data-test-autocomplete] li'),
-  resultsRow1HasActiveClass: hasClass('active', 'li:nth-child(1)'),
-  resultsRow2HasActiveClass: hasClass('active', 'li:nth-child(2)'),
-  resultsRow3HasActiveClass: hasClass('active', 'li:nth-child(3)'),
+  autocompleteResults: collection('[data-test-autocomplete-row]'),
+  resultsRow1HasActiveClass: hasClass('active', '[data-test-autocomplete-row]:nth-of-type(1)'),
+  resultsRow2HasActiveClass: hasClass('active', '[data-test-autocomplete-row]:nth-of-type(2)'),
+  resultsRow3HasActiveClass: hasClass('active', '[data-test-autocomplete-row]:nth-of-type(3)'),
   keyUp: {
     scope: '[data-test-input]',
     enter: triggerable('keyup', '', { eventProperties: { key: 'Enter' } }),