atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
11.92k stars 520 forks source link

HTML content doesn't get click event while using appendTo: document.body. #904

Closed vivekshah-zymr closed 3 years ago

vivekshah-zymr commented 3 years ago

Bug description

Hey, I am using tippy to make a dropdown in my react project. In dropdown I have option item as a div and I bind the click event to them. Now click events of the dropdown item works fine normally. But when I add appendTo: document.body to the tippy, the click events to the dropdown items doesn't fire the click events on it.

Reproduction

Code Sandbox link: https://codesandbox.io/s/dazzling-almeida-dymj7?file=/src/Main.js:867-880

Check the above sandbox, when you open the dropdown. Click event for the dropdown item doesn't work.

atomiks commented 3 years ago

You should use the React version of Tippy. There's probably a reconciliation issue here and React isn't adding the listener to the element since it got moved.