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

react-bootstrap · Aug 24, 2021 · a2a4125 · a2a4125
1 parent e3f6046
commit a2a4125
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/DropdownMenu.tsx b/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;

diff --git a/www/src/pages/components/input-group.js b/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} />