Placeholder causes the window to scroll-down when using ui-bootstrap's popover

[omril1]

Noticed this bug when opening a small popover when the sticky element (table header in my case) was sticky and the placeholder for the sticky element is completely out of view.

Bootstrap's popover causes a re-render of the sticky element, which cause the placeholder to be removed and re-added back, and a window scroll down (by the placeholder/sticky element's height).

Using the event change API we see that the the bootstrap poopover causes a change from stick to stick

<div hl-sticky event="stickyChanged(event)"></div>

function stickyChanged({event)}) {
  console.log(event); //prints stick every time the popover is opened
}

Diagnosed it with chrome dev-tools performance tab (browser render happens right after the sticky state render)

---

For people who get this bug too:

A fix we did was to counteract the scrolling side-effect was to scroll back that amount of pixels inside the event attribute provided with the API of the directive.

Something like:

function stickyChanged({event: stickyStatus}) {
  const scrollDiff = window.scrollY - <PLACEHOLDER_HEIGHT>;

  if (stickyStatus == 'stick' && lastStickyStatus == stickyStatus) {
    if (scrollDiff >= 50) {
      window.scrollBy(0, - <PLACEHOLDER_HEIGHT>); //should be negative in our case
    }
  }
  lastStickyStatus = stickyStatus;
}

[harm-less]

Thanks for reporting this. I've not experienced this before as my setups were not like this.

Does it help if you make the popover render to the body (at popover-append-to-body)?

Btw, how did you get it to work in a table? I've people asking for this like in issue #25.

[omril1]

@harm-less No, popover-append-to-body doesn't solve this issue,

It wasn't really a table element, but a flex-box layout that was used like a table.

[harm-less]

Mm, would it be possible for you to create a Plunker for this issue because right now I find it hard to assess what is causing it?