diff --git a/packages/reakit/src/Dialog/__tests__/Dialog-test.tsx b/packages/reakit/src/Dialog/__tests__/Dialog-test.tsx
index 02abc3e26e..2dce8a8fcc 100644
--- a/packages/reakit/src/Dialog/__tests__/Dialog-test.tsx
+++ b/packages/reakit/src/Dialog/__tests__/Dialog-test.tsx
@@ -43,12 +43,6 @@ test("render visible", () => {
expect(baseElement).toMatchInlineSnapshot(`
-
@@ -63,12 +57,6 @@ test("render visible", () => {
dialog
-
`);
});
diff --git a/packages/reakit/src/Dialog/__utils/useFocusTrap.ts b/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
index 8841df2c73..26fc7e67fc 100644
--- a/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
+++ b/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
@@ -34,8 +34,8 @@ export function useFocusTrap(
if (!portal) {
warning(
- true,
- "Can't trap focus within modal dialog because either `ref` wasn't passed to component or the component wasn't rendered within a portal",
+ !!portalRef.current,
+ "Can't trap focus within modal dialog because `ref` wasn't passed to component.",
"See https://reakit.io/docs/dialog"
);
return undefined;
@@ -61,7 +61,7 @@ export function useFocusTrap(
if (beforeElement.current) removeFromDOM(beforeElement.current);
if (afterElement.current) removeFromDOM(afterElement.current);
};
- }, [portalRef, shouldTrap]);
+ }, [dialogRef, portalRef, shouldTrap]);
// Focus trap
React.useEffect(() => {
diff --git a/packages/reakit/src/Portal/Portal.tsx b/packages/reakit/src/Portal/Portal.tsx
index 0861a99984..13a4e818db 100644
--- a/packages/reakit/src/Portal/Portal.tsx
+++ b/packages/reakit/src/Portal/Portal.tsx
@@ -1,6 +1,5 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
-import { useIsomorphicEffect } from "reakit-utils/useIsomorphicEffect";
import { canUseDOM } from "reakit-utils/canUseDOM";
export type PortalProps = {
@@ -23,23 +22,18 @@ export function Portal({ children }: PortalProps) {
// otherwise it's document.body
// https://github.com/reakit/reakit/issues/513
const context = React.useContext(PortalContext) || getBodyElement();
- const [hostNode] = React.useState(() => {
- if (canUseDOM) {
- const element = document.createElement("div");
- element.className = Portal.__className;
- return element;
- }
- // ssr
- return null;
- });
-
- useIsomorphicEffect(() => {
- if (!hostNode || !context) return undefined;
- context.appendChild(hostNode);
+ const [hostNode, setHostNode] = React.useState(null);
+
+ React.useEffect(() => {
+ if (!context) return undefined;
+ const element = document.createElement("div");
+ element.className = Portal.__className;
+ setHostNode(element);
+ context.appendChild(element);
return () => {
- context.removeChild(hostNode);
+ context.removeChild(element);
};
- }, [hostNode, context]);
+ }, [context]);
if (hostNode) {
return ReactDOM.createPortal(
@@ -49,7 +43,6 @@ export function Portal({ children }: PortalProps) {
hostNode
);
}
-
// ssr
return null;
}