From a1906692c26add69c1b71bd8fc677d77dad4db7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 4 Nov 2022 14:28:13 +0800
Subject: [PATCH] fix: Portal render logic (#8)

* test: test driven

* test: test driven
---
 src/Portal.tsx       |  6 ++++--
 tests/index.test.tsx | 29 +++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/Portal.tsx b/src/Portal.tsx
index 30f4ff3..ea6ad35 100644
--- a/src/Portal.tsx
+++ b/src/Portal.tsx
@@ -58,12 +58,14 @@ const Portal = React.forwardRef<any, PortalProps>((props, ref) => {
     children,
   } = props;
 
-  const [mergedRender, setMergedRender] = React.useState(open);
+  const [shouldRender, setShouldRender] = React.useState(open);
+
+  const mergedRender = shouldRender || open;
 
   // ====================== Should Render ======================
   React.useEffect(() => {
     if (autoDestroy || open) {
-      setMergedRender(open);
+      setShouldRender(open);
     }
   }, [open, autoDestroy]);
 
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index ede5689..8f1bbb9 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -220,4 +220,33 @@ describe('Portal', () => {
       expect(portalRef.current).toBeFalsy();
     });
   });
+
+  it('first render should ref accessible', () => {
+    let checked = false;
+
+    const Demo = ({ open }: { open?: boolean }) => {
+      const pRef = React.useRef();
+
+      React.useEffect(() => {
+        if (open) {
+          checked = true;
+          expect(pRef.current).toBeTruthy();
+        }
+      }, [open]);
+
+      return (
+        <Portal open={open}>
+          <div>
+            <p ref={pRef} />
+          </div>
+        </Portal>
+      );
+    };
+
+    const { rerender } = render(<Demo />);
+    expect(checked).toBeFalsy();
+
+    rerender(<Demo open />);
+    expect(checked).toBeTruthy();
+  });
 });