React 18 with Next.js breaks tiny-popover

[60pfennig]

Hi,
after upgrading to React 18 with Next.js the onClickOutside function get called immediatly hitting the child of popover. So there is no chance to open the popver because the initial click on the open button gets somehow recognized as a clickOutside and reverts the isOpen change.

[60pfennig]

"dirty -fix":

      onClickOutside={() =>
        setIsOpen((isOpen) => {
          return !isOpen ? false : true;
        })
      }

[vladnicula]

I am using it fine with react 18 and next 13, but for me the clickoutside never gets called

[Parth909]

Yes, it is breaking

[addlistener]

try see if ref is properly passed

react-tiny-popover/README.md

Line 113 in fecaaef

If you'd like to use a custom React element as `Popover`'s target, you'll have to pass the `ref` that `Popover` provides to an inner DOM element of your component. The best way to accomplish this is with [React's ref forwarding API](https://reactjs.org/docs/forwarding-refs.html). Here's a simple example, using Typescript:

Because clickOutside will be fired if it's not within the child

react-tiny-popover/src/Popover.tsx

Line 180 in fecaaef

!childRef.current?.contains(e.target as Node)