fix(Popover): fix arrow alignment when running Popper >= 2.84

src/usePopperMarginModifiers.tsx

@@ -25,6 +25,7 @@ export default function usePopperMarginModifiers(): [
 ] {
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const margins = useRef<Margins | null>(null);
+  const arrowMargins = useRef<Margins | null>(null);
 
   const popoverClass = useBootstrapPrefix(undefined, 'popover');
   const dropdownMenuClass = useBootstrapPrefix(undefined, 'dropdown-menu');
@@ -72,6 +73,30 @@ export default function usePopperMarginModifiers(): [
     };
   }, [margins]);
 
+  const arrow = useMemo(() => {
+    return {
+      name: 'arrow',
+      options: {
+        padding: () => {
+          // The options here are used for Popper 2.8.4 and up.
+          // For earlier version, padding is handled in popoverArrowMargins below.
+          if (!arrowMargins.current) {
+            return 0;
+          }
+
+          const { top, right } = arrowMargins.current;
+          const padding = top || right;
+          return {
+            top: padding,
+            left: padding,
+            right: padding,
+            bottom: padding,
+          };
+        },
+      },
+    };
+  }, [arrowMargins]);
+
   // Converts popover arrow margin to arrow modifier padding
   const popoverArrowMargins = useMemo(() => {
     return {
@@ -83,20 +108,28 @@ export default function usePopperMarginModifiers(): [
         if (
           !overlayRef.current ||
           !state.elements.arrow ||
-          !hasClass(overlayRef.current, popoverClass) ||
-          !state.modifiersData['arrow#persistent']
+          !hasClass(overlayRef.current, popoverClass)
         ) {
           return undefined;
         }
 
-        const { top, right } = getMargins(state.elements.arrow);
-        const padding = top || right;
-        state.modifiersData['arrow#persistent'].padding = {
-          top: padding,
-          left: padding,
-          right: padding,
-          bottom: padding,
-        };
+        if (state.modifiersData['arrow#persistent']) {
+          // @popperjs/core <= 2.8.3 uses arrow#persistent to pass padding to arrow modifier.
+          const { top, right } = getMargins(state.elements.arrow);
+          const padding = top || right;
+          state.modifiersData['arrow#persistent'].padding = {
+            top: padding,
+            left: padding,
+            right: padding,
+            bottom: padding,
+          };
+        } else {
+          // @popperjs/core >= 2.8.4 gets the padding from the arrow modifier options,
+          // so we'll get the margins here, and let the arrow modifier above pass
+          // it to popper.
+          arrowMargins.current = getMargins(state.elements.arrow);
+        }
+
         state.elements.arrow.style.margin = '0';
 
         return () => {
@@ -106,5 +139,5 @@ export default function usePopperMarginModifiers(): [
     };
   }, [popoverClass]);
 
-  return [callback, [offset, popoverArrowMargins]];
+  return [callback, [offset, arrow, popoverArrowMargins]];
 }

yarn.lock

@@ -1158,9 +1158,9 @@
     fastq "^1.6.0"
 
 "@popperjs/core@^2.5.3":
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.5.4.tgz#de25b5da9f727985a3757fd59b5d028aba75841a"
-  integrity sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ==
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
+  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
 
 "@react-bootstrap/babel-preset@^1.2.0":
   version "1.2.0"