React-boostrap Popover not stay with button on scroll container

Question

I recreated popover in the codesandbox here, follow the documentation code, the popover show up, but after scroll, the pointer does not align with the button anymore, I tried to pass container prop, but still not working. How can I solve this?

To Reproduce

Steps to reproduce the behavior:

1. Click the button
2. Popover show up
3. Scroll in the container
4. Popover follows the scrolling event instead of element.

Reproducible Example

codesandbox

App.js

import "./styles.css";
import {
  Popover,
  OverlayTrigger,
  Button,
  ButtonToolbar
} from "react-bootstrap";
import React from "react";
import "bootstrap/dist/css/bootstrap.css";

const popoverBottom = (
  <Popover id="popover-positioned-scrolling-bottom" title="Popover bottom">
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

const popoverRight = (
  <Popover id="popover-positioned-scrolling-right" title="Popover right">
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

export default class Positioner extends React.Component {
  render() {
    return (
      <div className="bs-example-popover-scroll">
        <ButtonToolbar style={{ padding: "100px 0" }}>
          <OverlayTrigger
            container={this}
            trigger="click"
            placement="bottom"
            overlay={popoverBottom}
          >
            <Button>Bottom guacamole!</Button>
          </OverlayTrigger>
          <OverlayTrigger
            container={this}
            trigger="click"
            placement="right"
            overlay={popoverRight}
          >
            <Button>Right guacamole!</Button>
          </OverlayTrigger>
        </ButtonToolbar>
      </div>
    );
  }
}

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import "bootstrap/dist/css/bootstrap.css";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.bs-example-popover-scroll {
  background: grey;
  padding: 20px;
  height: 200px;
  overflow: scroll;
  border: 1px solid black;
}

Expected behavior

A popover should stay with a button element instead of scrolling container. A clear and concise description of what you expected to happen.

Environment

• Operating System: Catalina 10.15.7
• Browser, Version chrome Version 95.0.4638.54
• React-Bootstrap Version 0.33.1 (Same from the documentation)

Answer 1

Your code is right. Since popover is an absolute div, it is positioned relative to the parent element with position relative. since you have not mentioned parent div(.bs-example-popover-scroll) as relative, the popover is positioned with respect to the document so it doesn't adjust as per scroll.

just add position relative to div.bs-example-popover-scroll and it work

modified code sandbox example

App.js

import "./styles.css";
import {
  Popover,
  OverlayTrigger,
  Button,
  ButtonToolbar
} from "react-bootstrap";
import React from "react";
import "bootstrap/dist/css/bootstrap.css";

const popoverBottom = (
  <Popover id="popover-positioned-scrolling-bottom" title="Popover bottom">
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

const popoverRight = (
  <Popover id="popover-positioned-scrolling-right" title="Popover right">
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

export default class Positioner extends React.Component {
  render() {
    return (
      <div
        className="bs-example-popover-scroll"
        style={{ position: "relative" }}
      >
        <ButtonToolbar style={{ padding: "100px 0" }}>
          <OverlayTrigger
            container={this}
            trigger="click"
            placement="bottom"
            overlay={popoverBottom}
          >
            <Button>Bottom guacamole!</Button>
          </OverlayTrigger>
          <OverlayTrigger
            container={this}
            trigger="click"
            placement="right"
            overlay={popoverRight}
          >
            <Button>Right guacamole!</Button>
          </OverlayTrigger>
        </ButtonToolbar>
      </div>
    );
  }
}