fix: onclickoutside selectinput

Author: lisalupi

.changeset/sharp-steaks-nail.md

@@ -0,0 +1,7 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`SelectInput`: 
+- click outside should work in every context 
+- fix placeholder alignment when small

packages/ui/src/components/SelectInput/components/Dropdown.tsx

@@ -639,6 +639,29 @@ export const Dropdown = ({
   )
   const modalContext = useContext(ModalContext)
 
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (
+        event.target instanceof Node &&
+        ref.current &&
+        !ref.current.contains(event.target) &&
+        refSelect.current &&
+        !refSelect.current.contains(event.target)
+      ) {
+        setIsDropdownVisible(false)
+      }
+    },
+    [setIsDropdownVisible, refSelect],
+  )
+
+  useEffect(() => {
+    document.addEventListener('mouseup', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mouseup', handleClickOutside)
+    }
+  }, [handleClickOutside])
+
   useEffect(() => {
     if (refSelect.current && isDropdownVisible) {
       const position =

packages/ui/src/components/SelectInput/components/SelectBar.tsx

@@ -75,7 +75,6 @@ type DisplayValuesProps = {
   refPlusTag: RefObject<HTMLDivElement | null>
   displayShadowCopy?: boolean
 }
-
 const DisplayValues = ({
   refTag,
   nonOverflowedValues,