diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index 51b6bef4d..8ae0622e7 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -7,10 +7,24 @@ const Popup = require('stremio/common/Popup'); const useBinaryState = require('stremio/common/useBinaryState'); const styles = require('./styles'); -const Multiselect = ({ className, direction, title, options, selected, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => { - options = Array.isArray(options) ? options.filter((option) => option && typeof option.value === 'string') : []; - selected = Array.isArray(selected) ? selected.filter((value) => typeof value === 'string') : []; +const Multiselect = ({ className, direction, title, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => { const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false); + const options = React.useMemo(() => { + return Array.isArray(props.options) ? + props.options.filter((option) => { + return option && typeof option.value === 'string'; + }) + : + []; + }, [props.options]); + const selected = React.useMemo(() => { + return Array.isArray(props.selected) ? + props.selected.filter((value) => { + return typeof value === 'string'; + }) + : + []; + }, [props.selected]); const popupLabelOnClick = React.useCallback((event) => { if (typeof props.onClick === 'function') { props.onClick(event); @@ -68,8 +82,8 @@ const Multiselect = ({ className, direction, title, options, selected, disabled, open={menuOpen} direction={direction} onCloseRequest={closeMenu} - renderLabel={(popupProps) => ( - )} renderMenu={() => (
{ options.length > 0 ? - options.map(({ label, value }) => { - const isSelected = selected.includes(value); - const title = typeof label === 'string' ? label : value; - return ( - - ) - }) + options.map(({ label, value }) => ( + + )) :
No options available