Update react-modal to 3.1.0

app/react/package.json

@@ -62,7 +62,6 @@
     "postcss-loader": "^2.0.8",
     "prop-types": "^15.6.0",
     "qs": "^6.5.1",
-    "react-modal": "^2.4.1",
     "redux": "^3.7.2",
     "request": "^2.83.0",
     "serve-favicon": "^2.4.5",

app/vue/package.json

@@ -61,7 +61,6 @@
     "qs": "^6.5.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-modal": "^2.4.1",
     "redux": "^3.7.2",
     "request": "^2.83.0",
     "serve-favicon": "^2.4.5",

lib/ui/package.json

@@ -33,7 +33,7 @@
     "react-icons": "^2.2.7",
     "react-inspector": "^2.2.1",
     "react-komposer": "^2.0.0",
-    "react-modal": "^2.4.1",
+    "react-modal": "^3.1.0",
     "react-split-pane": "^0.1.68",
     "react-treebeard": "^2.0.3",
     "redux": "^3.7.2"

lib/ui/src/modules/ui/components/search_box.js

@@ -1,4 +1,3 @@
-import { document } from 'global';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactModal from 'react-modal';
@@ -20,6 +19,7 @@ const modalStyle = {
   },
   overlay: {
     background: 'transparent',
+    zIndex: '1',
   },
 };
 
@@ -68,13 +68,13 @@ export default class SearchBox extends React.Component {
     this.onSelect = this.onSelect.bind(this);
     this.fireOnStory = this.fireOnStory.bind(this);
     this.fireOnKind = this.fireOnKind.bind(this);
+    this.inputRef = this.inputRef.bind(this);
   }
 
-  // TODO: Remove this if and when https://github.com/reactjs/react-modal/issues/464 resolves
   componentDidUpdate(prevProps) {
-    // remove current focus on opening to prevent firing 'enter' keyDowns on it when modal closes
-    if (this.props.showSearchBox && !prevProps.showSearchBox && document.activeElement) {
-      document.activeElement.blur();
+    // focus search box on opening
+    if (this.props.showSearchBox && !prevProps.showSearchBox && this.input != null) {
+      this.input.focus();
     }
   }
 
@@ -95,20 +95,29 @@ export default class SearchBox extends React.Component {
     if (onSelectStory) onSelectStory(kind, story);
   }
 
+  inputRef(fuzzy) {
+    if (fuzzy != null) {
+      this.input = fuzzy.refs.searchBox;
+    }
+  }
+
   render() {
     return (
       <ReactModal
         isOpen={this.props.showSearchBox}
         onRequestClose={this.props.onClose}
         style={modalStyle}
         contentLabel="Search"
+        shouldReturnFocusAfterClose={false}
+        // see https://github.com/reactjs/react-modal/pull/540/files#r148984350
+        shouldFocusAfterRender={false}
       >
         <FuzzySearch
           list={formatStories(this.props.stories)}
           onSelect={this.onSelect}
           keys={['value', 'type']}
           resultsTemplate={suggestionTemplate}
-          autoFocus
+          ref={this.inputRef}
         />
       </ReactModal>
     );

lib/ui/src/modules/ui/components/search_box.test.js

@@ -23,7 +23,6 @@ describe('manager.ui.components.search_box', () => {
       const search = modal.find(FuzzySearch);
       expect(search).toBePresent();
       expect(search).toHaveProp('keys', ['value', 'type']);
-      expect(search).toHaveProp('autoFocus', true);
     });
 
     test('should format stories', () => {

yarn.lock

@@ -9369,9 +9369,9 @@ react-komposer@^2.0.0:
     react-stubber "^1.0.0"
     shallowequal "^0.2.2"
 
-react-modal@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.4.1.tgz#cb09b26711b148eb9f59cb180e1b7d82980ded05"
+react-modal@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.1.0.tgz#ce594f88f9ab7338ee265cfec4be3cc5253f5baa"
   dependencies:
     exenv "^1.2.0"
     prop-types "^15.5.10"