movie-web/src2/components/SelectBox.js

import { useRef, useState, useEffect } from "react"
import "./SelectBox.css"

function Option({ option, ...props }) {
    return (
        <div className="option" {...props}>
            <input
                type="radio"
                className="radio"
                id={option.id} />
            <label htmlFor={option.id}>
                <div className="item">{option.name}</div>
            </label>
        </div>
    )
}

export function SelectBox({ options, selectedItem, setSelectedItem }) {
    if (!Array.isArray(options)) {
        throw new Error("Items must be an array!")
    }

    const [active, setActive] = useState(false)

    const containerRef = useRef();

    const handleClick = e => {
        if (containerRef.current.contains(e.target)) {
            // inside click
            return;
        }
        // outside click
        closeDropdown()
    };

    const closeDropdown = () => {
        setActive(false)
    }

    useEffect(() => {
        // add when mounted
        document.addEventListener("mousedown", handleClick);
        // return function to be called when unmounted
        return () => {
            document.removeEventListener("mousedown", handleClick);
        };
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const onOptionClick = (e, option, i) => {
        e.stopPropagation()
        setSelectedItem(i)
        closeDropdown()
    }

    const handleSelectedKeyPress = event => {
        if (event.code === 'Enter' || event.code === 'Space'){
            setActive(a => !a);
        }
    }

    const handleOptionKeyPress = (option, i) => event => {
        if (event.code === 'Enter' || event.code === 'Space'){
            onOptionClick(event, option, i);
        }
    }

    return (
        <div className="select-box" ref={containerRef} onClick={() => setActive(a => !a)} >
            <div className="selected" tabIndex={0} onKeyPress={handleSelectedKeyPress}>
                {options ? (
                    <Option option={options[selectedItem]} />
                ) : null}
            </div>
            <div className={"options-container" + (active ? " active" : "")}>
                {options.map((opt, i) => (
                    <Option option={opt} key={i} onClick={(e) => onOptionClick(e, opt, i)} tabIndex={active ? 0 : undefined} onKeyPress={active ? handleOptionKeyPress(opt, i) : undefined} />
                ))}
            </div>
        </div>
    )
}