diff --git a/app/components/global-search-box.hbs b/app/components/global-search-box.hbs
index 4db6392ab5..8346860947 100644
--- a/app/components/global-search-box.hbs
+++ b/app/components/global-search-box.hbs
@@ -27,21 +27,19 @@
{{#if this.hasResults}}
-
+
{{#each this.results as |result|}}
-
-
-
-
+
{{/each}}
-
+
{{/if}}
diff --git a/app/components/global-search-box.js b/app/components/global-search-box.js
index 8c648cbc6e..c0b60b4991 100644
--- 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
index fb0192308e..d0fdcfda5d 100644
--- 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
index f9a3c35ae9..a49faa9b07 100644
--- 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' } }),