Custom dropdown popperConfig={{ strategy: "fixed" }} works differently than expected.

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the bug

I want use popperConfig(strategy: “fixed” ) option in custom dropdown. but It works differently than expected in v2.1.1(bootstrap 5.1) The dropdown menu appears in the upper left corner of the screen.

Expected behavior

The dropdown menu appears in the under of the Custom Toggle(Anchor). v1.6.1(Bootstrap 4)

To Reproduce

1. Go to react-bootstrap
2. Dropdown
3. Custom Dropdown Components Example
4. add popperConfig={{ strategy: “fixed” }} in Dropdown.Menu

Reproducible Example

// The forwardRef is important!!
// Dropdown needs access to the DOM node in order to position the Menu
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <a
    href=""
    ref={ref}
    onClick={(e) => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {children}
    &#x25bc;
  </a>
));

// forwardRef again here!
// Dropdown needs access to the DOM of the Menu to measure it
const CustomMenu = React.forwardRef(
  ({ children, style, className, 'aria-labelledby': labeledBy }, ref) => {
    const [value, setValue] = useState('');

    return (
      <div
        ref={ref}
        style={style}
        className={className}
        aria-labelledby={labeledBy}
      >
        <FormControl
          autoFocus
          className="mx-3 my-2 w-auto"
          placeholder="Type to filter..."
          onChange={(e) => setValue(e.target.value)}
          value={value}
        />
        <ul className="list-unstyled">
          {React.Children.toArray(children).filter(
            (child) =>
              !value || child.props.children.toLowerCase().startsWith(value),
          )}
        </ul>
      </div>
    );
  },
);

render(
  <Dropdown>
    <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
      Custom toggle
    </Dropdown.Toggle>

    <Dropdown.Menu as={CustomMenu} popperConfig={{ strategy: "fixed" }}>
      <Dropdown.Item eventKey="1">Red</Dropdown.Item>
      <Dropdown.Item eventKey="2">Blue</Dropdown.Item>
      <Dropdown.Item eventKey="3" active>
        Orange
      </Dropdown.Item>
      <Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>,
);

Screenshots

No response

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of React-Bootstrap are you using?

2.1.1

What version of Bootstrap are you using?

5.1.3

Additional context

No response

[kyletsang]

The initial rendered position is wrong, but once you scroll, it corrects itself.

As a workaround try adding renderOnMount to the dropdown menu.

[Douten]

RenderOnMount was causing weird issues for me. Since it fixes itself when scrolling I did this instead.

  const popperConfig = {
    strategy: "fixed",
    onFirstUpdate: () => window.dispatchEvent(new CustomEvent('scroll')),
  }

https://popper.js.org/docs/v2/lifecycle/#hook-into-the-lifecycle