diff --git a/lib/autocomplete/index.js b/lib/autocomplete/index.js index f0bbddcc..c0d899ee 100644 --- a/lib/autocomplete/index.js +++ b/lib/autocomplete/index.js @@ -247,7 +247,7 @@ class AutoComplete extends Component { {item[`${labelKey}`]} ); - }) : 'No results found!'; + }) : No results found!; }; render() { diff --git a/lib/autocomplete/tests/edgecases.test.js b/lib/autocomplete/tests/edgecases.test.js index a33bd847..97d792ae 100644 --- a/lib/autocomplete/tests/edgecases.test.js +++ b/lib/autocomplete/tests/edgecases.test.js @@ -29,7 +29,7 @@ describe('AutoComplete Edge Cases tests', () => { wrappedComponent.setProps({ data: [] }); const simulatedValue = () => wrappedComponent .find('#autocomplete-list') - .children().length; + .children('div').length; wrappedComponent.find('input').simulate('focus'); expect(simulatedValue()).equal(expectedValue); diff --git a/lib/autocomplete/theme.module.scss b/lib/autocomplete/theme.module.scss index 2a0e8611..916a8845 100644 --- a/lib/autocomplete/theme.module.scss +++ b/lib/autocomplete/theme.module.scss @@ -1,7 +1,6 @@ @import '../globals/_theme.scss'; @import '../globals/animations.module.scss'; @import '../globals/common.scss'; - :local(.autocomplete) { @include customScroll(); width: 16em; @@ -18,43 +17,43 @@ border: none; border-bottom: 2px solid $input-bottom-border; outline: none; - &:focus { - border-bottom: 2px solid $secondary-input-active-border; - } } } - - :local(.autocomplete-list) { z-index: 1; box-sizing: border-box; height: fit-content; height: -moz-fit-content; - text-align: center; max-height: 300px; width: 100%; overflow-y: auto; box-shadow: $dropdown-menu-shadow; border-radius: 2px; - margin-top: 10px; + margin-top: 0.2em; padding: 2% 0; position: absolute; background-color: white; - @include sectionEntry(0.25s); - + :local(.no-results) { + display: flex; + padding: 2% 5%; + box-sizing: border-box; + color: rgba(0, 0, 0, 0.5); + font-size: 0.8em; + } :local(.autocomplete-list-item) { display: block; box-sizing: border-box; + text-align: left; cursor: pointer; - padding: 2% 2%; + padding: 5% 4%; box-shadow: none; &:hover { - background-color: $input-active-item; + background-color: rgba(160, 198, 255, 0.77); } } :local(.item-hover) { - background-color: $input-active-item; + background-color: rgba(160, 198, 255, 0.77); } } } @@ -63,7 +62,7 @@ &::after { content: ''; display: block; - background-color: $primary-input-active-border !important; + background-color: rgba(160, 198, 255, 0.77) !important; height: 2px; @include inputFocus(); animation-duration: 0.3s; @@ -71,8 +70,8 @@ margin-top: -2px; position: relative; /* Safari only style */ - @media not all and (min-resolution:.001dpcm) { - bottom: 2px; + @media not all and (min-resolution: .001dpcm) { + bottom: 2px; } } } \ No newline at end of file