fix: client render should keep sync (#412)

Author: zombieJ

src/Drawer.tsx

@@ -41,21 +41,23 @@ const Drawer: React.FC<DrawerProps> = props => {
   }
 
   // ============================= Open =============================
-  const [internalOpen, setInternalOpen] = React.useState(false);
+  const [mounted, setMounted] = React.useState(false);
 
   useLayoutEffect(() => {
-    setInternalOpen(open);
-  }, [open]);
+    setMounted(true);
+  }, []);
+
+  const mergedOpen = mounted ? open : false;
 
   // ============================ Focus =============================
   const panelRef = React.useRef<HTMLDivElement>();
 
   const lastActiveRef = React.useRef<HTMLElement>();
   useLayoutEffect(() => {
-    if (internalOpen) {
+    if (mergedOpen) {
       lastActiveRef.current = document.activeElement as HTMLElement;
     }
-  }, [internalOpen]);
+  }, [mergedOpen]);
 
   // ============================= Open =============================
   const internalAfterOpenChange: DrawerProps['afterOpenChange'] =
@@ -73,13 +75,13 @@ const Drawer: React.FC<DrawerProps> = props => {
     };
 
   // ============================ Render ============================
-  if (!forceRender && !animatedVisible && !internalOpen && destroyOnClose) {
+  if (!forceRender && !animatedVisible && !mergedOpen && destroyOnClose) {
     return null;
   }
 
   const drawerPopupProps = {
     ...props,
-    open: internalOpen,
+    open: mergedOpen,
     prefixCls,
     placement,
     autoFocus,
@@ -94,10 +96,10 @@ const Drawer: React.FC<DrawerProps> = props => {
 
   return (
     <Portal
-      open={internalOpen || forceRender || animatedVisible}
+      open={mergedOpen || forceRender || animatedVisible}
       autoDestroy={false}
       getContainer={getContainer}
-      autoLock={mask && (internalOpen || animatedVisible)}
+      autoLock={mask && (mergedOpen || animatedVisible)}
     >
       <DrawerPopup {...drawerPopupProps} />
     </Portal>

src/util.ts

@@ -1,4 +1,5 @@
 import warning from 'rc-util/lib/warning';
+import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import type { DrawerProps } from './Drawer';
 
 export function parseWidthHeight(value?: number | string) {
@@ -18,4 +19,9 @@ export function warnCheck(props: DrawerProps) {
     !('wrapperClassName' in props),
     `'wrapperClassName' is removed. Please use 'rootClassName' instead.`,
   );
+
+  warning(
+    canUseDom() || !props.open,
+    `Drawer with 'open' in SSR is not work since no place to createPortal. Please move to 'useEffect' instead.`,
+  );
 }

tests/ssr.spec.tsx

@@ -43,8 +43,36 @@ describe('SSR', () => {
 
     render(<Demo />, { container, hydrate: true });
 
-    expect(errSpy).not.toHaveBeenCalled();
+    expect(errSpy).toHaveBeenCalledWith(
+      "Warning: Drawer with 'open' in SSR is not work since no place to createPortal. Please move to 'useEffect' instead.",
+    );
+    expect(errSpy).toBeCalledTimes(1);
 
     errSpy.mockRestore();
   });
+
+  // Since we use `useLayoutEffect` to avoid SSR warning.
+  // This may affect ref call. Let's check this also.
+  it('should not block ref', done => {
+    const Demo = ({ open }: any = {}) => {
+      const ref = React.useRef<HTMLDivElement>();
+
+      React.useEffect(() => {
+        if (open) {
+          expect(ref.current).toBeTruthy();
+          done();
+        }
+      }, [open]);
+
+      return (
+        <Drawer open={open}>
+          <div ref={ref} className="bamboo" />
+        </Drawer>
+      );
+    };
+
+    const { rerender } = render(<Demo />);
+
+    rerender(<Demo open />);
+  });
 });