From 3e99917e9d2ba486355e80ccba9e199f73a4f5af Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 7 Nov 2024 21:55:10 -0800
Subject: [PATCH] Fixed: Closing on click outside select input and styling on
 Library Import

---
 .../Import/ImportSeriesFooter.css             | 10 +---------
 .../Form/Select/EnhancedSelectInput.tsx       | 20 +++++++++++--------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooter.css b/frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooter.css
index 415155274..d0c6e98ae 100644
--- a/frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooter.css
+++ b/frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooter.css
@@ -1,18 +1,10 @@
 .inputContainer {
   margin-right: 20px;
   min-width: 150px;
-
-  div {
-    margin-top: 10px;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
 }
 
 .label {
-  margin-bottom: 3px;
+  margin-bottom: 10px;
   font-weight: bold;
 }
 
diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInput.tsx b/frontend/src/Components/Form/Select/EnhancedSelectInput.tsx
index b47f8da3d..f3b547082 100644
--- a/frontend/src/Components/Form/Select/EnhancedSelectInput.tsx
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInput.tsx
@@ -192,7 +192,7 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
     const { top, bottom } = data.offsets.reference;
     const windowHeight = window.innerHeight;
 
-    if (/^botton/.test(data.placement)) {
+    if (/^bottom/.test(data.placement)) {
       data.styles.maxHeight = windowHeight - bottom;
     } else {
       data.styles.maxHeight = top;
@@ -233,18 +233,12 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
   }, [handleWindowClick]);
 
   const handlePress = useCallback(() => {
-    if (isOpen) {
-      removeListener();
-    } else {
-      addListener();
-    }
-
     if (!isOpen && onOpen) {
       onOpen();
     }
 
     setIsOpen(!isOpen);
-  }, [isOpen, setIsOpen, addListener, removeListener, onOpen]);
+  }, [isOpen, setIsOpen, onOpen]);
 
   const handleSelect = useCallback(
     (newValue: ArrayElement<V>) => {
@@ -411,6 +405,16 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
     }
   });
 
+  useEffect(() => {
+    if (isOpen) {
+      addListener();
+    } else {
+      removeListener();
+    }
+
+    return removeListener;
+  }, [isOpen, addListener, removeListener]);
+
   return (
     <div>
       <Manager>