Error when content with fixed position on scroll in yjose reactjs-popup

Explanation of the problem

Problem: In the new major version 2.0.3 of a tooltip component, the position of the tooltip inside a navigation bar becomes incorrect after scrolling the window. The issue can be seen in the provided test case link (https://codesandbox.io/s/reactjs-popup-issue-position-fixed-vpeih).

Cause: The problem is caused by the following line of code, which sets the top and left position of the tooltip to the current coordinates of the cursor, plus the current scroll values of the window:

contentRef.current.style.top = `${cords.top + window.scrollY}px`;
contentRef.current.style.left = `${cords.left + window.scrollX}px`;

This results in the tooltip’s position changing when the window is scrolled, which is not the expected behavior.

Expected behavior: The tooltip should maintain a fixed position on the content, regardless of the scroll values of the window.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for error when content with fixed position on scroll in yjose reactjs-popup

window.addEventListener("scroll", () => {
  contentRef.current.style.top = `${cords.top + window.scrollY}px`;
  contentRef.current.style.left = `${cords.left + window.scrollX}px`;
});

This way the position of tooltip would be updated on every scroll event and would not be affected by the scroll.

Other popular problems with yjose reactjs-popup

Problem: Content with fixed position on scroll

With the new major version of yjose reactjs-popup, users have reported issues with the fixed position of content inside a navigationbar when scrolling the window. The problem is caused by the following code:

contentRef.current.style.top = `${cords.top + window.scrollY}px`;
contentRef.current.style.left = `${cords.left + window.scrollX}px`;

where the top and left positions of the content are set to the sum of the coordinates and the scroll values of the window.

Solution:

To resolve this issue, the fixed position of the content should be set independent of the scroll values of the window. This can be achieved by setting the position value to “fixed” and using CSS to control the top and left positions.

contentRef.current.style.position = "fixed";
contentRef.current.style.top = `${cords.top}px`;
contentRef.current.style.left = `${cords.left}px`;

Problem: Opening and closing animation issues

Some users have reported issues with the animation of the popup while opening and closing. The animation may be choppy or may not work at all.

Solution:

To resolve this issue, it is recommended to use CSS transitions to control the animation of the popup. This can be done by adding transition properties to the CSS class of the popup, such as transition-duration, transition-timing-function, and transition-property.

Problem: Popup not closing on overlay click

Some users have reported that the popup does not close when clicking on the overlay.

Solution:

To resolve this issue, it is recommended to add an onClick event to the overlay that triggers the function to close the popup.

A brief introduction to yjose reactjs-popup

yjose reactjs-popup is a popular React library that allows developers to create customizable and highly configurable popups and modals in their web applications. It makes use of React hooks and context API to create a seamless and intuitive user experience. The library supports a wide range of features such as position, animation, and custom renderers, making it a versatile tool for creating various types of popups. It also comes with a built-in trigger component that enables developers to control the opening and closing of the popups.

One of the key advantages of yjose reactjs-popup is its flexibility. It allows developers to create any type of popup they need by providing various props and hooks. The library also supports server-side rendering, which makes it a suitable choice for projects that require SEO-friendly popups. The library also provides an easy-to-use API, with clear and concise documentation, making it easy for developers to get started and integrate it into their projects. Additionally, it provides an easy way to customize the styles of the popups by providing the ability to pass CSS classnames to the library components.

Most popular use cases for yjose reactjs-popup

import Popup from 'reactjs-popup';

function CustomPopup() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Show Popup</button>
      <Popup
        open={isOpen}
        onClose={() => setIsOpen(false)}
        contentStyle={{ background: '#fafafa', width: '300px' }}
      >
        <p>This is a custom message displayed in a pop-up.</p>
        <button onClick={() => setIsOpen(false)}>Close</button>
      </Popup>
    </>
  );
}