-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useClickAway should support one or more elements #2490
Comments
+1,I have encountered the same business scenario😄 |
For import { RefObject, useEffect, useRef } from 'react';
import { off, on } from './misc/util';
const defaultEvents = ['mousedown', 'touchstart'];
const useClickAway = <E extends Event = Event>(
ref: RefObject<HTMLElement | null> | Array<RefObject<HTMLElement | null>>,
onClickAway: (event: E) => void,
events: string[] = defaultEvents
) => {
const savedCallback = useRef(onClickAway);
const savedRefs = useRef<Array<RefObject<HTMLElement | null>>>(
Array.isArray(ref) ? ref : [ref]
);
useEffect(() => {
savedCallback.current = onClickAway;
savedRefs.current = Array.isArray(ref) ? ref : [ref];
}, [onClickAway, ref]);
useEffect(() => {
const handler = (event: E) => {
const clickedOutside = savedRefs.current.every((ref) => {
const { current: el } = ref;
return el && !el.contains(event.target as Node);
});
if (clickedOutside) {
savedCallback.current(event);
}
};
for (const eventName of events) {
on(document, eventName, handler);
}
return () => {
for (const eventName of events) {
off(document, eventName, handler);
}
};
}, [events]);
};
export default useClickAway; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have a case where a popover is supposed to be closed when I click anything outside the popover. The button which triggers the popover also works as a toggle, i. e. clicking it again closes the popover. This behavior is quite common and intuitive and should be preserved. Now, using
useClickAway
I can close the popover but when I try to do the same via toggling said button, the events interfere with each other and result in the popover being displayed again (the click outside closing it and the click on the button showing it again).The apparent fix would be to allow useClickAway to receive one element or a list of elements and in the latter case only invoke the callback function if the click happened outside all observed elements.
I've adapted the
useClickAway
implementation to do this as follows and it works for my specific case:I'd appreciate it if something like that became available upstream so I could get rid of my custom implementation. I could also make a PR if that's increases the chance of it being made available upstream.
The text was updated successfully, but these errors were encountered: