From 5db6040221f3f8f9aa624cce1407e3408a3e2f67 Mon Sep 17 00:00:00 2001
From: hypnos <Filipp.Riabchun@jetbrains.com>
Date: Mon, 6 Nov 2017 05:57:56 +0300
Subject: [PATCH] Update react-modal to 3.1.0

---
 app/react/package.json                        |  1 -
 app/vue/package.json                          |  1 -
 lib/ui/package.json                           |  2 +-
 .../src/modules/ui/components/search_box.js   | 21 +++++++++++++------
 .../modules/ui/components/search_box.test.js  |  1 -
 yarn.lock                                     |  6 +++---
 6 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/app/react/package.json b/app/react/package.json
index 19c9bd738f6e..b04bc9ac0bda 100644
--- a/app/react/package.json
+++ b/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",
diff --git a/app/vue/package.json b/app/vue/package.json
index 817d648b0a00..6bc718446cd9 100644
--- a/app/vue/package.json
+++ b/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",
diff --git a/lib/ui/package.json b/lib/ui/package.json
index b1d968d30522..37a8c805ec51 100644
--- a/lib/ui/package.json
+++ b/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"
diff --git a/lib/ui/src/modules/ui/components/search_box.js b/lib/ui/src/modules/ui/components/search_box.js
index 657618b55658..d56e2a1f3715 100644
--- a/lib/ui/src/modules/ui/components/search_box.js
+++ b/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,6 +95,12 @@ 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
@@ -102,13 +108,16 @@ export default class SearchBox extends React.Component {
         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>
     );
diff --git a/lib/ui/src/modules/ui/components/search_box.test.js b/lib/ui/src/modules/ui/components/search_box.test.js
index ed0247fedf3b..24616d8b192c 100644
--- a/lib/ui/src/modules/ui/components/search_box.test.js
+++ b/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', () => {
diff --git a/yarn.lock b/yarn.lock
index c633f9b25233..876051b088a3 100644
--- a/yarn.lock
+++ b/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"