diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index 7bdf2b41e..be3a79e60 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -93,13 +93,13 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren renderLabelText() : selected.length > 0 ? - options.reduce((labels, { label, value }) => { - if (selected.includes(value)) { - labels.push(typeof label === 'string' ? label : value); - } - - return labels; - }, []).join(', ') + selected.map((value) => { + const option = options.find((option) => option.value === value); + return option && typeof option.label === 'string' ? + option.label + : + value; + }).join(', ') : title } diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js index dd64c3ce9..dc2082f6e 100644 --- a/src/routes/Addons/useSelectableInputs.js +++ b/src/routes/Addons/useSelectableInputs.js @@ -58,6 +58,18 @@ const mapSelectableInputs = (installedAddons, remoteAddons, navigate) => { remoteAddons.selected.request.path.type_name === request.path.type_name; }) .map(({ request }) => JSON.stringify(request)), + renderLabelText: () => { + return installedAddons.selected !== null ? + installedAddons.selected.type_name === ALL_TYPES_OPTION.value ? + ALL_TYPES_OPTION.label + : + installedAddons.selected.type_name + : + remoteAddons.selected !== null ? + remoteAddons.selected.request.path.type_name + : + typeSelect.title; + }, onSelect: (event) => { const value = JSON.parse(event.value); if (value === ALL_TYPES_OPTION.value || typeof value === 'string') { diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js index a31a56400..6953657e1 100644 --- a/src/routes/Library/useSelectableInputs.js +++ b/src/routes/Library/useSelectableInputs.js @@ -17,6 +17,9 @@ const mapSelectableInputs = (route, library) => { [], options: [{ label: 'All', value: JSON.stringify(null) }] .concat(library.type_names.map((type) => ({ label: type, value: JSON.stringify(type) }))), + renderLabelText: () => { + return library.selected.type_name === null ? 'All' : library.selected.type_name; + }, onSelect: (event) => { const type = JSON.parse(event.value); const queryParams = new URLSearchParams(library.selected !== null ? [['sort', library.selected.sort]] : []);