fix: Fix layout shift when first render popper (#848)

Closes #819
ariakit · Mar 1, 2021 · 37b0079 · 37b0079
1 parent 47baf00
commit 37b0079
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/reakit/src/Button/__examples__/ButtonWithTooltip/__tests__/index-test.tsx b/packages/reakit/src/Button/__examples__/ButtonWithTooltip/__tests__/index-test.tsx
@@ -32,7 +32,7 @@ test("markup", () => {
           hidden=""
           id="id-1"
           role="tooltip"
-          style="display: none; pointer-events: none;"
+          style="display: none; position: fixed; left: 0px; top: 0px; pointer-events: none;"
         >
           Tooltip
         </div>

diff --git a/packages/reakit/src/Popover/PopoverState.ts b/packages/reakit/src/Popover/PopoverState.ts
@@ -142,7 +142,11 @@ export function usePopoverState(
   const [placement, setPlacement] = React.useState(sealedPlacement);
   const [offset] = React.useState(sealedOffset || [0, gutter]);
   const [popoverStyles, setPopoverStyles] = React.useState<React.CSSProperties>(
-    {}
+    {
+      position: "fixed",
+      left: "0",
+      top: "0",
+    }
   );
   const [arrowStyles, setArrowStyles] = React.useState<React.CSSProperties>({});