From ea696b2ac24ce269f759ad7355fcfdd66fdc1734 Mon Sep 17 00:00:00 2001
From: YohanKoch <YohanOlivier.Koch@formation.orif.ch>
Date: Tue, 1 Sep 2026 13:17:16 +0200
Subject: [PATCH] fix: add click outside handler to close MultiSelect dropdown

---
 src/ui/inputs/multi-select/MultiSelect.jsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/ui/inputs/multi-select/MultiSelect.jsx b/src/ui/inputs/multi-select/MultiSelect.jsx
index 10d2251..ff9b5db 100644
--- a/src/ui/inputs/multi-select/MultiSelect.jsx
+++ b/src/ui/inputs/multi-select/MultiSelect.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import clsx from "clsx";
 import Label from "../../label/Label";
 
@@ -20,12 +20,27 @@ const MultiSelect = ({
     return;
   }
 
+  const wrapperRef = useRef(null);
   const [selectedCount, setSelectedCount] = useState(0);
   const [selectedOptions, setSelectedOptions] = useState(defaultValues);
   const [isOpen, setIsOpen] = useState(false);
 
   const isDisabled = disabled || options.length < 1;
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
   const handleSelectedOptions = (value) => {
     if (onChangeFunction) {
       onChangeFunction((prev) =>
@@ -45,7 +60,7 @@ const MultiSelect = ({
   useEffect(() => setSelectedCount(selectedOptions.length), [selectedOptions]);
 
   return (
-    <div className="relative">
+    <div ref={wrapperRef} className="relative">
       <div
         onClick={() => {
           if (!isDisabled) setIsOpen((prev) => !prev);