I am currently updating react-popper from version 1 to version 2 in my project. This migration has gone smoothly for the most part, except for an issue I've encountered when using popper in a table.
In the previous version, as I scrolled horizontally through the table, a button remained sticky at the end of the currently visible part of the table, with the translate3d value changing linearly as expected. However, in the migrated code, the button now appears at the absolute end of the table instead of being sticky. Additionally, the translate3d value behaves unexpectedly; it initially shows the correct value, but as soon as I scroll slightly to the left, it turns negative, which seems incorrect.
In the previous implementation using react-popper v1, the button maintained a sticky position at the end of the current visible portion of the table during horizontal scrolling, with the translate3d value updating linearly in a predictable manner.
After migrating to react-popper v2, the button no longer behaves as expected. Instead of maintaining its position relative to the viewport, it is now positioned at the absolute end of the table. Additionally, the translate3d values exhibit unexpected behavior: they start with the very end(with current value), but as soon as I begin to scroll left, the values rapidly shift to negative numbers, which is not the intended behavior and seems incorrect.
I am currently updating
react-popper
from version 1 to version 2 in my project. This migration has gone smoothly for the most part, except for an issue I've encountered when using popper in a table.In the previous version, as I scrolled horizontally through the table, a button remained sticky at the end of the currently visible part of the table, with the translate3d value changing linearly as expected. However, in the migrated code, the button now appears at the absolute end of the table instead of being sticky. Additionally, the translate3d value behaves unexpectedly; it initially shows the correct value, but as soon as I scroll slightly to the left, it turns negative, which seems incorrect.
Previous V1 Code:
Migrated Version 2 Code:
I've tried to adjust the styling to force the correct behavior:
In the previous implementation using react-popper v1, the button maintained a sticky position at the end of the current visible portion of the table during horizontal scrolling, with the translate3d value updating linearly in a predictable manner.
After migrating to react-popper v2, the button no longer behaves as expected. Instead of maintaining its position relative to the viewport, it is now positioned at the absolute end of the table. Additionally, the translate3d values exhibit unexpected behavior: they start with the very end(with current value), but as soon as I begin to scroll left, the values rapidly shift to negative numbers, which is not the intended behavior and seems incorrect.