ui-soxo-bootstrap-core 2.6.22 → 2.6.24

package/core/modules/reporting/components/reporting-dashboard/adavance-search/advance-search.js

@@ -22,6 +22,7 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
 
   const [searchResults, setSearchResults] = useState([]);
   const [displayOptions, setDisplayOptions] = useState([]);
+  const [optionLabels, setOptionLabels] = useState({});
   const [loading, setLoading] = useState(false);
   const debounceRef = useRef(null);
 
@@ -37,14 +38,24 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
 
       const res = await CoreScripts.getQuerySeacch(formBody);
       const data = Array.isArray(res.data) ? res.data : [];
-      const apiValues = data?.map((r) => r[fieldName]) || [];
+      const apiValues = data.map((item) => item.search_value);
 
       setSearchResults(apiValues);
+      setDisplayOptions(data);
+      setOptionLabels((prev) => ({
+        ...prev,
+        ...data.reduce((acc, item) => {
+          acc[item.search_value] = item.display_value;
+          return acc;
+        }, {}),
+      }));
+
       // Refresh display options only when new search results arrive to keep the list stable during interaction
-      setDisplayOptions([
-        ...safeValue,
-        ...apiValues.filter((item) => !safeValue.includes(item)),
-      ]);
+      // setDisplayOptions([
+      //   ...safeValue,
+      //   ...apiValues
+      //   // ...apiValues.filter((item) => !safeValue.includes(item)),
+      // ]);
     } catch (error) {
       console.error("Search API error", error);
     } finally {
@@ -58,6 +69,16 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
     setSearchResults([]);
   }, [fieldName, finalReportId]);
 
+  useEffect(() => {
+    // FormCreator can remount this field after submit with only search_value(s).
+    // If any selected value is missing a label, fetch the option list once to recover display_value.
+    const hasMissingLabels = safeValue.some((item) => !optionLabels[item]);
+
+    if (isSearchQuery && safeValue.length > 0 && hasMissingLabels) {
+      loadOptions("");
+    }
+  }, [isSearchQuery, safeValue, optionLabels]);
+
   const handleSearch = (text) => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => loadOptions(text), 400);
@@ -80,6 +101,18 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
   };
 
   const isActive = safeValue.length > 0;
+  const selectOptions = [
+    ...safeValue
+      .filter((item) => optionLabels[item])
+      .map((item) => ({
+        value: item,
+        label: optionLabels[item],
+      })),
+    ...displayOptions.map((item) => ({
+      value: item.search_value,
+      label: item.display_value,
+    })),
+  ].filter((item, index, array) => array.findIndex((entry) => entry.value === item.value) === index);
 
   // -------- INPUT MODE --------
   if (!isSearchQuery) {
@@ -111,16 +144,17 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
       style={style}
       mode="multiple"
       value={safeValue}
+      options={selectOptions}
       placeholder={caption}
       onDropdownVisibleChange={(open) => {
         if (open) {
           loadOptions("");
         } else {
           // When closing, re-sort selected items to the top so they are visible next time it opens
-          const currentResults = searchResults.length > 0 ? searchResults : displayOptions;
+          const currentResults = displayOptions.length > 0 ? displayOptions : [];
           setDisplayOptions([
-            ...safeValue,
-            ...currentResults.filter((item) => !safeValue.includes(item)),
+            ...currentResults.filter((item) => safeValue.includes(item.search_value)),
+            ...currentResults.filter((item) => !safeValue.includes(item.search_value)),
           ]);
         }
       }}
@@ -145,17 +179,17 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
             ) : (
               displayOptions.map((item, idx) => (
                 <div 
-                  key={`${item}-${idx}`} 
+                  key={`${item.search_value}-${idx}`} 
                   className="dropdown-option-item"
-                  onClick={() => toggleValue(!safeValue.includes(item), item)}
+                  onClick={() => toggleValue(!safeValue.includes(item.search_value), item.search_value)}
                   style={{ cursor: 'pointer' }}
                 >
                   <Checkbox
-                    checked={safeValue.includes(item)}
+                    checked={safeValue.includes(item.search_value)}
                     onClick={(e) => e.stopPropagation()} // Prevent double trigger when clicking the checkbox box specifically
-                    onChange={(e) => toggleValue(e.target.checked, item)}
+                    onChange={(e) => toggleValue(e.target.checked, item.search_value)}
                   >
-                    {item}
+                    {item.display_value}
                   </Checkbox>
                 </div>
               ))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.22",
+  "version": "2.6.24",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"