Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-08-16 20:35:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

close group dropdown when clicking off it

Browse source
This commit is contained in:
Pas 2025-08-03 14:28:24 -06:00
parent 8e902e94e4
commit b14f70c9fb
1 changed files with 25 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/form/GroupDropdown.tsx
View file

@ -1,5 +1,5 @@
import { t } from "i18next";
import React, { useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import { Icon, Icons } from "@/components/Icon";
import { UserIcon, UserIcons } from "@/components/UserIcon";
@ -36,6 +36,29 @@ export function GroupDropdown({
const [newGroup, setNewGroup] = useState("");
const [showInput, setShowInput] = useState(false);
const [selectedIcon, setSelectedIcon] = useState<UserIcons>(userIconList[0]);
const dropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setOpen(false);
setShowInput(false);
setNewGroup("");
setSelectedIcon(userIconList[0]);
}
};
if (open) {
document.addEventListener("mousedown", handleClickOutside);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [open]);
const handleToggleGroup = (group: string) => {
let newGroups;
@ -57,7 +80,7 @@ export function GroupDropdown({
};
return (
<div className="relative min-w-[200px]">
<div ref={dropdownRef} className="relative min-w-[200px]">
<button
type="button"
className="w-full px-3 py-2 text-xs bg-background-main border border-background-secondary rounded-lg text-white flex justify-between items-center hover:bg-mediaCard-hoverBackground transition-colors"