fix: modal focus (#277)

* chore: fix docs deploy

* fix: modal focus

This is an annoying bug that deserves a better solution but i've no time for that :P

What happens is that in the stacked case the lower modal's enforceFocus runs before the new modal is added to the modal stack so the lower one still thinks it's on top.

* fix dep

src/Modal.js

@@ -264,7 +264,7 @@ class Modal extends React.Component {
       this.props.onShow();
     }
     // autofocus after onShow, to not trigger a focus event for previous
-    // modals before this own is shown.
+    // modals before this one is shown.
     this.autoFocus();
   };
 
@@ -280,7 +280,14 @@ class Modal extends React.Component {
       this.handleDocumentKeyDown,
     );
 
-    this.removeFocusListener = listen(doc, 'focus', this.enforceFocus, true);
+    this.removeFocusListener = listen(
+      doc,
+      'focus',
+      // the timeout is necessary b/c this will run before the new modal is mounted
+      // and so steals focus from it
+      () => setTimeout(this.enforceFocus),
+      true,
+    );
   };
 
   onHide = () => {

www/package.json

@@ -20,13 +20,11 @@
     "gatsby-plugin-css-literal-loader": "^1.0.0",
     "gatsby-plugin-emotion": "next",
     "gatsby-plugin-less": "^2.0.0-rc.1",
+    "gatsby-plugin-sorted-assets": "^1.0.2",
     "gatsby-remark-prismjs": "^1.2.17",
     "gatsby-source-filesystem": "2.0.1-rc.1",
     "gatsby-transformer-react-docgen": "^2.1.1-rc.1",
     "gatsby-transformer-remark": "^2.1.1-rc.1",
     "react-emotion": "^9.2.8"
-  },
-  "dependencies": {
-    "gatsby-plugin-sorted-assets": "^1.0.2"
   }
 }