Fixed: Closing on click outside select input and styling on Library Import

(cherry picked from commit 3e99917e9d2ba486355e80ccba9e199f73a4f5af)

frontend/src/Components/Form/Select/EnhancedSelectInput.tsx

@@ -230,18 +230,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>) => {
@@ -408,6 +402,16 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
     }
   });
 
+  useEffect(() => {
+    if (isOpen) {
+      addListener();
+    } else {
+      removeListener();
+    }
+
+    return removeListener;
+  }, [isOpen, addListener, removeListener]);
+
   return (
     <div>
       <Manager>