diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index ad9f705bd..860ab8c67 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -148,7 +148,26 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele className })} { - menuOpen ? : null + menuOpen ? + closeMenu()}> +
+ { + options.length > 0 ? + options.map(({ label, value }) => ( + + )) + : +
+
No options available
+
+ } +
+
+ : + null } } diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less index 090d39bb1..3312b9fed 100644 --- a/src/common/Multiselect/styles.less +++ b/src/common/Multiselect/styles.less @@ -37,60 +37,74 @@ .popup-menu-container { width: 100%; + } +} - .menu-container { - .option-container { - display: flex; - flex-direction: row; - align-items: center; - padding: 1rem; - background-color: var(--color-backgroundlighter); +.menu-container { + &:global(.modal) { + .option-container { + width: 15rem; - &:global(.selected) { - background-color: var(--color-surfacedarker); - - .icon { - display: block; - } - } - - &:hover, &:focus { - background-color: var(--color-surfacedark); - } - - .label { - flex: 1; - max-height: 4.8em; - color: var(--color-surfacelighter); - } - - .icon { - flex: none; - display: none; - width: 1rem; - height: 1rem; - margin-left: 1rem; - fill: var(--color-surfacelighter); - } + &:not(:last-child) { + margin-bottom: 1rem; } + } - .no-options-container { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding: 1rem; - background-color: var(--color-backgroundlighter); + .no-options-container { + width: 15rem; + } + } - .label { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - font-size: 1.2rem; - text-align: center; - color: var(--color-surfacelighter); - } + .option-container { + display: flex; + flex-direction: row; + align-items: center; + padding: 1rem; + background-color: var(--color-backgroundlighter); + + &:global(.selected) { + background-color: var(--color-surfacedarker); + + .icon { + display: block; } } + + &:hover, &:focus { + background-color: var(--color-surfacedark); + } + + .label { + flex: 1; + max-height: 4.8em; + color: var(--color-surfacelighter); + } + + .icon { + flex: none; + display: none; + width: 1rem; + height: 1rem; + margin-left: 1rem; + fill: var(--color-surfacelighter); + } + } + + .no-options-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 1rem; + background-color: var(--color-backgroundlighter); + + .label { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + font-size: 1.2rem; + text-align: center; + color: var(--color-surfacelighter); + } } } \ No newline at end of file diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 20a232afe..b545a4450 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -130,15 +130,13 @@ const Discover = ({ urlParams, queryParams }) => { { inputsModalOpen ? closeInputsModal()}> - { - selectInputs.map((selectInput, index) => ( - - )) - } + {selectInputs.map((selectInput, index) => ( + + ))} : null