fix(Dropdown): fix menu positioning when renderOnMount=true (react-bootstrap#5989)

Author: kyletsang

src/DropdownMenu.tsx

@@ -6,6 +6,7 @@ import {
   useDropdownMenu,
   UseDropdownMenuOptions,
 } from '@restart/ui/DropdownMenu';
+import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
 import { SelectCallback } from '@restart/ui/types';
 import warning from 'warning';
@@ -185,6 +186,12 @@ const DropdownMenu: BsPrefixRefForwardingComponent<'div', DropdownMenuProps> =
         menuProps.ref,
       );
 
+      useIsomorphicEffect(() => {
+        // Popper's initial position for the menu is incorrect when
+        // renderOnMount=true. Need to call update() to correct it.
+        if (show) popper?.update();
+      }, [show]);
+
       if (!hasShown && !renderOnMount && !isInputGroup) return null;
 
       // For custom components provide additional, non-DOM, props;

www/src/pages/components/input-group.js

@@ -64,7 +64,7 @@ export default withLayout(function InputGroupSection({ data }) {
         Button addons
       </LinkedHeading>
       <ReactPlayground codeText={Buttons} />
-      <LinkedHeading h="2" id="input-group-buttons">
+      <LinkedHeading h="2" id="input-group-dropdowns">
         Buttons with Dropdowns
       </LinkedHeading>
       <ReactPlayground codeText={ButtonDropdowns} />