Spaces:
Sleeping
Sleeping
File size: 1,564 Bytes
7949d20 411ae69 7949d20 411ae69 7949d20 411ae69 7949d20 411ae69 7949d20 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | import { useEffect } from 'react'
/**
* Calls handler when a click/touch occurs outside the given ref element.
*
* Handles mobile edge case: when a native file picker dialog opens and closes,
* the browser sometimes fires a phantom mousedown on <body>/<html> as it
* restores focus. This would incorrectly close the tools menu mid-upload.
* We ignore those document-level phantom events.
*/
export function useClickOutside(ref, handler, excludeRefs = []) {
useEffect(() => {
const handleClickOutside = (event) => {
// Ignore phantom events on document-level elements — these often fire
// after native dialogs (file picker, camera, etc.) return focus to the page
if (
event.target === document.body ||
event.target === document.documentElement ||
event.target === document
) {
return
}
// Don't close if clicking on an excluded element
for (const excludeRef of excludeRefs) {
if (excludeRef.current && event.target === excludeRef.current) {
return
}
}
if (ref.current && !ref.current.contains(event.target)) {
handler()
}
}
// Use both mouse and touch events for cross-platform support
document.addEventListener('mousedown', handleClickOutside)
document.addEventListener('touchstart', handleClickOutside)
return () => {
document.removeEventListener('mousedown', handleClickOutside)
document.removeEventListener('touchstart', handleClickOutside)
}
}, [ref, handler, excludeRefs])
}
|