fix(home): options modal flickered when clicked twice

This commit is contained in:
Tom (plebeius.eth)
2024-09-02 17:29:12 +02:00
parent 2590a9c096
commit 30b91521b9
+4 -3
View File
@@ -7,6 +7,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [showFilterModal, setShowFilterModal] = useState(false); const [showFilterModal, setShowFilterModal] = useState(false);
const modalRef = useRef<HTMLDivElement>(null); const modalRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLSpanElement>(null);
const { const {
showNsfwBoardsOnly, showNsfwBoardsOnly,
@@ -23,11 +24,11 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
const handleClickOutside = useCallback( const handleClickOutside = useCallback(
(event: MouseEvent) => { (event: MouseEvent) => {
if (modalRef.current && !modalRef.current.contains(event.target as Node)) { if (modalRef.current && !modalRef.current.contains(event.target as Node) && buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
setShowFilterModal(false); setShowFilterModal(false);
} }
}, },
[modalRef, setShowFilterModal], [modalRef, buttonRef, setShowFilterModal],
); );
useEffect(() => { useEffect(() => {
@@ -39,7 +40,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
return ( return (
<> <>
<span ref={modalRef} onClick={() => setShowFilterModal(true)}> <span ref={buttonRef} onClick={() => !showFilterModal && setShowFilterModal(true)}>
{isBoardsBoxModal ? t('filter') : t('options')} {isBoardsBoxModal ? t('filter') : t('options')}
</span> </span>
{showFilterModal && ( {showFilterModal && (