From fc160e1d09ba8d7307dca2650ab69acf3afc20fa Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Sat, 24 Sep 2022 00:39:28 -0400
Subject: [PATCH] Fix chapter suggestions disappearing on click

---
 src/components/SelectorComponent.tsx        |  6 +++++-
 src/components/SponsorTimeEditComponent.tsx | 12 ++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/SelectorComponent.tsx b/src/components/SelectorComponent.tsx
index 476d49e3..baf19464 100644
--- a/src/components/SelectorComponent.tsx
+++ b/src/components/SelectorComponent.tsx
@@ -8,6 +8,8 @@ export interface SelectorProps {
     id: string;
     options: SelectorOption[];
     onChange: (value: string) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 }
 
 export interface SelectorState {
@@ -30,7 +32,9 @@ class SelectorComponent extends React.Component<SelectorProps, SelectorState> {
             <div id={this.props.id}
                 style={{display: this.props.options.length > 0 ? "inherit" : "none"}}
                 className="sbSelector">
-                <div className="sbSelectorBackground">
+                <div onMouseEnter={this.props.onMouseEnter}
+                    onMouseLeave={this.props.onMouseLeave}
+                    className="sbSelectorBackground">
                     {this.getOptions()}
                 </div>
             </div>
diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index db1591b8..2877a515 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -32,6 +32,7 @@ export interface SponsorTimeEditState {
     description: string;
     suggestedNames: SelectorOption[];
     chapterNameSelectorOpen: boolean;
+    chapterNameSelectorHovering: boolean;
 }
 
 const categoryNamesGrams: string[] = [].concat(...CompileConfig.categoryList.filter((name) => name !== "chapter")
@@ -73,7 +74,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             selectedCategory: DEFAULT_CATEGORY as Category,
             description: sponsorTime.description || "",
             suggestedNames: [],
-            chapterNameSelectorOpen: false
+            chapterNameSelectorOpen: false,
+            chapterNameSelectorHovering: false
         };
     }
 
@@ -230,7 +232,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
                 {/* Chapter Name */}
                 {sponsorTime.actionType === ActionType.Chapter ? (
-                    <div>
+                    <div onBlur={() => this.setState({chapterNameSelectorOpen: false})}>
                         <input id={"chapterName" + this.idSuffix}
                             className="sponsorTimeEdit sponsorTimeEditInput sponsorChapterNameInput"
                             style={{color: "inherit", backgroundColor: "inherit"}}
@@ -239,13 +241,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                             value={this.state.description}
                             onContextMenu={(e) => e.stopPropagation()}
                             onChange={(e) => this.descriptionUpdate(e.target.value)}
-                            onBlur={() => this.setState({chapterNameSelectorOpen: false})}
                             onFocus={() => this.setState({chapterNameSelectorOpen: true})}>
                         </input>
-                        {this.state.chapterNameSelectorOpen && this.state.description &&
+                        {this.state.description 
+                            && (this.state.chapterNameSelectorOpen || this.state.chapterNameSelectorHovering) &&
                             <SelectorComponent
                                 id={"chapterNameSelector" + this.idSuffix}
                                 options={this.state.suggestedNames}
+                                onMouseEnter={() => this.setState({chapterNameSelectorHovering: true})}
+                                onMouseLeave={() => this.setState({chapterNameSelectorHovering: false})}
                                 onChange={(v) => this.descriptionUpdate(v)}
                             />
                         }