fix: close select dropdown when clicking outside

streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/select/selectOptions.tsx

@@ -12,10 +12,11 @@ import { Streamlit } from "streamlit-component-lib";
 interface StSelectOptionsProps {
     options: string[];
     value?: string;
+    open?: boolean;
 }
 export const StSelectOptions = forwardRef<HTMLDivElement, StSelectOptionsProps>((props, ref) => {
-    const { options, value } = props;
-    const [selectedValue, setSelectedValue] = useState<string>(value);
+    const { options, value, open } = props;
+    const [selectedValue, setSelectedValue] = useState<string>(value ?? options?.[0] ?? "");
     // useEffect(() => {
     //     if (ref && typeof ref !== 'function') {
     //         Streamlit.setFrameHeight(ref.current.offsetHeight + 5);
@@ -25,8 +26,43 @@ export const StSelectOptions = forwardRef<HTMLDivElement, StSelectOptionsProps>(
     useBodyStyle("body { background-color: transparent !important; }")
 
     useEffect(() => {
-        setSelectedValue(value);
+        if (value !== undefined) {
+            setSelectedValue(value);
+        }
     }, [value]);
+
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+
+        const frameElement = window.frameElement;
+        const parentWindow = window.parent ?? window;
+        const parentDocument = parentWindow.document;
+
+        if (!parentDocument) {
+            return;
+        }
+
+        const handlePointerDown = (event: PointerEvent) => {
+            if (frameElement && event.target === frameElement) {
+                return;
+            }
+
+            const resolvedValue = selectedValue ?? value ?? options?.[0] ?? "";
+
+            Streamlit.setComponentValue({
+                value: resolvedValue,
+                open: false,
+            });
+        };
+
+        parentDocument.addEventListener("pointerdown", handlePointerDown, true);
+
+        return () => {
+            parentDocument.removeEventListener("pointerdown", handlePointerDown, true);
+        };
+    }, [open, options, selectedValue, value]);
     return (
         <Select open={true} onValueChange={newValue => {
             setSelectedValue(newValue);

streamlit_shadcn_ui/py_components/select.py

@@ -13,7 +13,7 @@ def select_trigger(value=None, open_status=False, key=None):
     props = {"value": value, "open": open_status}
     return _component_func(comp=name, props=props, key=key, default={"x": 0, "y": 0, "open": False})
 
-def select_options(options: List[str], x, y, open_status=False, key=None, default_value=None, on_change=None, args=None, kwargs=None):
+def select_options(options: List[str], x, y, open_status=False, key=None, value=None, default_value=None, on_change=None, args=None, kwargs=None):
     name = "select_options"
     _component_func = declare_component(name)
     register_callback(key=key, callback=on_change, args=args, kwargs=kwargs)
@@ -28,7 +28,7 @@ def select_options(options: List[str], x, y, open_status=False, key=None, defaul
         """)
     result = default_value
     with container:
-        props = {"options": options}
+        props = {"options": options, "value": value, "open": open_status}
         result = _component_func(comp=name, props=props, key=key, default={"value": default_value, "open": False})
         return result
 
@@ -53,7 +53,7 @@ def select(label=None, options=None, key="ui_select"):
 
         trigger_state = select_trigger(value=choice, open_status=open_status, key=trigger_component_key)
 
-        options_state = select_options(options=option_list, x=trigger_state['x'], y=trigger_state['y'], open_status=open_status, default_value=option_list[0], key=options_component_key, on_change=option_choosen_handler, kwargs={"from_key": options_component_key, "to_key": trigger_component_key})
+        options_state = select_options(options=option_list, x=trigger_state['x'], y=trigger_state['y'], open_status=open_status, value=choice, default_value=option_list[0], key=options_component_key, on_change=option_choosen_handler, kwargs={"from_key": options_component_key, "to_key": trigger_component_key})
 
         choice = options_state['value']
         return choice