Merge pull request #190 from scarletstudio/input_focus_fix

Fix for Modal Closing when Input is Focused
scarletstudio · Aug 10, 2021 · 81dc6cb · 81dc6cb
2 parents aed940a + 56cd6da
commit 81dc6cb
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/app/components/SearchableMetricSelector.js b/app/components/SearchableMetricSelector.js
@@ -66,6 +66,8 @@ function filterSearchResults(supportedMetrics, searchText){
 function Modal(props){
   const { supportedMetrics, onClose, selectMetric, show } = props;
   const [searchText, setSearchText] = useState("")
+  const [focus, setFocus] = useState(0)
+
   if(!show){
     return null;
   }
@@ -78,7 +80,7 @@ function Modal(props){
 
 
   return (
-    <div className="selectorModal" onClick={onClose} >
+    <div className="selectorModal" onClick={focus ? undefined : onClose} >
         <div className="modalContent" onClick={e => e.stopPropagation() } >
           <div className="modalHeader" >
             <h4 className="modalTitle">Select your Metric</h4>
@@ -90,6 +92,8 @@ function Modal(props){
                 value={searchText} 
                 placeholder="Search Metrics..."
                 onChange={(e) => setSearchText(e.target.value)}
+                onFocus={() => setFocus(1)}
+                onBlur={() => setFocus(0)}
               /> </p>
 
               <p>{searchResultsMessage}</p>