Next.js click outside together with toggler
I have this component called
DateRangerPicker that opens when I click on an input tag's onClick. The input tag's component is outside the DateRangerPicker & not a child of it. I wanted to have a hook to be able to close the DateRangerPicker when I click outside of it while also being able to toggle it close using the same input tag. However, since the input tag is outside the DateRangerPicker, it gets detected as being outside & thus triggers a close followed by setting the state to open DateRangerPicker once again in a flicker. Here's the codesandbox for my use case (it's in Next.js 12):
https://codesandbox.io/p/sandbox/loving-fast-hvgh84?file=%2Fsrc%2Fpages%2Findex.js%3A7%2C430 Replies