From 37e1c4f2eb3f8dbe1ac21a7824dbc2a714f10c6c Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 11 Mar 2021 08:22:55 -0800
Subject: [PATCH] New: Don't close interactive search with background click

---
 frontend/src/Episode/EpisodeDetailsModal.js   | 20 +++++++++++++++++++
 .../src/Episode/EpisodeDetailsModalContent.js |  5 ++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Episode/EpisodeDetailsModal.js b/frontend/src/Episode/EpisodeDetailsModal.js
index b2f379808..d9a87897e 100644
--- a/frontend/src/Episode/EpisodeDetailsModal.js
+++ b/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>
diff --git a/frontend/src/Episode/EpisodeDetailsModalContent.js b/frontend/src/Episode/EpisodeDetailsModalContent.js
index f1b612501..db54fd187 100644
--- a/frontend/src/Episode/EpisodeDetailsModalContent.js
+++ b/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
 };