Prevented overlapping modals in react tree and fixed request canceling.

package.json

@@ -40,7 +40,7 @@
     "prop-types": "^15.6.0",
     "react": "^16.3.2",
     "react-aria-menubutton": "^5.1.1",
-    "react-aria-modal": "^2.12.1",
+    "react-aria-modal": "^3.0.0",
     "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.7.2",
     "react-codemirror2": "^4.2.1",

src/components/modals/OpenModal.jsx

@@ -76,7 +76,10 @@ class OpenModal extends React.Component {
   onStyleSelect = (styleUrl) => {
     this.clearError();
 
+    const requestController = new AbortController();
+
     const activeRequest = fetch(styleUrl, {
+      signal: requestController.signal,
       mode: 'cors',
       credentials: "same-origin"
     })
@@ -165,7 +168,9 @@ class OpenModal extends React.Component {
       );
     }
 
-    return <Modal
+    return  (
+      <div>
+        <Modal
           data-wd-key="open-modal"
           isOpen={this.props.isOpen}
           onOpenToggle={() => this.onOpenToggle()}
@@ -200,6 +205,7 @@ class OpenModal extends React.Component {
             {styleOptions}
             </div>
           </section>
+        </Modal>
 
         <LoadingModal
           isOpen={!!this.state.activeRequest}
@@ -207,7 +213,8 @@ class OpenModal extends React.Component {
           onCancel={(e) => this.onCancelActiveRequest(e)}
           message={"Loading: "+this.state.activeRequestUrl}
         />
-    </Modal>
+      </div>
+    )
   }
 }