Blaster4385/minibin
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

feat: close language dropdown on clicking outside it

Browse source
This commit is contained in:
Blaster4385 2024-05-15 12:53:04 +05:30
parent f6d70cf9ab
commit 4c1b757403
1 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
client/src/components/CustomSelect/CustomSelect.jsx
View file

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import styles from "./CustomSelect.module.css";
const CustomSelect = ({ options, onSelect }) => {
@ -6,6 +6,7 @@ const CustomSelect = ({ options, onSelect }) => {
const [selectedOption, setSelectedOption] = useState(
options.length > 0 ? options[0] : null,
);
const selectRef = useRef(null);
const toggleDropdown = () => {
setIsOpen(!isOpen);
@ -17,8 +18,21 @@ const CustomSelect = ({ options, onSelect }) => {
setIsOpen(false);
};
const handleClickOutside = (event) => {
if (selectRef.current && !selectRef.current.contains(event.target)) {
setIsOpen(false);
}
};
useEffect(() => {
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return (
<div className={styles.select}>
<div className={styles.select} ref={selectRef}>
<div className={styles.selected__option} onClick={toggleDropdown}>
{selectedOption ? (
<>