New: Don't close interactive search with background click

frontend/src/Episode/EpisodeDetailsModal.js

@@ -6,6 +6,24 @@ import EpisodeDetailsModalContentConnector from './EpisodeDetailsModalContentCon
 
 class EpisodeDetailsModal extends Component {
 
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      closeOnBackgroundClick: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onTabChange = (isSearch) => {
+    this.setState({ closeOnBackgroundClick: !isSearch });
+  }
+
   //
   // Render
 
@@ -20,10 +38,12 @@ class EpisodeDetailsModal extends Component {
       <Modal
         isOpen={isOpen}
         size={sizes.EXTRA_LARGE}
+        closeOnBackgroundClick={this.state.closeOnBackgroundClick}
         onModalClose={onModalClose}
       >
         <EpisodeDetailsModalContentConnector
           {...otherProps}
+          onTabChange={this.onTabChange}
           onModalClose={onModalClose}
         />
       </Modal>

frontend/src/Episode/EpisodeDetailsModalContent.js

@@ -37,7 +37,9 @@ class EpisodeDetailsModalContent extends Component {
   // Listeners
 
   onTabSelect = (index, lastIndex) => {
-    this.setState({ selectedTab: tabs[index] });
+    const selectedTab = tabs[index];
+    this.props.onTabChange(selectedTab === 'search');
+    this.setState({ selectedTab });
   }
 
   //
@@ -206,6 +208,7 @@ EpisodeDetailsModalContent.propTypes = {
   selectedTab: PropTypes.string.isRequired,
   startInteractiveSearch: PropTypes.bool.isRequired,
   onMonitorEpisodePress: PropTypes.func.isRequired,
+  onTabChange: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };