diff --git a/src/common/MultiselectMenu/MultiselectMenu.tsx b/src/common/MultiselectMenu/MultiselectMenu.tsx index efaf6229f..030b097da 100644 --- a/src/common/MultiselectMenu/MultiselectMenu.tsx +++ b/src/common/MultiselectMenu/MultiselectMenu.tsx @@ -7,6 +7,7 @@ import Dropdown from './Dropdown'; import classNames from 'classnames'; import Icon from '@stremio/stremio-icons/react'; import styles from './MultiselectMenu.less'; +import useOutsideClick from 'stremio/common/useOutsideClick'; type Props = { className?: string, @@ -18,7 +19,7 @@ type Props = { const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => { const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false); - const multiselectMenuRef = React.useRef(null); + const multiselectMenuRef = useOutsideClick(() => closeMenu()); const [level, setLevel] = React.useState(0); const onOptionSelect = (event: any) => { diff --git a/src/common/useOutsideClick.ts b/src/common/useOutsideClick.ts new file mode 100644 index 000000000..2441a5683 --- /dev/null +++ b/src/common/useOutsideClick.ts @@ -0,0 +1,25 @@ +import { useEffect, useRef } from 'react'; + +const useOutsideClick = (callback: () => void) => { + const ref = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent | TouchEvent) => { + if (ref.current && !ref.current.contains(event.target as Node)) { + callback(); + } + }; + + document.addEventListener('mouseup', handleClickOutside); + document.addEventListener('touchend', handleClickOutside); + + return () => { + document.removeEventListener('mouseup', handleClickOutside); + document.removeEventListener('touchend', handleClickOutside); + }; + }, [callback]); + + return ref; +}; + +export default useOutsideClick; \ No newline at end of file