@zauru-sdk/components 6.5.1 → 6.5.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.1...@zauru-sdk/components@6.5.2) (2026-09-16)
+
+
+### Bug Fixes
+
+* sincronizar defaults async de SelectField ([5a06089](https://github.com/intuitiva/zauru-typescript-sdk/commit/5a06089bd2bbda775418123ed983ab98bf8cbef0))
+
+
+
+
+
 ## [6.5.1](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.0...@zauru-sdk/components@6.5.1) (2026-09-16)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/esm/Form/SelectField/index.js

@@ -24,6 +24,10 @@ export const SelectField = (props) => {
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const selectRef = useRef(null);
     const optionsRef = useRef(null);
+    const hasManualSingleValue = useRef(false);
+    const hasManualMultiValue = useRef(false);
+    const lastSyncedDefaultValue = useRef(defaultValue?.value);
+    const lastSyncedDefaultValues = useRef(defaultValueMulti.map((option) => option.value));
     const [isTabPressed, setIsTabPressed] = useState(false);
     const [isSearching, setIsSearching] = useState(false);
     // Use refs to store stable references to callbacks
@@ -52,18 +56,51 @@ export const SelectField = (props) => {
     const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
     const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
     const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
-    // Sincronizar estado interno cuando cambien las props
+    const defaultValueMultiKey = defaultValueMulti
+        .map((option) => String(option.value))
+        .join("\u0000");
+    // Sincronizar defaults asíncronos con el estado visual y React Hook Form.
+    //
+    // Es importante depender del valor escalar y no del objeto completo: muchas
+    // pantallas construyen el option con `find()` en cada render. También solo
+    // reemplazamos el valor actual si todavía está vacío o conserva el último
+    // default sincronizado; así una selección manual no se pierde cuando el
+    // catálogo termina de cargar o se recrea el objeto de opciones.
     useEffect(() => {
-        if (defaultValue && (!value || value.value !== defaultValue.value)) {
-            setValue(defaultValue);
-            setInputValue(defaultValue.label);
+        if (!defaultValue || isMulti || hasManualSingleValue.current) {
+            return;
+        }
+        const currentValue = value?.value;
+        const canSyncDefault = currentValue === undefined ||
+            currentValue === null ||
+            currentValue === lastSyncedDefaultValue.current;
+        if (canSyncDefault) {
+            if (currentValue !== defaultValue.value) {
+                setValue(defaultValue);
+                setInputValue(defaultValue.label);
+            }
+            setFormValue?.(name || "", defaultValue.value);
         }
-    }, [defaultValue]);
+        lastSyncedDefaultValue.current = defaultValue.value;
+    }, [defaultValue?.value, isMulti, name, setFormValue]);
     useEffect(() => {
-        if (!areOptionArraysEqual(defaultValueMulti, valueMulti)) {
-            setValueMulti(defaultValueMulti);
+        if (!isMulti ||
+            defaultValueMulti.length === 0 ||
+            hasManualMultiValue.current) {
+            return;
+        }
+        const currentValues = valueMulti.map((option) => option.value);
+        const previousDefaultValues = lastSyncedDefaultValues.current;
+        const canSyncDefault = currentValues.length === 0 ||
+            areOptionArraysEqual(valueMulti, previousDefaultValues.map((value) => ({ value, label: "" })));
+        if (canSyncDefault) {
+            if (!areOptionArraysEqual(defaultValueMulti, valueMulti)) {
+                setValueMulti(defaultValueMulti);
+            }
+            setFormValue?.(name || "", defaultValueMulti.map((option) => option.value));
         }
-    }, [defaultValueMulti]);
+        lastSyncedDefaultValues.current = defaultValueMulti.map((option) => option.value);
+    }, [defaultValueMultiKey, isMulti, name, setFormValue]);
     useEffect(() => {
         setFilteredOptions(options);
     }, [options]);
@@ -80,6 +117,7 @@ export const SelectField = (props) => {
         };
     }, []);
     const handleSetSingleValue = useCallback((value) => {
+        hasManualSingleValue.current = true;
         if (value) {
             setValue(value);
             setInputValue(value.label);
@@ -97,6 +135,7 @@ export const SelectField = (props) => {
         onChangeRef.current && onChangeRef.current(value ?? null);
     }, [name, setFormValue]);
     const handleAddMultiValue = useCallback((value) => {
+        hasManualMultiValue.current = true;
         if (value) {
             const existValue = options.some((v) => v.value === value.value);
             const noEstaYaSeleccionado = !valueMulti.some((v) => v.value === value.value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.5.1",
+  "version": "6.5.2",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "99cc7bef84a3d3c919d336a95eebe82cce2e8c08"
+  "gitHead": "2189a91ba403d92b2bb4f3e84af9b52852e5cbcf"
 }

package/src/Form/SelectField/index.tsx

@@ -81,6 +81,12 @@ export const SelectField = (props: Props) => {
   const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);
   const selectRef = useRef<HTMLDivElement>(null);
   const optionsRef = useRef<HTMLUListElement>(null);
+  const hasManualSingleValue = useRef(false);
+  const hasManualMultiValue = useRef(false);
+  const lastSyncedDefaultValue = useRef(defaultValue?.value);
+  const lastSyncedDefaultValues = useRef(
+    defaultValueMulti.map((option) => option.value),
+  );
   const [isTabPressed, setIsTabPressed] = useState<boolean>(false);
   const [isSearching, setIsSearching] = useState<boolean>(false);
 
@@ -119,20 +125,71 @@ export const SelectField = (props: Props) => {
   const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
   const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
   const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
+  const defaultValueMultiKey = defaultValueMulti
+    .map((option) => String(option.value))
+    .join("\u0000");
 
-  // Sincronizar estado interno cuando cambien las props
+  // Sincronizar defaults asíncronos con el estado visual y React Hook Form.
+  //
+  // Es importante depender del valor escalar y no del objeto completo: muchas
+  // pantallas construyen el option con `find()` en cada render. También solo
+  // reemplazamos el valor actual si todavía está vacío o conserva el último
+  // default sincronizado; así una selección manual no se pierde cuando el
+  // catálogo termina de cargar o se recrea el objeto de opciones.
   useEffect(() => {
-    if (defaultValue && (!value || value.value !== defaultValue.value)) {
-      setValue(defaultValue);
-      setInputValue(defaultValue.label);
+    if (!defaultValue || isMulti || hasManualSingleValue.current) {
+      return;
     }
-  }, [defaultValue]);
+
+    const currentValue = value?.value;
+    const canSyncDefault =
+      currentValue === undefined ||
+      currentValue === null ||
+      currentValue === lastSyncedDefaultValue.current;
+
+    if (canSyncDefault) {
+      if (currentValue !== defaultValue.value) {
+        setValue(defaultValue);
+        setInputValue(defaultValue.label);
+      }
+      setFormValue?.(name || "", defaultValue.value);
+    }
+
+    lastSyncedDefaultValue.current = defaultValue.value;
+  }, [defaultValue?.value, isMulti, name, setFormValue]);
 
   useEffect(() => {
-    if (!areOptionArraysEqual(defaultValueMulti, valueMulti)) {
-      setValueMulti(defaultValueMulti);
+    if (
+      !isMulti ||
+      defaultValueMulti.length === 0 ||
+      hasManualMultiValue.current
+    ) {
+      return;
+    }
+
+    const currentValues = valueMulti.map((option) => option.value);
+    const previousDefaultValues = lastSyncedDefaultValues.current;
+    const canSyncDefault =
+      currentValues.length === 0 ||
+      areOptionArraysEqual(
+        valueMulti,
+        previousDefaultValues.map((value) => ({ value, label: "" })),
+      );
+
+    if (canSyncDefault) {
+      if (!areOptionArraysEqual(defaultValueMulti, valueMulti)) {
+        setValueMulti(defaultValueMulti);
+      }
+      setFormValue?.(
+        name || "",
+        defaultValueMulti.map((option) => option.value),
+      );
     }
-  }, [defaultValueMulti]);
+
+    lastSyncedDefaultValues.current = defaultValueMulti.map(
+      (option) => option.value,
+    );
+  }, [defaultValueMultiKey, isMulti, name, setFormValue]);
 
   useEffect(() => {
     setFilteredOptions(options);
@@ -156,6 +213,7 @@ export const SelectField = (props: Props) => {
 
   const handleSetSingleValue = useCallback(
     (value?: SelectFieldOption) => {
+      hasManualSingleValue.current = true;
       if (value) {
         setValue(value);
         setInputValue(value.label);
@@ -176,6 +234,7 @@ export const SelectField = (props: Props) => {
 
   const handleAddMultiValue = useCallback(
     (value?: SelectFieldOption) => {
+      hasManualMultiValue.current = true;
       if (value) {
         const existValue = options.some((v) => v.value === value.value);
         const noEstaYaSeleccionado = !valueMulti.some(