You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
importtype{MutableRefObject}from"react";import{useEffect,useRef}from"react";import{off,on}from"react-use/lib/misc/util";constdefaultEvents=["mousedown","touchstart"];// This is based on react-use's clickAway hook but made to work with multiple refs in addition to a single ref,// meaning the click needs to happen outside all registered refs.// See https://github.com/streamich/react-use/blob/master/src/useClickAway.ts for the original hookexportfunctionuseClickAway<TextendsElement|null=Element,EextendsEvent=Event>(refs: Array<MutableRefObject<T>>,onClickAway: (event: E)=>void,events: string[]=defaultEvents): void{constsavedCallback=useRef(onClickAway);constsavedRefs=useRef(refs);useEffect(()=>{savedCallback.current=onClickAway;savedRefs.current=refs;},[onClickAway,refs]);useEffect(()=>{consthandler=(event: E)=>{constclickedOutside=savedRefs.current.every(ref=>{const{current: el}=ref;returnel&&!el.contains(event.targetasNode);});if(clickedOutside){savedCallback.current(event);}};for(consteventNameofevents){on(document,eventName,handler);}return()=>{for(consteventNameofevents){off(document,eventName,handler);}};},[events]);}
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:
+1,I have encountered the same business scenario😄
I made a single version of useClickAway and a plus version of useClickAway for myself and much test cases https://github.com/BoyYangzai/boyy-utils
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: