From 98784779b53c92e78897bbe99da28016173a1d56 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Tue, 11 Mar 2025 19:31:46 +0200
Subject: [PATCH 1/6] refactor(StreamsList): replace Multiselect with
 MultiselectMenu

---
 src/routes/MetaDetails/StreamsList/StreamsList.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index bcb5cb015..b30297c0f 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const { Button, Image, Multiselect } = require('stremio/components');
+const { Button, Image, MultiselectMenu } = require('stremio/components');
 const { useServices } = require('stremio/services');
 const Stream = require('./Stream');
 const styles = require('./styles');
@@ -20,9 +20,9 @@ const StreamsList = ({ className, video, ...props }) => {
     const profile = useProfile();
     const streamsContainerRef = React.useRef(null);
     const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
-    const onAddonSelected = React.useCallback((event) => {
+    const onAddonSelected = React.useCallback((value) => {
         streamsContainerRef.current.scrollTo({ top: 0, left: 0, behavior: platform.name === 'ios' ? 'smooth' : 'instant' });
-        setSelectedAddon(event.value);
+        setSelectedAddon(value);
     }, [platform]);
     const showInstallAddonsButton = React.useMemo(() => {
         return !profile || profile.auth === null || profile.auth?.user?.isNewUser === true;
@@ -76,7 +76,6 @@ const StreamsList = ({ className, video, ...props }) => {
     }, [streamsByAddon, selectedAddon]);
     const selectableOptions = React.useMemo(() => {
         return {
-            title: 'Select Addon',
             options: [
                 {
                     value: ALL_ADDONS_KEY,
@@ -89,7 +88,10 @@ const StreamsList = ({ className, video, ...props }) => {
                     title: streamsByAddon[transportUrl].addon.manifest.name,
                 }))
             ],
-            selected: [selectedAddon],
+            selectedOption: {
+                label: selectedAddon === ALL_ADDONS_KEY ? t('ALL_ADDONS') : streamsByAddon[selectedAddon]?.addon.manifest.name,
+                value: selectedAddon
+            },
             onSelect: onAddonSelected
         };
     }, [streamsByAddon, selectedAddon]);
@@ -111,7 +113,7 @@ const StreamsList = ({ className, video, ...props }) => {
                 }
                 {
                     Object.keys(streamsByAddon).length > 1 ?
-                        <Multiselect
+                        <MultiselectMenu
                             {...selectableOptions}
                             className={styles['select-input-container']}
                         />

From 5365c1739ee09b3e75c1ded936d715d937bb9770 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Tue, 11 Mar 2025 19:43:04 +0200
Subject: [PATCH 2/6] fix(MultiselectMenu): keep background color when state is
 open

---
 src/components/MultiselectMenu/MultiselectMenu.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MultiselectMenu/MultiselectMenu.less b/src/components/MultiselectMenu/MultiselectMenu.less
index b09a0d916..88ae83d1b 100644
--- a/src/components/MultiselectMenu/MultiselectMenu.less
+++ b/src/components/MultiselectMenu/MultiselectMenu.less
@@ -34,7 +34,7 @@
         }
     }
 
-    &:hover {
+    &:hover, .open {
         background-color: var(--overlay-color);
     }
 }
\ No newline at end of file

From a21e5698c8e8fe3e5c28cd3b02b92f82457cea8e Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Tue, 11 Mar 2025 20:45:18 +0200
Subject: [PATCH 3/6] refactor(Library): replace Multiselect with
 MultiselectMenu

---
 .../MultiselectMenu/MultiselectMenu.less           |  2 +-
 src/components/MultiselectMenu/MultiselectMenu.tsx |  2 +-
 src/routes/Library/Library.js                      |  4 ++--
 src/routes/Library/styles.less                     |  1 +
 src/routes/Library/useSelectableInputs.js          | 14 +++++++-------
 src/routes/MetaDetails/StreamsList/styles.less     |  2 +-
 6 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/MultiselectMenu/MultiselectMenu.less b/src/components/MultiselectMenu/MultiselectMenu.less
index 88ae83d1b..c26c2480e 100644
--- a/src/components/MultiselectMenu/MultiselectMenu.less
+++ b/src/components/MultiselectMenu/MultiselectMenu.less
@@ -34,7 +34,7 @@
         }
     }
 
