Remove deletion of modalRoot node (#1779)

Remove deletion of empty modalRoot node to allow a different modal to continue to exist

scm-ui/ui-components/src/modals/Modal.stories.tsx

@@ -72,7 +72,7 @@ const withFormElementsFooter = (
 );
 
 storiesOf("Modal|Modal", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => (
     <NonCloseableModal>
       <p>{text}</p>
@@ -83,6 +83,11 @@ storiesOf("Modal|Modal", module)
       <p>{text}</p>
     </CloseableModal>
   ))
+  .add("Nested", () => (
+    <NestedModal>
+      <p>{text}</p>
+    </NestedModal>
+  ))
   .add("With form elements", () => (
     <Modal
       body={withFormElementsBody}
@@ -221,3 +226,35 @@ const CloseableModal: FC = ({ children }) => {
 
   return <Modal body={children} closeFunction={toggleModal} active={show} title={"Hitchhiker Modal"} />;
 };
+
+const NestedModal: FC = ({ children }) => {
+  const [showOuter, setShowOuter] = useState(true);
+  const [showInner, setShowInner] = useState(false);
+  const outerBody = (
+    <Button title="Open inner modal" className="button" action={() => setShowInner(true)}>
+      Open inner modal
+    </Button>
+  );
+
+  return (
+    <>
+      {showOuter && (
+        <Modal
+          body={outerBody}
+          closeFunction={() => setShowOuter(!showOuter)}
+          active={showOuter}
+          title="Outer Hitchhiker Modal"
+          size="M"
+        />
+      )}
+      {showInner && (
+        <Modal
+          body={children}
+          closeFunction={() => setShowInner(!showInner)}
+          active={showInner}
+          title="Inner Hitchhiker Modal"
+        />
+      )}
+    </>
+  );
+};