fix: popover arrow misaligned when class is prefixed (react-bootstrap…

…#5416)

src/usePopperMarginModifiers.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useRef } from 'react';
 import hasClass from 'dom-helpers/hasClass';
+import { useBootstrapPrefix } from './ThemeProvider';
 
 interface Margins {
   top: number;
@@ -25,17 +26,26 @@ export default function usePopperMarginModifiers(): [
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const margins = useRef<Margins | null>(null);
 
-  const callback = useCallback((overlay: HTMLDivElement) => {
-    if (
-      !overlay ||
-      !(hasClass(overlay, 'popover') || hasClass(overlay, 'dropdown-menu'))
-    )
-      return;
+  const popoverClass = useBootstrapPrefix(undefined, 'popover');
+  const dropdownMenuClass = useBootstrapPrefix(undefined, 'dropdown-menu');
 
-    margins.current = getMargins(overlay);
-    overlay.style.margin = '0';
-    overlayRef.current = overlay;
-  }, []);
+  const callback = useCallback(
+    (overlay: HTMLDivElement) => {
+      if (
+        !overlay ||
+        !(
+          hasClass(overlay, popoverClass) ||
+          hasClass(overlay, dropdownMenuClass)
+        )
+      )
+        return;
+
+      margins.current = getMargins(overlay);
+      overlay.style.margin = '0';
+      overlayRef.current = overlay;
+    },
+    [popoverClass, dropdownMenuClass],
+  );
 
   const offset = useMemo(() => {
     return {
@@ -73,7 +83,7 @@ export default function usePopperMarginModifiers(): [
         if (
           !overlayRef.current ||
           !state.elements.arrow ||
-          !hasClass(overlayRef.current, 'popover') ||
+          !hasClass(overlayRef.current, popoverClass) ||
           !state.modifiersData['arrow#persistent']
         ) {
           return undefined;
@@ -94,7 +104,7 @@ export default function usePopperMarginModifiers(): [
         };
       },
     };
-  }, []);
+  }, [popoverClass]);
 
   return [callback, [offset, popoverArrowMargins]];
 }

test/usePopperMarginModifiersSpec.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ThemeProvider from '../src/ThemeProvider';
+import Overlay from '../src/Overlay';
+import Popover from '../src/Popover';
+
+describe('usePopperMarginModifiers', () => {
+  it('Should set arrow margin to 0px with prefixed popover and dropdown-menu', () => {
+    const wrapper = mount(
+      <ThemeProvider prefixes={{ popover: 'prefixed' }}>
+        <Overlay show>
+          <Popover id="test-popover" />
+        </Overlay>
+      </ThemeProvider>,
+    );
+
+    const margin = wrapper.find('.arrow').getDOMNode().style.margin;
+    assert.equal(margin, '0px');
+  });
+});