Popper not sticking to ref element on scroll

Question

Demo: https://codesandbox.io/s/agitated-euler-rep54

Click on any "click me to set ref". The popper correctly positions itself. Now start scrolling, and you'll see the popper doesn't stick to the ref.

If you move .popper to be a direct child of .scroll-body, it works.

<div id="app">
    <div class="scroll-body">
      <div v-for="n in 40">
          <span @click="setRef" class="ref">
            click me to set ref
          </span>
      </div>
    </div>
    <div ref="popper" class="popper">popper</div>
</div>

What popper option do I need to set to make it work?

Answer 1

You should avoid changing the reference after the instance has been created like state.elements.reference = newReference and instead create a fresh popper instance entirely. The reason is the scrollParents detection is done when the instance is created (or updated).

https://codesandbox.io/s/nifty-night-5vjfm

You can change the reference dynamically if you call .setOptions({}) after setting it though, but I would recommend the above instead.

Answer 2

If you put overflow-y: scroll; on #app, it will work the way you want. Overflow-y needs to be set on the parent for it to affect the child.

Answer 3

I have encounter this issue, in my case, I forget to set container overflow: auto.