@devcustrom/strapi-plugin-api-select 1.1.2 → 1.3.0

package/README.md

@@ -29,7 +29,7 @@ npm install @devcustrom/strapi-plugin-api-select
 Add the plugin to your `config/plugins.js` file:
 
 ```javascript
-module.exports = {
+export default {
   // ...
   "api-select": {
     enabled: true,

package/admin/src/plugin/ApiSelectInput.jsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from "react";
-import * as PropTypes from "prop-types";
+import React, { useState, useEffect, useMemo } from "react";
 import {
   Field,
   SingleSelect,
@@ -9,58 +8,101 @@ import {
   Loader,
   Box,
   Typography,
-  Flex
+  Flex,
 } from "@strapi/design-system";
 
-// Helper functions (getNestedValue, mapResponseData) остаются без изменений
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Safely resolves a dot-separated path inside an object.
+ * Handles null/undefined at any level without throwing.
+ */
 const getNestedValue = (obj, path) => {
   if (!path) return obj;
-  return path.split('.').reduce((current, key) => {
-    return current && current[key] !== undefined ? current[key] : null;
+  return path.split(".").reduce((current, key) => {
+    if (current === null || current === undefined) return null;
+    return current[key] !== undefined ? current[key] : null;
   }, obj);
 };
 
+/**
+ * Guarantees that a value is a plain string primitive.
+ * Objects are JSON-stringified; everything else is cast with String().
+ */
+const toStringValue = (val) => {
+  if (val === null || val === undefined) return "";
+  if (typeof val === "object") return JSON.stringify(val);
+  return String(val);
+};
+
+/**
+ * Maps a raw API item to { label, value, item, ...extraKeys }.
+ * All returned values are guaranteed strings.
+ */
 const mapResponseData = (item, mapping, fallbackLabelKey, fallbackValueKey) => {
-  let mapped = { label: '', value: '', item };
+  let mapped = { label: "", value: "", item };
 
-  if (mapping && typeof mapping === 'object') {
+  if (mapping && typeof mapping === "object") {
     mapped.label =
       getNestedValue(item, mapping.label || mapping.text || mapping.name) ||
       getNestedValue(item, fallbackLabelKey) ||
-      item.label || item.name || item.text || 'Unknown';
+      item.label ||
+      item.name ||
+      item.text ||
+      "Unknown";
 
     mapped.value =
       getNestedValue(item, mapping.value || mapping.id) ||
       getNestedValue(item, fallbackValueKey) ||
-      item.value || item.id || mapped.label;
+      item.value ||
+      item.id ||
+      mapped.label;
 
-    Object.keys(mapping).forEach(key => {
-      if (key !== 'label' && key !== 'value') {
+    Object.keys(mapping).forEach((key) => {
+      if (key !== "label" && key !== "value") {
         mapped[key] = getNestedValue(item, mapping[key]);
       }
     });
   } else {
     mapped.label =
       getNestedValue(item, fallbackLabelKey) ||
-      item.label || item.name || item.text || item.title ||
-      item.displayName || item.description || 'Unknown Option';
+      item.label ||
+      item.name ||
+      item.text ||
+      item.title ||
+      item.displayName ||
+      item.description ||
+      "Unknown Option";
 
     mapped.value =
       getNestedValue(item, fallbackValueKey) ||
-      item.value || item.id || item.identifier || item.uuid || mapped.label;
+      item.value ||
+      item.id ||
+      item.identifier ||
+      item.uuid ||
+      mapped.label;
   }
 
-  if (!mapped.label || typeof mapped.label !== 'string') {
-    mapped.label = `Option ${mapped.value || 'Unknown'}`;
+  if (!mapped.label || typeof mapped.label !== "string") {
+    mapped.label = `Option ${mapped.value || "Unknown"}`;
   }
 
   if (!mapped.value) {
     mapped.value = mapped.label || `option_${Date.now()}`;
   }
 
+  // FIX #4: guarantee value is always a string primitive, never an object
+  mapped.value = toStringValue(mapped.value);
+
   return mapped;
 };
 
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
 const ApiSelectInput = ({
   name,
   value,
@@ -80,38 +122,46 @@ const ApiSelectInput = ({
   const [loading, setLoading] = useState(false);
   const [fetchError, setFetchError] = useState(null);
 
-  const config = attribute?.options || {};
-  const configValues = config.options || config;
+  // FIX #1: memoize configValues so it doesn't recreate on every render
+  // and trigger an infinite useEffect loop.
+  const configValues = useMemo(() => {
+    const config = attribute?.options || {};
+    return config.options || config;
+  }, [attribute]);
 
   const {
     optionsApi,
-    optionLabelKey = 'name',
-    optionValueKey = 'id',
-    selectMode = 'single',
-    authMode = 'public',
+    optionLabelKey = "name",
+    optionValueKey = "id",
+    selectMode = "single",
+    authMode = "public",
     placeholder: configPlaceholder,
-    httpMethod = 'GET',
-    requestPayload = '',
-    customHeaders = '',
-    responseDataPath = '',
-    responseMappingConfig = '',
+    httpMethod = "GET",
+    requestPayload = "",
+    customHeaders = "",
+    responseDataPath = "",
+    responseMappingConfig = "",
   } = configValues;
 
   const getAuthToken = () => {
     try {
       return (
-        localStorage.getItem('jwtToken')?.replaceAll('"', '') ||
-        localStorage.getItem('strapi_jwt')?.replaceAll('"', '') ||
-        localStorage.getItem('token')?.replaceAll('"', '')
+        localStorage.getItem("jwtToken")?.replaceAll('"', "") ||
+        localStorage.getItem("strapi_jwt")?.replaceAll('"', "") ||
+        localStorage.getItem("token")?.replaceAll('"', "")
       );
-    } catch (e) {
+    } catch {
       return null;
     }
   };
 
+  // FIX #2: AbortController to prevent race conditions when params change
+  // while a previous fetch is still in flight.
   useEffect(() => {
     if (!optionsApi) return;
 
+    const controller = new AbortController();
+
     const fetchOptions = async () => {
       setLoading(true);
       setFetchError(null);
@@ -122,35 +172,41 @@ const ApiSelectInput = ({
 
         const fetchOpts = {
           method: httpMethod,
-          credentials: authMode === 'proxy' ? 'include' : 'omit',
+          signal: controller.signal,
+          credentials: authMode === "proxy" ? "include" : "omit",
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
             ...(token && { Authorization: `Bearer ${token}` }),
           },
         };
 
+        // FIX #6: log invalid customHeaders JSON instead of silently swallowing
         if (customHeaders?.trim()) {
           try {
             Object.assign(fetchOpts.headers, JSON.parse(customHeaders));
-          } catch (e) {}
+          } catch (e) {
+            console.warn("[ApiSelect] Invalid customHeaders JSON:", e.message);
+          }
         }
 
-        if (httpMethod === 'POST' && requestPayload?.trim()) {
+        if (httpMethod === "POST" && requestPayload?.trim()) {
           fetchOpts.body = requestPayload;
         }
 
-        if (authMode === 'proxy') {
+        if (authMode === "proxy") {
           const params = new URLSearchParams({
             api: optionsApi,
             labelKey: optionLabelKey,
             valueKey: optionValueKey,
             method: httpMethod,
           });
-          if (requestPayload) params.append('payload', requestPayload);
-          if (customHeaders) params.append('headers', customHeaders);
+          if (requestPayload) params.append("payload", requestPayload);
+          if (customHeaders) params.append("headers", customHeaders);
+          // FIX #8: proxy mode was not forwarding responseDataPath
+          if (responseDataPath) params.append("dataPath", responseDataPath);
 
           url = `${window.strapi.backendURL}/api-select/fetch?${params}`;
-          fetchOpts.method = 'GET';
+          fetchOpts.method = "GET";
           delete fetchOpts.body;
         }
 
@@ -163,7 +219,8 @@ const ApiSelectInput = ({
         if (responseDataPath) {
           itemsArray = getNestedValue(data, responseDataPath);
         } else {
-          itemsArray = data.data || data.results || data.items || data.response || data;
+          itemsArray =
+            data.data || data.results || data.items || data.response || data;
         }
 
         if (!Array.isArray(itemsArray)) {
@@ -171,28 +228,42 @@ const ApiSelectInput = ({
           return;
         }
 
+        // FIX #7: log invalid responseMappingConfig JSON
         let customMapping = null;
         if (responseMappingConfig?.trim()) {
           try {
             customMapping = JSON.parse(responseMappingConfig);
-          } catch (e) {}
+          } catch (e) {
+            console.warn(
+              "[ApiSelect] Invalid responseMappingConfig JSON:",
+              e.message
+            );
+          }
         }
-        console.log(itemsArray);
-        
-        const mappedOptions = itemsArray.map(item =>
+
+        // FIX #10: removed console.log(itemsArray) leftover
+        const mappedOptions = itemsArray.map((item) =>
           mapResponseData(item, customMapping, optionLabelKey, optionValueKey)
         );
 
         setOptions(mappedOptions);
       } catch (err) {
+        // FIX #2: ignore abort errors — they are intentional
+        if (err.name === "AbortError") return;
         setFetchError(err.message);
         setOptions([]);
       } finally {
-        setLoading(false);
+        // Guard: don't update state if the effect was cleaned up
+        if (!controller.signal.aborted) {
+          setLoading(false);
+        }
       }
     };
 
     fetchOptions();
+
+    // FIX #2: cleanup — abort in-flight request when deps change or unmount
+    return () => controller.abort();
   }, [
     optionsApi,
     optionLabelKey,
@@ -205,139 +276,190 @@ const ApiSelectInput = ({
     responseMappingConfig,
   ]);
 
-  const handleSingleChange = (value) => {
-    onChange({ target: { name, value, type: 'json' } });
+  // -------------------------------------------------------------------------
+  // Change handlers
+  // -------------------------------------------------------------------------
+
+  // The custom field is registered with type: "json", so Strapi requires a
+  // valid JSON value — an object or array, never a bare string.
+  //
+  // Single mode  → store { value: "selected-string" }
+  // Multi mode   → store ["val1", "val2"]  (array is valid JSON)
+  // Empty/clear  → store null
+
+  const handleSingleChange = (val) => {
+    onChange({
+      target: {
+        name,
+        value: val ? { value: val } : null,
+        type: "json",
+      },
+    });
   };
 
-  const handleMultiChange = (values) => {
-    onChange({ target: { name, value: values, type: 'json' } });
+  const handleSingleClear = () => {
+    onChange({ target: { name, value: null, type: "json" } });
   };
 
-  const displayLabel = label || intlLabel?.defaultMessage || name || 'Select Option';
+  const handleMultiChange = (values) => {
+    onChange({
+      target: {
+        name,
+        value: values?.length ? values : null,
+        type: "json",
+      },
+    });
+  };
 
-  const getPlaceholder = () => {
-    if (loading) return 'Loading...';
-    if (fetchError) return 'Error loading options';
-    return placeholder || configPlaceholder || (selectMode === 'single' ? 'Select option...' : 'Select options...');
+  const handleMultiClear = () => {
+    onChange({ target: { name, value: null, type: "json" } });
   };
 
-  const renderOptionContent = (option) => {    
-    const iconUrl = false//enableIcons ? option.item[iconUrlKey] : null;
+  // -------------------------------------------------------------------------
+  // Derived display values
+  // -------------------------------------------------------------------------
+
+  const displayLabel =
+    label || intlLabel?.defaultMessage || name || "Select Option";
+
+  const getPlaceholder = () => {
+    if (loading) return "Loading...";
+    if (fetchError) return "Error loading options";
     return (
-      <Flex gap={2} alignItems="center">
-        {
-          iconUrl && (
-            <svg 
-              width={20} 
-              height={20} 
-              viewBox="0 0 24 24"
-              focusable="false"
-              aria-hidden="true"
-            >
-              <use href={iconUrl} />
-            </svg>
-          )}
-        <span>{option.label}</span>
-      </Flex>
+      placeholder ||
+      configPlaceholder ||
+      (selectMode === "single" ? "Select option..." : "Select options...")
     );
   };
 
-  // Loading state
-  if (loading) {
-    return (
-      <Box padding={2}>
-        <Field.Root name={name} error={error} required={required}>
-          <Field.Label>{displayLabel}</Field.Label>
-          <Flex padding={2} gap={2}>
-            <Loader small />
-            <Typography variant="pi" textColor="neutral600">
-              Loading options...
-            </Typography>
-          </Flex>
-          {description && <Field.Hint>{description}</Field.Hint>}
-          <Field.Error />
-        </Field.Root>
-      </Box>
-    );
-  }
+  // Unwrap the stored JSON structure back to a plain string for the Select.
+  // DB value for single: { value: "icon-name" }  → "icon-name"
+  // DB value for multi:  ["icon1", "icon2"]       → ["icon1", "icon2"]
+  // Fallback: handle legacy bare strings gracefully.
+  const normalizedSingleValue = useMemo(() => {
+    if (!value) return "";
+    if (typeof value === "object" && !Array.isArray(value) && value.value != null)
+      return String(value.value);
+    // Legacy: bare string stored before this fix
+    if (typeof value === "string") return value;
+    return "";
+  }, [value]);
+
+  const normalizedMultiValue = useMemo(() => {
+    if (!value) return [];
+    return (Array.isArray(value) ? value : [value]).map(String);
+  }, [value]);
+
+  // -------------------------------------------------------------------------
+  // Option rendering
+  // -------------------------------------------------------------------------
+
+  const renderOptionContent = (option) => (
+    <Flex gap={2} alignItems="center">
+      <span>{option.label}</span>
+    </Flex>
+  );
 
-  // Error state
-  if (fetchError) {
-    return (
-      <Box padding={2}>
-        <Field.Root name={name} error={error} required={required}>
-          <Field.Label>{displayLabel}</Field.Label>
-          <Box
-            padding={2}
-            background="danger100"
-            borderColor="danger600"
-            borderStyle="solid"
-            borderWidth="1px"
-            hasRadius
-          >
-            <Typography variant="pi" textColor="danger600">
-              Failed to load options: {fetchError}
-            </Typography>
-          </Box>
-          {description && <Field.Hint>{description}</Field.Hint>}
-          <Field.Error />
-        </Field.Root>
-      </Box>
-    );
-  }
+  // -------------------------------------------------------------------------
+  // FIX #11: unified render — don't swap the entire JSX tree for loading/error
+  // states; keep the Select in place so Strapi doesn't lose the field's ref
+  // and layout position. Show inline feedback instead.
+  // -------------------------------------------------------------------------
 
-  // MultiSelect mode
-  if (selectMode === 'multiple') {
-    return (
-      <Box padding={2}>
-        <Field.Root name={name} error={error} required={required}>
-          <Field.Label>{displayLabel}</Field.Label>
-          <MultiSelect
-            ref={forwardedRef}
-            name={name}
-            value={value || []}
-            onChange={handleMultiChange}
-            disabled={disabled}
-            placeholder={getPlaceholder()}
-            withTags
-            {...props}
-          >
-            {options.map((option, index) => (
-              <MultiSelectOption key={option.value || index} value={option.value || ''}>
-                {renderOptionContent(option)}
-              </MultiSelectOption>
-            ))}
-          </MultiSelect>
-          {description && <Field.Hint>{description}</Field.Hint>}
-          <Field.Error />
-        </Field.Root>
-      </Box>
-    );
-  }
+  const renderFeedback = () => {
+    if (loading) {
+      return (
+        <Flex padding={2} gap={2} alignItems="center">
+          <Loader small />
+          <Typography variant="pi" textColor="neutral600">
+            Loading options...
+          </Typography>
+        </Flex>
+      );
+    }
+    if (fetchError) {
+      return (
+        <Box
+          padding={2}
+          background="danger100"
+          borderColor="danger600"
+          borderStyle="solid"
+          borderWidth="1px"
+          hasRadius
+        >
+          <Typography variant="pi" textColor="danger600">
+            Failed to load options: {fetchError}
+          </Typography>
+        </Box>
+      );
+    }
+    return null;
+  };
 
-  return (
-    <Box padding={2}>
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+
+  if (selectMode === "multiple") {
+    return (
       <Field.Root name={name} error={error} required={required}>
         <Field.Label>{displayLabel}</Field.Label>
-        <SingleSelect
+        {renderFeedback()}
+        {/* FIX #9: spread {...props} BEFORE controlled props so nothing
+            accidentally overrides onChange / onClear / value */}
+        <MultiSelect
+          {...props}
           ref={forwardedRef}
           name={name}
-          value={value || ''}
-          onChange={handleSingleChange}
-          disabled={disabled}
+          value={normalizedMultiValue}
+          onChange={handleMultiChange}
+          onClear={handleMultiClear}
+          disabled={disabled || loading}
           placeholder={getPlaceholder()}
-          {...props}
+          withTags
         >
           {options.map((option, index) => (
-            <SingleSelectOption key={option.value || index} value={option.value || ''}>
+            <MultiSelectOption
+              key={option.value || index}
+              value={option.value || ""}
+            >
               {renderOptionContent(option)}
-            </SingleSelectOption>
+            </MultiSelectOption>
           ))}
-        </SingleSelect>
+        </MultiSelect>
         {description && <Field.Hint>{description}</Field.Hint>}
         <Field.Error />
       </Field.Root>
-    </Box>
+    );
+  }
+
+  return (
+    <Field.Root name={name} error={error} required={required}>
+      <Field.Label>{displayLabel}</Field.Label>
+      {renderFeedback()}
+      {/* FIX #9: spread before controlled props */}
+      <SingleSelect
+        {...props}
+        ref={forwardedRef}
+        name={name}
+        value={normalizedSingleValue}
+        onChange={handleSingleChange}
+        onClear={handleSingleClear}
+        disabled={disabled || loading}
+        placeholder={getPlaceholder()}
+      >
+        {options.map((option, index) => (
+          <SingleSelectOption
+            key={option.value || index}
+            value={option.value || ""}
+          >
+            {renderOptionContent(option)}
+          </SingleSelectOption>
+        ))}
+      </SingleSelect>
+      {description && <Field.Hint>{description}</Field.Hint>}
+      <Field.Error />
+    </Field.Root>
   );
 };
 
@@ -354,22 +476,4 @@ ApiSelectInput.defaultProps = {
   attribute: {},
 };
 
-ApiSelectInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  value: PropTypes.any,
-  onChange: PropTypes.func.isRequired,
-  attribute: PropTypes.object,
-  placeholder: PropTypes.string,
-  error: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  label: PropTypes.string,
-  description: PropTypes.string,
-  intlLabel: PropTypes.shape({
-    id: PropTypes.string,
-    defaultMessage: PropTypes.string,
-  }),
-  forwardedRef: PropTypes.any,
-};
-
 export default ApiSelectInput;