Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Setting popperConfig on Dropdown Menu has no effect

See original GitHub issue

Describe the bug

When adding a popperConfig property to the Dropdown.Menu component the configurations are not visible on the rendered element.

To Reproduce

Steps to reproduce the behavior:

npx create-react-app sandbox
yarn add react-bootstrap@1.0.0
Use a Dropdown.Menu component and set the popperConfig property

Reproducible Example

Working example can be viewed on CodeSandbox.

Expected behavior

Dropdown.Menu applies the configuration set by the popperConfig property.

Screenshots

popperConfig

Environment (please complete the following information)

Windows 10 / macOS 10.15
Chrome Version 80.0.3987.163 (Official Build) (64-bit)
React-Bootstrap 1.0.0

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:12 (3 by maintainers)

Top GitHub Comments

3reactions

jquensecommented, Apr 22, 2020

Upstream now includes the offset modifier, not sure when that happened…

@kit-scalyr no that won’t work, the format for modifiers is wrong, it needs to be an array, check the popper v2 documentation

1reaction

pngo-makershubcommented, Aug 14, 2021

I’m trying to do exactly this. I’m using version 1.6.1 and offset modifier does not offset the dropdown menu. Could you please elaborate on how this issue was resolved?

Top Results From Across the Web

React Bootstrap OverlayTrigger change popperConfig offset ...

The only workaround would be to disable popper on the dropdown all together and just generate pure css but cannot seem to be...

Dropdowns · Bootstrap v5.0

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript ...

Overlays | React-Bootstrap

It's included automatically with React-Bootstrap, but you should reference the API for more advanced use cases. The <Tooltip> and <Popover> components do not...

How To Create a Hoverable Dropdown Menu - W3Schools

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP,...

Modifiers - Popper

effect · The eventListeners modifier uses this to add and remove window / document event listeners which is not part of the main...