fix: arrow not positioned properly at initialisation #393 (#394)

Author: skimi

src/usePopper.js

@@ -45,6 +45,9 @@ export const usePopper = (
         left: '0',
         top: '0',
       },
+      arrow: {
+        position: 'absolute', 
+      },
     },
     attributes: {},
   });

src/usePopper.test.js

@@ -90,4 +90,24 @@ describe('userPopper', () => {
 
     expect(destroy).toHaveBeenCalled();
   });
+
+  it('Initializes the arrow positioning', async () => {
+    const arrowElement = document.createElement('div');
+    const popperElementWithArrow = document.createElement('div');
+    popperElementWithArrow.appendChild(arrowElement);
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      usePopper(referenceElement, popperElementWithArrow, {
+        placement: "bottom",
+        modifiers: [{ name: "arrow", options: { element: arrowElement } }]
+      })
+    );
+
+    expect(result.current.styles.arrow.position).toBe('absolute');
+    expect(result.current.styles.arrow.transform).toBeUndefined();
+
+    await waitForNextUpdate();
+
+    expect(result.current.styles.arrow.transform).toBeDefined();
+  });
 });