ui-soxo-bootstrap-core 2.6.23 → 2.6.25

package/core/lib/models/forms/components/form-creator/form-creator.js

@@ -600,7 +600,7 @@ function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpda
 
                         > */}
             {isVisible === true ? (
-                <div className="form-item-element">
+                <div className={`form-item-element ${field.type === 'search' ? 'form-item-element-search' : ''}`}>
 
                     {/* <Button
                                 size="small"

package/core/lib/models/forms/components/form-creator/form-creator.scss

@@ -28,6 +28,11 @@
     }
   }
 
+  .form-item-element-search {
+    min-width: 170px;
+    flex: 0 1 200px;
+  }
+
   .submit-button {
     margin-top: 34px;
   }

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

@@ -5,6 +5,7 @@ import { CoreScripts } from "../../../../../models";
 import "./advance-search.scss";
 
 const { Search } = Input;
+const advancedSearchCache = {};
 
 export default function AdvancedSearchSelect({ reportId, onReset, field, value, onChange, style, ...rest }) {
   // Normalize the configuration. 
@@ -17,13 +18,31 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
   const isSearchQuery = !!config.search_query;
   const fieldName = isObjectMode ? field.field : field;
   const caption = config.caption;
+  const cacheKey = `${finalReportId || "no-report"}::${fieldName || "no-field"}`;
 
   const safeValue = Array.isArray(value) ? value : [];
+  const cachedState = advancedSearchCache[cacheKey] || { optionLabels: {}, displayOptions: [] };
 
   const [searchResults, setSearchResults] = useState([]);
-  const [displayOptions, setDisplayOptions] = useState([]);
+  const [displayOptions, setDisplayOptions] = useState(cachedState.displayOptions);
+  const [optionLabels, setOptionLabels] = useState(cachedState.optionLabels);
   const [loading, setLoading] = useState(false);
   const debounceRef = useRef(null);
+  const missingLabelsFetchRef = useRef("");
+
+  const mergeDisplayOptions = (apiOptions = [], selectedValues = safeValue, labels = optionLabels) => {
+    const selectedOptions = selectedValues
+      .filter((item) => labels[item])
+      .map((item) => ({
+        search_value: item,
+        display_value: labels[item],
+      }));
+
+    return [...selectedOptions, ...apiOptions].filter(
+      (item, index, array) =>
+        array.findIndex((entry) => entry.search_value === item.search_value) === index
+    );
+  };
 
   const loadOptions = async (searchText = "") => {
     try {
@@ -37,14 +56,21 @@ 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]) || [];
-
-      setSearchResults(apiValues);
-      // Refresh display options only when new search results arrive to keep the list stable during interaction
-      setDisplayOptions([
-        ...safeValue,
-        ...apiValues.filter((item) => !safeValue.includes(item)),
-      ]);
+      const nextLabels = {
+        ...optionLabels,
+        ...data.reduce((acc, item) => {
+          acc[item.search_value] = item.display_value;
+          return acc;
+        }, {}),
+      };
+
+      setSearchResults(data.map((item) => item.search_value));
+      setOptionLabels(nextLabels);
+      setDisplayOptions(mergeDisplayOptions(data, safeValue, nextLabels));
+      advancedSearchCache[cacheKey] = {
+        optionLabels: nextLabels,
+        displayOptions: mergeDisplayOptions(data, safeValue, nextLabels),
+      };
     } catch (error) {
       console.error("Search API error", error);
     } finally {
@@ -53,16 +79,58 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
   };
 
   useEffect(() => {
-    // Clear search results when the field or report context changes, 
-    // but do not load automatically on mount.
+    // Restore cached labels/options for the current field after remounts like submit refreshes.
     setSearchResults([]);
-  }, [fieldName, finalReportId]);
+    setOptionLabels(cachedState.optionLabels || {});
+    setDisplayOptions(cachedState.displayOptions || []);
+    missingLabelsFetchRef.current = "";
+  }, [cacheKey]);
+
+  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 missingValues = safeValue.filter((item) => !optionLabels[item]);
+    const missingKey = missingValues.join("||");
+
+    if (!isSearchQuery || safeValue.length === 0 || missingValues.length === 0) {
+      missingLabelsFetchRef.current = "";
+      return;
+    }
+
+    if (missingLabelsFetchRef.current === missingKey) {
+      return;
+    }
+
+    missingLabelsFetchRef.current = missingKey;
+    if (isSearchQuery && safeValue.length > 0) {
+      loadOptions("");
+    }
+  }, [isSearchQuery, safeValue, optionLabels]);
+
+  useEffect(() => {
+    if (!isSearchQuery || safeValue.length === 0) return;
+
+    setDisplayOptions((prev) => {
+      const nextDisplayOptions = mergeDisplayOptions(prev, safeValue, optionLabels);
+      advancedSearchCache[cacheKey] = {
+        optionLabels,
+        displayOptions: nextDisplayOptions,
+      };
+      return nextDisplayOptions;
+    });
+  }, [cacheKey, isSearchQuery, safeValue, optionLabels]);
 
   const handleSearch = (text) => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => loadOptions(text), 400);
   };
 
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
   const toggleValue = (checked, item) => {
     let newValues;
 
@@ -80,6 +148,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) {
@@ -110,18 +190,17 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
       className={`advanced-search-select ${isActive ? "advanced-search-active" : ""}`}
       style={style}
       mode="multiple"
+      showSearch={false}
       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;
-          setDisplayOptions([
-            ...safeValue,
-            ...currentResults.filter((item) => !safeValue.includes(item)),
-          ]);
+          const currentResults = displayOptions.length > 0 ? displayOptions : [];
+          setDisplayOptions(mergeDisplayOptions(currentResults, safeValue, optionLabels));
         }
       }}
       allowClear
@@ -137,6 +216,10 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
           <Search
             placeholder={`Search ${caption}`}
             onChange={(e) => handleSearch(e.target.value)}
+            onKeyDown={(e) => {
+              // Prevent the parent Select from treating backspace as "remove last selected tag".
+              e.stopPropagation();
+            }}
           />
 
           <div className="dropdown-options-list">
@@ -145,17 +228,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.23",
+  "version": "2.6.25",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"