fix(NavDropdown): fix align="end" not working (#5878)

* Add test for data-bs-popper attrib on NavDropdown * Add data-bs-popper to dropdowns in nav bars
react-bootstrap · Jun 12, 2021 · a307102 · a307102
1 parent ff8f1d0
commit a307102
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
@@ -188,7 +188,9 @@ const DropdownMenu: BsPrefixRefForwardingComponent<'div', DropdownMenuProps> =
           {...menuProps}
           style={style}
           // Bootstrap css requires this data attrib to style responsive menus.
-          {...(alignClasses.length && { 'data-bs-popper': 'static' })}
+          {...((alignClasses.length || isNavbar) && {
+            'data-bs-popper': 'static',
+          })}
           className={classNames(
             className,
             prefix,

diff --git a/test/NavDropdownSpec.js b/test/NavDropdownSpec.js
@@ -2,6 +2,7 @@ import { mount } from 'enzyme';
 
 import DropdownItem from '../src/DropdownItem';
 import Nav from '../src/Nav';
+import Navbar from '../src/Navbar';
 import NavDropdown from '../src/NavDropdown';
 
 describe('<NavDropdown>', () => {
@@ -81,4 +82,18 @@ describe('<NavDropdown>', () => {
       'dark',
     );
   });
+
+  it('sets data-bs-popper attribute on dropdown menu', () => {
+    const wrapper = mount(
+      <Navbar>
+        <NavDropdown renderMenuOnMount id="test-id" title="title">
+          <DropdownItem>Item 1</DropdownItem>
+        </NavDropdown>
+      </Navbar>,
+    );
+
+    wrapper
+      .assertSingle('.dropdown-menu')
+      .assertSingle('[data-bs-popper="static"]');
+  });
 });