fix: destroyOnHidden should work when forceRender is true

src/DialogWrap.tsx

@@ -28,6 +28,7 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
   } = props;
   const { scrollLock: _, ...restProps } = props;
   const [animatedVisible, setAnimatedVisible] = React.useState<boolean>(visible);
+  const hasOpenedRef = React.useRef(visible);
 
   const refContext = React.useMemo(() => ({ panel: panelRef }), [panelRef]);
 
@@ -42,11 +43,13 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
   React.useEffect(() => {
     if (visible) {
       setAnimatedVisible(true);
+      hasOpenedRef.current = true;
     }
   }, [visible]);
 
   // Destroy on close will remove wrapped div
-  if (!forceRender && destroyOnHidden && !animatedVisible) {
+  // Use `hasOpenedRef` to check if component has ever been opened (after animation completes)
+  if (destroyOnHidden && hasOpenedRef.current && !visible && !animatedVisible) {
     return null;
   }
 

tests/index.spec.tsx

@@ -158,6 +158,32 @@ describe('dialog', () => {
 
       expect(document.querySelector<HTMLInputElement>('.test-input')).toHaveValue('');
     });
+
+    it('should destroy even when forceRender is true', () => {
+      const Demo: React.FC<Partial<DialogProps>> = (props) => (
+        <Dialog forceRender destroyOnHidden {...props}>
+          <input className="test-force-destroy" />
+        </Dialog>
+      );
+
+      const { rerender } = render(<Demo visible={false} />);
+
+      // Force render, but not visible yet - should still render (forceRender)
+      expect(document.querySelectorAll('.test-force-destroy')).toHaveLength(1);
+
+      // Show
+      rerender(<Demo visible />);
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      // Hide - should destroy because destroyOnHidden is true
+      rerender(<Demo visible={false} />);
+      act(() => {
+        jest.runAllTimers();
+      });
+      expect(document.querySelectorAll('.test-force-destroy')).toHaveLength(0);
+    });
   });
 
   it('esc to close', () => {