FocusOutSideUseCase.jsx

import { useState } from "react";
import FocusOutside from '../../lib/FocusOutside'

const SelectCountry = (props)=>{
    const [ShowMenu, setShowMenu] = useState(false)

    const toogleMenu = ()=>{
        setShowMenu(!ShowMenu)
    }

    const onClickedOutside = ()=>{
        setShowMenu(false)
    }

    return (
        <FocusOutside clickedOutside={onClickedOutside}>
            <div tabIndex={0} onClick={toogleMenu}>
                <div>
                    <span className="text-base text-gray-600 font-semibold uppercase mr-3">
                        {/* Default value */}
                        <svg className="inline-block w-4 h-4 fill-current text-gray-700 absolute top-1/2 right-1 transform -translate-y-1/2" viewBox="0 0 24 24"><path d="M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z"/></svg>
                    </span>
                    {ShowMenu && (
                        <div className={"w-48 h-52 absolute top-12 -left-1 bg-gray-50 ring-1 ring-gray-300 rounded-lg shadow-lg "+styles.SelectCountryValues}>
                            <span tabIndex={0}>India</span>
                            <span tabIndex={0}>Canada</span>
                            <span tabIndex={0}>USA</span>
                        </div>
                    )}
                </div>
            </div>
        </FocusOutside>
    )
}

export default SelectCountry;