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

* Add test for data-bs-popper attrib on NavDropdown

* Add data-bs-popper to dropdowns in nav bars

Author: jasonjoh

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,

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"]');
+  });
 });