fixed selectfield ui

src/components/common/Forms/SelectField.jsx

@@ -12,6 +12,8 @@ const SelectField = ({
   labelKey = "name",
   isLoading = false,
 }) => {
+  const [position, setPosition] = useState("bottom");
+
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -34,10 +36,26 @@ const SelectField = ({
     setOpen(false);
   };
 
-  const toggleDropdown = () => setOpen((prev) => !prev);
+  const toggleDropdown = () => {
+    if (!open) {
+      const rect = dropdownRef.current?.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+
+      const spaceBelow = viewportHeight - rect.bottom;
+      const dropdownHeight = 200; 
+
+      if (spaceBelow < dropdownHeight) {
+        setPosition("top"); // open upward
+      } else {
+        setPosition("bottom"); // open downward
+      }
+    }
+
+    setOpen((prev) => !prev);
+  };
 
   return (
-    <div className="mb-3 position-relative" ref={dropdownRef}>
+    <div className="position-relative" ref={dropdownRef}>
       {label && (
         <Label className="form-label" required={required}>
           {label}
@@ -60,32 +78,45 @@ const SelectField = ({
       </button>
 
       {open && !isLoading && (
-        <ul
-          className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
+        <div
+          className="w-full px-1 shadow-md rounded p-1"
           style={{
             position: "absolute",
-            top: "100%",
+            top: position === "bottom" ? "100%" : "auto",
+            bottom: position === "top" ? "100%" : "auto",
             left: 0,
             zIndex: 1050,
-            marginTop: "4px",
-            borderRadius: "0.375rem",
-            overflow: "hidden",
+
+            marginTop: position === "bottom" ? "2px" : "0",
+            marginBottom: position === "top" ? "2px" : "0",
           }}
         >
-          {options.map((option, i) => (
-            <li key={i}>
-              <button
-                type="button"
-                className={`dropdown-item ${
-                  option[valueKey] === value ? "active" : ""
-                }`}
-                onClick={() => handleSelect(option)}
-              >
-                {option[labelKey]}
-              </button>
-            </li>
-          ))}
-        </ul>
+          <ul
+            className="dropdown-menu w-100 show border-0 rounded px-1 py-1"
+            style={{
+              position: "static",
+
+              maxHeight: "220px",
+              overflowY: "auto",
+              overflowX: "hidden",
+            }}
+            id="vertical-example"
+          >
+            {options.map((option, i) => (
+              <li key={i}>
+                <button
+                  type="button"
+                  className={`dropdown-item rounded text-truncate ${
+                    option[valueKey] === value ? "active" : ""
+                  }`}
+                  onClick={() => handleSelect(option)}
+                >
+                  {option[labelKey]}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
       )}
     </div>
   );