ui-soxo-bootstrap-core 2.6.24 → 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,14 +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 [optionLabels, setOptionLabels] = 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 {
@@ -38,24 +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((item) => item.search_value);
-
-      setSearchResults(apiValues);
-      setDisplayOptions(data);
-      setOptionLabels((prev) => ({
-        ...prev,
+      const nextLabels = {
+        ...optionLabels,
         ...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
-      //   // ...apiValues.filter((item) => !safeValue.includes(item)),
-      // ]);
+      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 {
@@ -64,26 +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 hasMissingLabels = safeValue.some((item) => !optionLabels[item]);
+    const missingValues = safeValue.filter((item) => !optionLabels[item]);
+    const missingKey = missingValues.join("||");
 
-    if (isSearchQuery && safeValue.length > 0 && hasMissingLabels) {
+    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;
 
@@ -143,6 +190,7 @@ 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}
@@ -152,10 +200,7 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
         } else {
           // When closing, re-sort selected items to the top so they are visible next time it opens
           const currentResults = displayOptions.length > 0 ? displayOptions : [];
-          setDisplayOptions([
-            ...currentResults.filter((item) => safeValue.includes(item.search_value)),
-            ...currentResults.filter((item) => !safeValue.includes(item.search_value)),
-          ]);
+          setDisplayOptions(mergeDisplayOptions(currentResults, safeValue, optionLabels));
         }
       }}
       allowClear
@@ -171,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">

package/package.json

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