-    &:hover, .open {
+    &:hover, &.active {
         background-color: var(--overlay-color);
     }
 }
\ No newline at end of file
diff --git a/src/components/MultiselectMenu/MultiselectMenu.tsx b/src/components/MultiselectMenu/MultiselectMenu.tsx
index 55b818d80..8f41278e7 100644
--- a/src/components/MultiselectMenu/MultiselectMenu.tsx
+++ b/src/components/MultiselectMenu/MultiselectMenu.tsx
@@ -27,7 +27,7 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
     };
 
     return (
-        <div className={classNames(styles['multiselect-menu'], className)} ref={multiselectMenuRef}>
+        <div className={classNames(styles['multiselect-menu'], { [styles['active']]: menuOpen }, className)} ref={multiselectMenuRef}>
             <Button
                 className={classNames(styles['multiselect-button'], { [styles['open']]: menuOpen })}
                 onClick={toggleMenu}
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index f22a12236..432868c12 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const NotFound = require('stremio/routes/NotFound');
 const { useProfile, useNotifications, routesRegexp, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
-const { DelayedRenderer, Chips, Image, MainNavBars, Multiselect, LibItem } = require('stremio/components');
+const { DelayedRenderer, Chips, Image, MainNavBars, LibItem, MultiselectMenu } = require('stremio/components');
 const { default: Placeholder } = require('./Placeholder');
 const useLibrary = require('./useLibrary');
 const useSelectableInputs = require('./useSelectableInputs');
@@ -69,7 +69,7 @@ const Library = ({ model, urlParams, queryParams }) => {
                 profile.auth !== null ?
                     <div className={styles['library-content']}>
                         <div className={styles['selectable-inputs-container']}>
-                            <Multiselect {...typeSelect} className={styles['select-input-container']} />
+                            <MultiselectMenu {...typeSelect} className={styles['select-input-container']} />
                             <Chips {...sortChips} className={styles['select-input-container']} />
                         </div>
                         {
diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
index 76a16940e..44c0c8851 100644
--- a/src/routes/Library/styles.less
+++ b/src/routes/Library/styles.less
@@ -42,6 +42,7 @@
                 flex-shrink: 1;
                 flex-basis: 15rem;
                 height: 2.75rem;
+                background-color: var(--overlay-color);
 
                 &:not(:last-child) {
                     margin-right: 1.5rem;
diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js
index 6f24dc2c9..426359a10 100644
--- a/src/routes/Library/useSelectableInputs.js
+++ b/src/routes/Library/useSelectableInputs.js
@@ -2,20 +2,20 @@
 
 const React = require('react');
 const { useTranslate } = require('stremio/common');
-
 const mapSelectableInputs = (library, t) => {
+    const selectedType = library.selectable.types.find(({ selected }) => selected) || library.selectable.types.find(({ type }) => type === null);
     const typeSelect = {
-        title: t.string('SELECT_TYPE'),
         options: library.selectable.types
             .map(({ type, deepLinks }) => ({
                 value: deepLinks.library,
                 label: type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(type, 'TYPE_')
             })),
-        selected: library.selectable.types
-            .filter(({ selected }) => selected)
-            .map(({ deepLinks }) => deepLinks.library),
-        onSelect: (event) => {
-            window.location = event.value;
+        selectedOption: {
+            label: selectedType?.type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(selectedType?.type, 'TYPE_'),
+            value: selectedType?.deepLinks.library
+        },
+        onSelect: (value) => {
+            window.location = value;
         }
     };
     const sortChips = {
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index 0f9ab2a0a..62523d073 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -109,7 +109,7 @@
         .select-input-container {
             min-width: 40%;
             flex-grow: 1;
-            background: none;
+            background-color: none;
 
             &:hover, &:focus, &:global(.active) {
                 background-color: var(--overlay-color);

From db7277714b2fcba5cc8e9f6fc192bbbf2782b9c6 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Wed, 12 Mar 2025 19:26:43 +0200
Subject: [PATCH 4/6] fix(Dropdown): use option value as key instead missing id

---
 src/components/MultiselectMenu/Dropdown/Dropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index 3da75619b..438ced13c 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -63,7 +63,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen
                 .filter((option: MultiselectMenuOption) => !option.hidden)
                 .map((option: MultiselectMenuOption) => (
                     <Option
-                        key={option.id}
+                        key={option.value}
                         ref={handleSetOptionRef(option.value)}
                         option={option}
                         onSelect={onSelect}

From a96a44b0dd6a2b4b0fdf423882b2745f212bcffb Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Wed, 12 Mar 2025 19:27:49 +0200
Subject: [PATCH 5/6] refactor(Discover): replace Multiselect with
 MultiselectMenu component

---
 src/routes/Discover/Discover.js            | 16 ++--
 src/routes/Discover/styles.less            |  1 +
 src/routes/Discover/useSelectableInputs.js | 93 ++++++++++++----------
 3 files changed, 58 insertions(+), 52 deletions(-)

diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index abcdfb205..21fb5c0ab 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -6,7 +6,7 @@ const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { useServices } = require('stremio/services');
 const { CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
-const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, Multiselect, ModalDialog } = require('stremio/components');
+const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, Multiselect, ModalDialog, MultiselectMenu } = require('stremio/components');
 const useDiscover = require('./useDiscover');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
@@ -87,14 +87,13 @@ const Discover = ({ urlParams, queryParams }) => {
             <div className={styles['discover-content']}>
                 <div className={styles['catalog-container']}>
                     <div className={styles['selectable-inputs-container']}>
-                        {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
-                            <Multiselect
+                        {selectInputs.map(({ title, options, selectedOption, onSelect }, index) => (
+                            <MultiselectMenu
                                 key={index}
                                 className={styles['select-input']}
                                 title={title}
                                 options={options}
-                                selected={selected}
-                                renderLabelText={renderLabelText}
+                                selectedOption={selectedOption}
                                 onSelect={onSelect}
                             />
                         ))}
@@ -187,14 +186,13 @@ const Discover = ({ urlParams, queryParams }) => {
             {
                 inputsModalOpen ?
                     <ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
-                        {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
-                            <Multiselect
+                        {selectInputs.map(({ title, options, selectedOption, onSelect }, index) => (
+                            <MultiselectMenu
                                 key={index}
                                 className={styles['select-input']}
                                 title={title}
                                 options={options}
-                                selected={selected}
-                                renderLabelText={renderLabelText}
+                                selectedOption={selectedOption}
                                 onSelect={onSelect}
                             />
                         ))}
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index 62e3adaee..14012d5cd 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -50,6 +50,7 @@
 
                 .select-input {
                     flex: 0 1 15rem;
+                    background-color: var(--overlay-color);
 
                     &:not(:first-child) {
                         margin-left: 1.5rem;
diff --git a/src/routes/Discover/useSelectableInputs.js b/src/routes/Discover/useSelectableInputs.js
index 18d317507..459e095cf 100644
--- a/src/routes/Discover/useSelectableInputs.js
+++ b/src/routes/Discover/useSelectableInputs.js
@@ -4,72 +4,79 @@ const React = require('react');
 const { useTranslate } = require('stremio/common');
 
 const mapSelectableInputs = (discover, t) => {
+    const selectedType = discover.selectable.types.find(({ selected }) => selected);
     const typeSelect = {
-        title: t.string('SELECT_TYPE'),
         options: discover.selectable.types
             .map(({ type, deepLinks }) => ({
                 value: deepLinks.discover,
                 label: t.stringWithPrefix(type, 'TYPE_')
             })),
-        selected: discover.selectable.types
-            .filter(({ selected }) => selected)
-            .map(({ deepLinks }) => deepLinks.discover),
-        renderLabelText: discover.selected !== null ?
-            () => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
-            :
-            null,
-        onSelect: (event) => {
-            window.location = event.value;
+        selectedOption: selectedType
+            ? {
+                label: t.stringWithPrefix(selectedType.type, 'TYPE_'),
+                value: selectedType.deepLinks.discover,
+            }
+            : undefined,
+        title: discover.selected !== null
+            ? () => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
+            : t.string('SELECT_TYPE'),
+        onSelect: (value) => {
+            window.location = value;
         }
     };
+    const selectedCatalog = discover.selectable.catalogs.find(({ selected }) => selected);
     const catalogSelect = {
-        title: t.string('SELECT_CATALOG'),
         options: discover.selectable.catalogs
             .map(({ id, name, addon, deepLinks }) => ({
                 value: deepLinks.discover,
                 label: t.catalogTitle({ addon, id, name }),
                 title: `${name} (${addon.manifest.name})`
             })),
-        selected: discover.selectable.catalogs
-            .filter(({ selected }) => selected)
-            .map(({ deepLinks }) => deepLinks.discover),
-        renderLabelText: discover.selected !== null ?
-            () => {
+        selectedOption: discover.selected?.request.path.id
+            ? {
+                label: t.catalogTitle({ addon: selectedCatalog.addon, id: selectedCatalog.id, name: selectedCatalog.name }),
+                value: selectedCatalog.deepLinks.discover
+            }
+            : undefined,
+        title: discover.selected !== null
+            ? () => {
                 const selectableCatalog = discover.selectable.catalogs
                     .find(({ id }) => id === discover.selected.request.path.id);
                 return selectableCatalog ? t.catalogTitle(selectableCatalog, false) : discover.selected.request.path.id;
             }
             :
-            null,
-        onSelect: (event) => {
-            window.location = event.value;
+            t.string('SELECT_CATALOG'),
+        onSelect: (value) => {
+            window.location =value;
         }
     };
-    const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => ({
-        title: t.stringWithPrefix(name, 'SELECT_'),
-        isRequired: isRequired,
-        options: options.map(({ value, deepLinks }) => ({
-            label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
-            value: JSON.stringify({
-                href: deepLinks.discover,
-                value
-            })
-        })),
-        selected: options
-            .filter(({ selected }) => selected)
-            .map(({ value, deepLinks }) => JSON.stringify({
-                href: deepLinks.discover,
-                value
+    const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => {
+        const selectedExtra = options.find(({ selected }) => selected);
+        return {
+            isRequired: isRequired,
+            options: options.map(({ value, deepLinks }) => ({
+                label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
+                value: JSON.stringify({
+                    href: deepLinks.discover,
+                    value
+                })
             })),
-        renderLabelText: options.some(({ selected, value }) => selected && value === null) ?
-            () => t.stringWithPrefix(name, 'SELECT_')
-            :
-            null,
-        onSelect: (event) => {
-            const { href } = JSON.parse(event.value);
-            window.location = href;
-        }
-    }));
+            selectedOption: {
+                label: typeof selectedExtra.value === 'string' ? t.stringWithPrefix(selectedExtra.value) : t.string('NONE'),
+                value: JSON.stringify({
+                    href: selectedExtra.deepLinks.discover,
+                    value: selectedExtra.value,
+                })
+            },
+            title: options.some(({ selected, value }) => selected && value === null) ?
+                () => t.stringWithPrefix(name, 'SELECT_')
+                : t.stringWithPrefix(selectedExtra.value),
+            onSelect: (value) => {
+                const { href } = JSON.parse(value);
+                window.location = href;
+            }
+        };
+    });
     return [[typeSelect, catalogSelect, ...extraSelects], discover.selectable.nextPage];
 };
 

From 7147c954c97c77d9df4f427755c442f80e351d43 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Wed, 12 Mar 2025 20:07:21 +0200
Subject: [PATCH 6/6] refactor(Addons): replace Multiselect with
 MultiselectMenu component

---
 src/routes/Addons/Addons.js              |  6 ++--
 src/routes/Addons/styles.less            |  1 +
 src/routes/Addons/useSelectableInputs.js | 45 ++++++++++++------------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 91bcbd27f..451101cbe 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -6,7 +6,7 @@ const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { usePlatform, useBinaryState, withCoreSuspender } = require('stremio/common');
-const { AddonDetailsModal, Button, Image, MainNavBars, Multiselect, ModalDialog, SearchBar, SharePrompt, TextInput } = require('stremio/components');
+const { AddonDetailsModal, Button, Image, MainNavBars, ModalDialog, SearchBar, SharePrompt, TextInput, MultiselectMenu } = require('stremio/components');
 const { useServices } = require('stremio/services');
 const Addon = require('./Addon');
 const useInstalledAddons = require('./useInstalledAddons');
@@ -107,7 +107,7 @@ const Addons = ({ urlParams, queryParams }) => {
             <div className={styles['addons-content']}>
                 <div className={styles['selectable-inputs-container']}>
                     {selectInputs.map((selectInput, index) => (
-                        <Multiselect
+                        <MultiselectMenu
                             {...selectInput}
                             key={index}
                             className={styles['select-input-container']}
@@ -218,7 +218,7 @@ const Addons = ({ urlParams, queryParams }) => {
                 filtersModalOpen ?
                     <ModalDialog title={'Addons filters'} className={styles['filters-modal']} onCloseRequest={closeFiltersModal}>
                         {selectInputs.map((selectInput, index) => (
-                            <Multiselect
+                            <MultiselectMenu
                                 {...selectInput}
                                 key={index}
                                 className={styles['select-input-container']}
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 6a057d292..565c0b262 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -90,6 +90,7 @@
             }
 
             .select-input-container {
+                background-color: var(--overlay-color);
                 flex-grow: 0;
                 flex-shrink: 1;
                 flex-basis: 15rem;
diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js
index af0bb35fc..c201b3976 100644
--- a/src/routes/Addons/useSelectableInputs.js
+++ b/src/routes/Addons/useSelectableInputs.js
@@ -4,8 +4,8 @@ const React = require('react');
 const { useTranslate } = require('stremio/common');
 
 const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
+    const selectedCatalog = remoteAddons.selectable.catalogs.concat(installedAddons.selectable.catalogs).find(({ selected }) => selected);
     const catalogSelect = {
-        title: t.string('SELECT_CATALOG'),
         options: remoteAddons.selectable.catalogs
             .concat(installedAddons.selectable.catalogs)
             .map(({ name, deepLinks }) => ({
@@ -13,24 +13,27 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
                 label: t.stringWithPrefix(name, 'ADDON_'),
                 title: t.stringWithPrefix(name, 'ADDON_'),
             })),
-        selected: remoteAddons.selectable.catalogs
-            .concat(installedAddons.selectable.catalogs)
-            .filter(({ selected }) => selected)
-            .map(({ deepLinks }) => deepLinks.addons),
-        renderLabelText: remoteAddons.selected !== null ?
+        selectedOption: selectedCatalog
+            ? {
+                label: t.stringWithPrefix(selectedCatalog.name, 'ADDON_'),
+                value: selectedCatalog.deepLinks.addons,
+            }
+            : undefined,
+        title: remoteAddons.selected !== null ?
             () => {
                 const selectableCatalog = remoteAddons.selectable.catalogs
                     .find(({ id }) => id === remoteAddons.selected.request.path.id);
                 return selectableCatalog ? t.stringWithPrefix(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
             }
-            :
-            null,
-        onSelect: (event) => {
-            window.location = event.value;
+            : null,
+        onSelect: (value) => {
+            window.location = value;
         }
     };
+    const selectedType = installedAddons.selected !== null
+        ? installedAddons.selectable.types.find(({ selected }) => selected)
+        : remoteAddons.selectable.types.find(({ selected }) => selected);
     const typeSelect = {
-        title: t.string('SELECT_TYPE'),
         options: installedAddons.selected !== null ?
             installedAddons.selectable.types.map(({ type, deepLinks }) => ({
                 value: deepLinks.addons,
@@ -41,15 +44,13 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
                 value: deepLinks.addons,
                 label: t.stringWithPrefix(type, 'TYPE_')
             })),
-        selected: installedAddons.selected !== null ?
-            installedAddons.selectable.types
-                .filter(({ selected }) => selected)
-                .map(({ deepLinks }) => deepLinks.addons)
-            :
-            remoteAddons.selectable.types
-                .filter(({ selected }) => selected)
-                .map(({ deepLinks }) => deepLinks.addons),
-        renderLabelText: () => {
+        selectedOption: selectedType
+            ? {
+                label: selectedType.type !== null ? t.stringWithPrefix(selectedType.type, 'TYPE_') : t.string('TYPE_ALL'),
+                value: selectedType.deepLinks.addons
+            }
+            : undefined,
+        title: () => {
             return installedAddons.selected !== null ?
                 installedAddons.selected.request.type === null ?
                     t.string('TYPE_ALL')
@@ -61,8 +62,8 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
                     :
                     typeSelect.title;
         },
-        onSelect: (event) => {
-            window.location = event.value;
+        onSelect: (value) => {
+            window.location = value;
         }
     };
     return [catalogSelect, typeSelect];