bug(AppRoot): don't remote passed portal root on unmount (#5469)

fix: #5046 If portalRoot has been passed as a prop we shouldn't remove it from the document on unmount.
VKCOM · Jul 17, 2023 · 9321cfd · 9321cfd
1 parent f19e198
commit 9321cfd
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/packages/vkui/src/components/AppRoot/AppRoot.test.tsx b/packages/vkui/src/components/AppRoot/AppRoot.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { SizeType } from '../../lib/adaptivity';
 import { baselineComponent } from '../../testing/utils';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
@@ -26,6 +26,30 @@ describe('AppRoot', () => {
         unmount();
         expect(document.body).not.toContainElement(portalRoot as HTMLElement);
       });
+
+      it('does not remove external portalRoot provided as prop', () => {
+        const TestComponent = () => {
+          const [shouldMount, setShouldMount] = React.useState(false);
+          const portalRootRef = React.useRef<HTMLDivElement | null>(null);
+          return (
+            <div>
+              {shouldMount && <AppRoot portalRoot={portalRootRef} />}
+              <button onClick={() => setShouldMount((mountFlag) => !mountFlag)}>
+                {shouldMount ? 'unmount' : 'mount'}
+              </button>
+              <div data-testid="portal-root" ref={portalRootRef} />
+            </div>
+          );
+        };
+
+        render(<TestComponent />);
+
+        expect(screen.queryByTestId('portal-root')).toBeTruthy();
+        fireEvent.click(screen.getByText('mount'));
+        expect(screen.queryByTestId('portal-root')).toBeTruthy();
+        fireEvent.click(screen.getByText('unmount'));
+        expect(screen.queryByTestId('portal-root')).toBeTruthy();
+      });
     });
     describe('applies container classes', () => {
       it('html class="vkui" in full mode', () => {

diff --git a/packages/vkui/src/components/AppRoot/AppRoot.tsx b/packages/vkui/src/components/AppRoot/AppRoot.tsx
@@ -74,7 +74,9 @@ export const AppRoot = ({
     }
     setPortalRoot(portal);
     return () => {
-      portal?.parentElement?.removeChild(portal);
+      if (!portalRootProp) {
+        portal?.parentElement?.removeChild(portal);
+      }
     };
   }, [portalRootProp]);