#2912 reproduce bug

example/package.json

@@ -42,7 +42,8 @@
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^2.0.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.2",
@@ -53,6 +54,7 @@
     "@types/node": "^16.11.12",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
+    "@types/react-modal": "^3.16.0",
     "@vitejs/plugin-react": "^4.0.0",
     "@welldone-software/why-did-you-render": "^4.3.1",
     "cross-env": "^7.0.3",

example/src/App.tsx

@@ -8,6 +8,7 @@ import {
   StructServiceProvider,
 } from 'ketcher-core';
 import { PolymerToggler } from './PolymerToggler';
+import Modal from 'react-modal';
 
 const getHiddenButtonsConfig = (): ButtonsConfig => {
   const searchParams = new URLSearchParams(window.location.search);
@@ -48,47 +49,56 @@ const App = () => {
   const hiddenButtonsConfig = getHiddenButtonsConfig();
   const [hasError, setHasError] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
   const [showPolymerEditor, setShowPolymerEditor] = useState(false);
-
+  Modal.setAppElement('#root');
   return showPolymerEditor ? (
     <>
       <PolymerEditor />
       <PolymerToggler toggle={setShowPolymerEditor} />
     </>
   ) : (
     <>
-      <Editor
-        errorHandler={(message: string) => {
-          setHasError(true);
-          setErrorMessage(message.toString());
-        }}
-        buttons={hiddenButtonsConfig}
-        staticResourcesUrl={process.env.PUBLIC_URL}
-        structServiceProvider={structServiceProvider}
-        onInit={(ketcher: Ketcher) => {
-          window.ketcher = ketcher;
-          window.parent.postMessage(
-            {
-              eventType: 'init',
-            },
-            '*',
-          );
-        }}
-      />
-      {enablePolymerEditor && <PolymerToggler toggle={setShowPolymerEditor} />}
-      {hasError && (
-        <InfoModal
-          message={errorMessage}
-          close={() => {
-            setHasError(false);
+      <button onClick={() => setIsOpen(true)}>open</button>
+      <Modal isOpen={isOpen}>
+        <div>
+          <button onClick={() => setIsOpen(false)}>close</button>
+          <Editor
+            errorHandler={(message: string) => {
+              setHasError(true);
+              setErrorMessage(message.toString());
+            }}
+            buttons={hiddenButtonsConfig}
+            staticResourcesUrl={process.env.PUBLIC_URL}
+            structServiceProvider={structServiceProvider}
+            onInit={(ketcher: Ketcher) => {
+              window.ketcher = ketcher;
+              window.parent.postMessage(
+                {
+                  eventType: 'init',
+                },
+                '*',
+              );
+            }}
+          />
+          {enablePolymerEditor && (
+            <PolymerToggler toggle={setShowPolymerEditor} />
+          )}
+          {hasError && (
+            <InfoModal
+              message={errorMessage}
+              close={() => {
+                setHasError(false);
 
-            // Focus on editor after modal is closed
-            const cliparea: HTMLElement | null =
-              document.querySelector('.cliparea');
-            cliparea?.focus();
-          }}
-        />
-      )}
+                // Focus on editor after modal is closed
+                const cliparea: HTMLElement | null =
+                  document.querySelector('.cliparea');
+                cliparea?.focus();
+              }}
+            />
+          )}
+        </div>
+      </Modal>
     </>
   );
 };