8000 React 18 with Next.js breaks tiny-popover · Issue #199 · alexkatz/react-tiny-popover · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

React 18 with Next.js breaks tiny-popover #199

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.

Sign up for GitHub

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

Jump to bottom
Open
60pfennig opened this issue Oct 20, 2023 · 4 comments
Open

React 18 with Next.js breaks tiny-popover #199

60pfennig opened this issue Oct 20, 2023 · 4 comments

Comments

@60pfennig
Copy link

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
Copy link
Author

"dirty -fix":

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

@vladnicula
Copy link

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

@Parth909
Copy link

Yes, it is breaking

@addlistener
Copy link
addlistener commented Mar 3, 2025 •
edited
Loading

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@vladnicula @addlistener @60pfennig @Parth909
0