fix: Fix Tooltip error when visible is initially set to true (#409

)

Closes #408

packages/reakit/src/Popover/PopoverState.ts

@@ -151,7 +151,17 @@ export function usePopoverState(
             fn: data => {
               setPlacement(data.placement);
               setPopoverStyles(data.styles as React.CSSProperties);
-              setArrowStyles(data.arrowStyles as React.CSSProperties);
+
+              // https://github.com/reakit/reakit/issues/408
+              if (
+                data.arrowStyles.left != null &&
+                !isNaN(+data.arrowStyles.left) &&
+                data.arrowStyles.top != null &&
+                !isNaN(+data.arrowStyles.top)
+              ) {
+                setArrowStyles(data.arrowStyles as React.CSSProperties);
+              }
+
               return data;
             }
           }
@@ -174,6 +184,14 @@ export function usePopoverState(
     fixed
   ]);
 
+  // Schedule an update if popover has initial visible state set to true
+  // So it'll be correctly positioned
+  React.useEffect(() => {
+    if (sealed.visible && popper.current) {
+      popper.current.scheduleUpdate();
+    }
+  }, [sealed.visible]);
+
   return {
     ...dialog,
     unstable_referenceRef: referenceRef,

packages/reakit/src/Popover/__tests__/index-test.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import {
+  Popover,
+  PopoverArrow,
+  PopoverDisclosure,
+  usePopoverState,
+  PopoverInitialState
+} from "..";
+
+function Test(props: PopoverInitialState) {
+  const popover = usePopoverState(props);
+  return (
+    <>
+      <PopoverDisclosure {...popover}>disclosure</PopoverDisclosure>
+      <Popover {...popover} aria-label="popover" tabIndex={0}>
+        <PopoverArrow {...popover} />
+        popover
+      </Popover>
+    </>
+  );
+}
+
+test("show", () => {
+  const { getByText } = render(<Test />);
+  const disclosure = getByText("disclosure");
+  const popover = getByText("popover");
+  expect(popover).not.toBeVisible();
+  fireEvent.click(disclosure);
+  expect(popover).toBeVisible();
+});
+
+test("hide", () => {
+  const { getByText } = render(<Test visible />);
+  const disclosure = getByText("disclosure");
+  const popover = getByText("popover");
+  expect(popover).toBeVisible();
+  fireEvent.click(disclosure);
+  expect(popover).not.toBeVisible();
+});

packages/reakit/src/Tooltip/__tests__/index-test.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipReference,
+  useTooltipState,
+  TooltipInitialState
+} from "..";
+
+function Test(props: TooltipInitialState) {
+  const tooltip = useTooltipState(props);
+  return (
+    <>
+      <TooltipReference {...tooltip}>disclosure</TooltipReference>
+      <Tooltip {...tooltip} aria-label="tooltip" tabIndex={0}>
+        <TooltipArrow {...tooltip} />
+        tooltip
+      </Tooltip>
+    </>
+  );
+}
+
+test("show", () => {
+  const { getByText } = render(<Test />);
+  const disclosure = getByText("disclosure");
+  const tooltip = getByText("tooltip");
+  expect(tooltip).not.toBeVisible();
+  fireEvent.mouseEnter(disclosure);
+  expect(tooltip).toBeVisible();
+});
+
+test("hide", () => {
+  const { getByText } = render(<Test visible />);
+  const disclosure = getByText("disclosure");
+  const tooltip = getByText("tooltip");
+  expect(tooltip).toBeVisible();
+  fireEvent.mouseLeave(disclosure);
+  expect(tooltip).not.toBeVisible();
+});

stories/index.stories.tsx

@@ -1,13 +1,18 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import {
+  Button,
   Dialog,
   useDialogState,
   DialogDisclosure,
   useMenuState,
   MenuDisclosure,
   Menu,
   MenuItem,
+  Tooltip,
+  TooltipArrow,
+  TooltipReference,
+  useTooltipState,
   Provider
 } from "reakit";
 import * as system from "reakit-system-bootstrap";
@@ -133,3 +138,21 @@ storiesOf("Menu", module)
     }
     return <Example />;
   });
+
+storiesOf("Tooltip", module).add("Tooltip initially visible", () => {
+  const Example = () => {
+    const tooltip = useTooltipState({ visible: true });
+    return (
+      <Provider unstable_system={system}>
+        <TooltipReference {...tooltip} as={Button}>
+          Reference
+        </TooltipReference>
+        <Tooltip {...tooltip}>
+          <TooltipArrow {...tooltip} />
+          Tooltip
+        </Tooltip>
+      </Provider>
+    );
+  };
+  return <Example />;
+});