Migration Issue with react-popper from v1 to v2 Causes Incorrect Button Positioning in Table

[vaibhv-sortly]

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:

const PopperElement = memo(({ expanded, style, refProp, placement, update, isBucket, children }) => {
  // eslint-disable-next-line
  useEffect(() => update(), [expanded, isBucket])

  return (
    <div data-placement={placement} style={style} ref={refProp}>
      {children}
    </div>
  )
})

export const PopperContainer = memo(({ children, ...props }) => {
  const popperPlacement = props.mode === 'alerts' ? 'right-start' : 'left-start'

  return (
    <Popper placement={popperPlacement}>
      {({ placement, ref, style, scheduleUpdate }) => {
        return (
          <PopperElement
            placement={placement}
            style={{ zIndex: 8, ...style }}
            refProp={ref}
            isBucket={props.isBucket}
            expanded={R.prop('expanded', props)}
            update={scheduleUpdate}
          >
            {children}
          </PopperElement>
        )
      }}
    </Popper>
  )
})

Migrated Version 2 Code:

export const PopperContainer = memo(
  ({ children, referenceElement, popperElement, setPopperElement, ...props }) => {
    const popperPlacement = props.mode === 'alerts' ? 'right-start' : 'left-start'

    const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
      placement: popperPlacement,
      modifiers: [
        {
          name: 'computeStyles',
          options: {
            adaptive: false
          }
        }
      ]
      })

    const expanded = R.prop('expanded', props)
    useEffect(() => {
      if (update) {
        console.log('here update')
        update()
      }
    }, [expanded, props.isBucket, update])

    return (
      <div ref={setPopperElement} style={{ ...styles.popper, zIndex: 8 }} {...attributes.popper}>
        {children}
      </div>
    )
  }
)

I've tried to adjust the styling to force the correct behavior:

    // eslint-disable-next-line no-unused-vars
    const { left, top, bottom, right, ...restStyles } = styles.popper
    restStyles.willChange = 'transform'
    restStyles.left = 0
    restStyles.top = 0
    restStyles.position = 'absolute'

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.