diff --git a/frontend/app/components/auth/auth.hooks.ts b/frontend/app/components/auth/auth.hooks.ts index 40a5b505..668bde96 100644 --- a/frontend/app/components/auth/auth.hooks.ts +++ b/frontend/app/components/auth/auth.hooks.ts @@ -14,6 +14,7 @@ function handleChangeIframeSize(element: HTMLElement) { export function useDropdown(disableClosing?: boolean) { const rootRef = useRef(null); + const clickInsideRef = useRef(false); const [showDropdown, setShowDropdown] = useState(false); const toggleDropdownState = () => { setShowDropdown((s) => !s); @@ -36,24 +37,29 @@ export function useDropdown(disableClosing?: boolean) { setShowDropdown(false); } - function handleClickOutside(evt: MouseEvent) { - if ( - disableClosing || - dropdownElement?.contains(evt.target as HTMLDivElement) || - (evt.target as Element).classList?.contains('telegram-auth') - // telegram button is gone from dropdown render by the time of this check - // without that condition click on telegram button considered as outside click - ) { + function handleClickOutside() { + const isClickInside = clickInsideRef.current; + + clickInsideRef.current = false; + + if (disableClosing || isClickInside) { return; } setShowDropdown(false); } + function handleClickInside() { + clickInsideRef.current = true; + } + + // check if click is inside dropdown on capture phase + dropdownElement.addEventListener('click', handleClickInside, { capture: true }); document.addEventListener('click', handleClickOutside); window.addEventListener('message', handleMessageFromParent); return () => { + dropdownElement.removeEventListener('click', handleClickInside); document.removeEventListener('click', handleClickOutside); window.removeEventListener('message', handleMessageFromParent); };