@zauru-sdk/components 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.3.1...v2.4.0) (2025-07-07)
+
+
+### Features
+
+* build ([b22e345](https://github.com/intuitiva/zauru-typescript-sdk/commit/b22e345387b87bd77a43d45924875e806ac62aa3))
+* getPurchaseOrderStringQuery ([ddac075](https://github.com/intuitiva/zauru-typescript-sdk/commit/ddac07589aa19f82ab009b9c027952a2f07412a4))
+* remove lodash dependency ([5b1a6ce](https://github.com/intuitiva/zauru-typescript-sdk/commit/5b1a6ceba61db8cdb0b3ca98c1431c1d57ad7091))
+
+
+
+
+
+## [2.3.1](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.3.0...v2.3.1) (2025-06-27)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 # [2.3.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.2.0...v2.3.0) (2025-06-27)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/esm/Containers/Container.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 export const Container = (props) => {
     const { title, description, children, className = "", rightContent } = props;
     const titleInfo = (_jsxs(_Fragment, { children: [title && (_jsx("h3", { className: "text-3xl font-bold leading-8 text-gray-900", children: title })), description && (_jsx("p", { className: "mt-1 text-md text-gray-600", children: description }))] }));
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: `mx-2 ${className}`, children: [rightContent && (_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("div", { children: titleInfo }), _jsx("div", { children: rightContent })] })), !rightContent && titleInfo, _jsx("div", { className: "mt-5 space-y-5", children: children })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `mx-2 ${className}`, children: [rightContent && (_jsxs("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4", children: [_jsx("div", { className: "max-w-3xl", children: titleInfo }), _jsx("div", { className: "flex-shrink-0", children: rightContent })] })), !rightContent && titleInfo, _jsx("div", { className: "mt-5 space-y-5", children: children })] }) }));
 };

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

@@ -1,8 +1,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { IdeaIconSVG } from "@zauru-sdk/icons";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, useCallback, } from "react";
 import { LoadingInputSkeleton } from "../../Skeletons/index.js";
 import { useFormContext } from "react-hook-form";
+// Simple comparison helper to check if two SelectFieldOption arrays contain the
+// same values (order-insensitive). We only compare the `value` of each option
+// because it uniquely identifies a SelectFieldOption.
+const areOptionArraysEqual = (a = [], b = []) => {
+    if (a.length !== b.length)
+        return false;
+    const aValues = a.map((v) => v.value).sort();
+    const bValues = b.map((v) => v.value).sort();
+    return aValues.every((val, idx) => val === bValues[idx]);
+};
 export const SelectField = (props) => {
     const { id, name, title, defaultValue, defaultValueMulti = [], helpText, hint, options, onChange, onChangeMulti, isClearable = false, disabled = false, readOnly = false, isMulti = false, loading = false, className = "", onInputChange, required = false, } = props;
     const [value, setValue] = useState(defaultValue || null);
@@ -16,6 +26,20 @@ export const SelectField = (props) => {
     const optionsRef = useRef(null);
     const [isTabPressed, setIsTabPressed] = useState(false);
     const [isSearching, setIsSearching] = useState(false);
+    // Use refs to store stable references to callbacks
+    const onChangeRef = useRef(onChange);
+    const onChangeMultiRef = useRef(onChangeMulti);
+    const onInputChangeRef = useRef(onInputChange);
+    // Update refs when callbacks change
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+        onChangeMultiRef.current = onChangeMulti;
+    }, [onChangeMulti]);
+    useEffect(() => {
+        onInputChangeRef.current = onInputChange;
+    }, [onInputChange]);
     const { register: tempRegister, formState: { errors }, setValue: setFormValue, } = useFormContext() || { formState: {} };
     const error = errors ? errors[props.name ?? "-1"] : undefined;
     const register = tempRegister
@@ -28,6 +52,18 @@ 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
+    useEffect(() => {
+        if (defaultValue && (!value || value.value !== defaultValue.value)) {
+            setValue(defaultValue);
+            setInputValue(defaultValue.label);
+        }
+    }, [defaultValue]);
+    useEffect(() => {
+        if (!areOptionArraysEqual(defaultValueMulti, valueMulti)) {
+            setValueMulti(defaultValueMulti);
+        }
+    }, [defaultValueMulti]);
     useEffect(() => {
         setFilteredOptions(options);
     }, [options]);
@@ -43,7 +79,7 @@ export const SelectField = (props) => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, []);
-    const handleSetSingleValue = (value) => {
+    const handleSetSingleValue = useCallback((value) => {
         if (value) {
             setValue(value);
             setInputValue(value.label);
@@ -58,9 +94,9 @@ export const SelectField = (props) => {
                 setFormValue(name || "", "");
             }
         }
-        onChange && onChange(value ?? null);
-    };
-    const handleAddMultiValue = (value) => {
+        onChangeRef.current && onChangeRef.current(value ?? null);
+    }, [name, setFormValue]);
+    const handleAddMultiValue = useCallback((value) => {
         if (value) {
             const existValue = options.some((v) => v.value === value.value);
             const noEstaYaSeleccionado = !valueMulti.some((v) => v.value === value.value);
@@ -70,7 +106,7 @@ export const SelectField = (props) => {
                 if (setFormValue) {
                     setFormValue(name || "", newValue.map((v) => v.value));
                 }
-                onChangeMulti && onChangeMulti(newValue);
+                onChangeMultiRef.current && onChangeMultiRef.current(newValue);
             }
         }
         else {
@@ -79,28 +115,28 @@ export const SelectField = (props) => {
                 setFormValue(name || "", []);
             }
             setInputValue("");
-            onChangeMulti && onChangeMulti([]);
+            onChangeMultiRef.current && onChangeMultiRef.current([]);
         }
-    };
-    const handleRemoveMultiValue = (value) => {
+    }, [options, valueMulti, name, setFormValue]);
+    const handleRemoveMultiValue = useCallback((value) => {
         const newValue = valueMulti.filter((v) => v.value !== value.value);
         setValueMulti(newValue);
         if (setFormValue) {
             setFormValue(name || "", newValue.map((v) => v.value));
         }
-        onChangeMulti && onChangeMulti(newValue);
-    };
-    const handleInputChange = (e) => {
+        onChangeMultiRef.current && onChangeMultiRef.current(newValue);
+    }, [valueMulti, name, setFormValue]);
+    const handleInputChange = useCallback((e) => {
         const newValue = e.target.value;
         if (register) {
             register.onChange(e);
         }
         setInputValue(newValue);
-        onInputChange && onInputChange(newValue);
+        onInputChangeRef.current && onInputChangeRef.current(newValue);
         setIsSearching(true);
         setFilteredOptions(options.filter((option) => option.label.toLowerCase().includes(newValue.toLowerCase())));
-    };
-    const handleOptionClick = (option) => {
+    }, [register, options]);
+    const handleOptionClick = useCallback((option) => {
         if (isMulti) {
             handleAddMultiValue(option);
         }
@@ -111,16 +147,16 @@ export const SelectField = (props) => {
         setIsSearching(false);
         setFilteredOptions(options);
         setIsOpen(false);
-    };
-    const handleClear = () => {
+    }, [isMulti, handleAddMultiValue, handleSetSingleValue, options]);
+    const handleClear = useCallback(() => {
         if (isMulti) {
             handleAddMultiValue();
         }
         else {
             handleSetSingleValue();
         }
-    };
-    const handleBlur = () => {
+    }, [isMulti, handleAddMultiValue, handleSetSingleValue]);
+    const handleBlur = useCallback(() => {
         setTimeout(() => {
             if (isTabPressed && highlightedIndex >= 0) {
                 handleOptionClick(filteredOptions[highlightedIndex]);
@@ -133,8 +169,24 @@ export const SelectField = (props) => {
             setIsSearching(false);
             setIsOpen(false);
         }, 200);
-    };
-    const handleKeyDown = (e) => {
+    }, [
+        isTabPressed,
+        highlightedIndex,
+        filteredOptions,
+        isSearching,
+        handleOptionClick,
+    ]);
+    const scrollToHighlightedOption = useCallback(() => {
+        if (optionsRef.current && optionsRef.current.children[highlightedIndex]) {
+            const highlightedOption = optionsRef.current.children[highlightedIndex];
+            highlightedOption.scrollIntoView({
+                block: "center",
+                inline: "center",
+                behavior: "smooth",
+            });
+        }
+    }, [highlightedIndex]);
+    const handleKeyDown = useCallback((e) => {
         if (e.key === "Tab") {
             setIsTabPressed(true);
         }
@@ -152,24 +204,36 @@ export const SelectField = (props) => {
             e.preventDefault();
             handleOptionClick(filteredOptions[highlightedIndex]);
         }
-        else if (e.key === "Backspace" && (value || valueMulti.length > 0)) {
+        else if (e.key === "Backspace" &&
+            inputValue === "" &&
+            (value || valueMulti.length > 0)) {
+            // Solo borrar selecciones cuando el input esté vacío
             e.preventDefault();
-            handleClear();
-            setInputValue("");
+            if (isMulti && valueMulti.length > 0) {
+                // En modo multi, borrar la última selección
+                const lastIndex = valueMulti.length - 1;
+                handleRemoveMultiValue(valueMulti[lastIndex]);
+            }
+            else {
+                // En modo single, borrar la selección
+                handleClear();
+            }
             setFilteredOptions(options);
             setIsOpen(true);
         }
-    };
-    const scrollToHighlightedOption = () => {
-        if (optionsRef.current && optionsRef.current.children[highlightedIndex]) {
-            const highlightedOption = optionsRef.current.children[highlightedIndex];
-            highlightedOption.scrollIntoView({
-                block: "center",
-                inline: "center",
-                behavior: "smooth",
-            });
-        }
-    };
+    }, [
+        filteredOptions,
+        scrollToHighlightedOption,
+        highlightedIndex,
+        handleOptionClick,
+        inputValue,
+        value,
+        valueMulti,
+        handleClear,
+        handleRemoveMultiValue,
+        isMulti,
+        options,
+    ]);
     if (loading) {
         return (_jsxs(_Fragment, { children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), _jsx(LoadingInputSkeleton, {}), helpText && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -35,11 +35,11 @@
     "@rails/activestorage": "^8.0.200",
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^2.2.0",
-    "@zauru-sdk/hooks": "^2.2.0",
+    "@zauru-sdk/common": "^2.3.1",
+    "@zauru-sdk/hooks": "^2.3.1",
     "@zauru-sdk/icons": "^2.0.188",
-    "@zauru-sdk/types": "^2.2.0",
-    "@zauru-sdk/utils": "^2.3.0",
+    "@zauru-sdk/types": "^2.3.1",
+    "@zauru-sdk/utils": "^2.4.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^11.7.0",
     "jsonwebtoken": "^9.0.2",
@@ -52,5 +52,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "c0a2ddf3c3c2b5ba8da9e7c7a3a40043a64688d3"
+  "gitHead": "322aeeae8a6462b8d9877918a5c2f320d6fd9b87"
 }

package/src/Containers/Container.tsx

@@ -26,9 +26,9 @@ export const Container = (props: Props) => {
     <>
       <div className={`mx-2 ${className}`}>
         {rightContent && (
-          <div className="flex justify-between items-center">
-            <div>{titleInfo}</div>
-            <div>{rightContent}</div>
+          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
+            <div className="max-w-3xl">{titleInfo}</div>
+            <div className="flex-shrink-0">{rightContent}</div>
           </div>
         )}
         {!rightContent && titleInfo}

package/src/Form/SelectField/index.tsx

@@ -1,6 +1,12 @@
 import { IdeaIconSVG } from "@zauru-sdk/icons";
 import { SelectFieldOption } from "@zauru-sdk/types";
-import React, { useEffect, useState, useRef, KeyboardEvent } from "react";
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  KeyboardEvent,
+  useCallback,
+} from "react";
 import { LoadingInputSkeleton } from "../../Skeletons/index.js";
 import { useFormContext } from "react-hook-form";
 
@@ -26,6 +32,19 @@ type Props = {
   required?: boolean;
 };
 
+// Simple comparison helper to check if two SelectFieldOption arrays contain the
+// same values (order-insensitive). We only compare the `value` of each option
+// because it uniquely identifies a SelectFieldOption.
+const areOptionArraysEqual = (
+  a: SelectFieldOption[] = [],
+  b: SelectFieldOption[] = []
+): boolean => {
+  if (a.length !== b.length) return false;
+  const aValues = a.map((v) => v.value).sort();
+  const bValues = b.map((v) => v.value).sort();
+  return aValues.every((val, idx) => val === bValues[idx]);
+};
+
 export const SelectField = (props: Props) => {
   const {
     id,
@@ -62,6 +81,25 @@ export const SelectField = (props: Props) => {
   const optionsRef = useRef<HTMLUListElement>(null);
   const [isTabPressed, setIsTabPressed] = useState<boolean>(false);
   const [isSearching, setIsSearching] = useState<boolean>(false);
+
+  // Use refs to store stable references to callbacks
+  const onChangeRef = useRef(onChange);
+  const onChangeMultiRef = useRef(onChangeMulti);
+  const onInputChangeRef = useRef(onInputChange);
+
+  // Update refs when callbacks change
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  useEffect(() => {
+    onChangeMultiRef.current = onChangeMulti;
+  }, [onChangeMulti]);
+
+  useEffect(() => {
+    onInputChangeRef.current = onInputChange;
+  }, [onInputChange]);
+
   const {
     register: tempRegister,
     formState: { errors },
@@ -80,6 +118,20 @@ export const SelectField = (props: Props) => {
   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
+  useEffect(() => {
+    if (defaultValue && (!value || value.value !== defaultValue.value)) {
+      setValue(defaultValue);
+      setInputValue(defaultValue.label);
+    }
+  }, [defaultValue]);
+
+  useEffect(() => {
+    if (!areOptionArraysEqual(defaultValueMulti, valueMulti)) {
+      setValueMulti(defaultValueMulti);
+    }
+  }, [defaultValueMulti]);
+
   useEffect(() => {
     setFilteredOptions(options);
   }, [options]);
@@ -100,98 +152,113 @@ export const SelectField = (props: Props) => {
     };
   }, []);
 
-  const handleSetSingleValue = (value?: SelectFieldOption) => {
-    if (value) {
-      setValue(value);
-      setInputValue(value.label);
-      if (setFormValue) {
-        setFormValue(name || "", value.value);
-      }
-    } else {
-      setValue(null);
-      setInputValue("");
-      if (setFormValue) {
-        setFormValue(name || "", "");
+  const handleSetSingleValue = useCallback(
+    (value?: SelectFieldOption) => {
+      if (value) {
+        setValue(value);
+        setInputValue(value.label);
+        if (setFormValue) {
+          setFormValue(name || "", value.value);
+        }
+      } else {
+        setValue(null);
+        setInputValue("");
+        if (setFormValue) {
+          setFormValue(name || "", "");
+        }
       }
-    }
-    onChange && onChange(value ?? null);
-  };
+      onChangeRef.current && onChangeRef.current(value ?? null);
+    },
+    [name, setFormValue]
+  );
 
-  const handleAddMultiValue = (value?: SelectFieldOption) => {
-    if (value) {
-      const existValue = options.some((v) => v.value === value.value);
-      const noEstaYaSeleccionado = !valueMulti.some(
-        (v) => v.value === value.value
-      );
-      if (existValue && noEstaYaSeleccionado) {
-        const newValue = [...valueMulti, value];
-        setValueMulti(newValue);
+  const handleAddMultiValue = useCallback(
+    (value?: SelectFieldOption) => {
+      if (value) {
+        const existValue = options.some((v) => v.value === value.value);
+        const noEstaYaSeleccionado = !valueMulti.some(
+          (v) => v.value === value.value
+        );
+        if (existValue && noEstaYaSeleccionado) {
+          const newValue = [...valueMulti, value];
+          setValueMulti(newValue);
+          if (setFormValue) {
+            setFormValue(
+              name || "",
+              newValue.map((v) => v.value)
+            );
+          }
+          onChangeMultiRef.current && onChangeMultiRef.current(newValue);
+        }
+      } else {
+        setValueMulti([]);
         if (setFormValue) {
-          setFormValue(
-            name || "",
-            newValue.map((v) => v.value)
-          );
+          setFormValue(name || "", []);
         }
-        onChangeMulti && onChangeMulti(newValue);
+        setInputValue("");
+        onChangeMultiRef.current && onChangeMultiRef.current([]);
       }
-    } else {
-      setValueMulti([]);
+    },
+    [options, valueMulti, name, setFormValue]
+  );
+
+  const handleRemoveMultiValue = useCallback(
+    (value: SelectFieldOption) => {
+      const newValue = valueMulti.filter((v) => v.value !== value.value);
+      setValueMulti(newValue);
       if (setFormValue) {
-        setFormValue(name || "", []);
+        setFormValue(
+          name || "",
+          newValue.map((v) => v.value)
+        );
       }
-      setInputValue("");
-      onChangeMulti && onChangeMulti([]);
-    }
-  };
+      onChangeMultiRef.current && onChangeMultiRef.current(newValue);
+    },
+    [valueMulti, name, setFormValue]
+  );
 
-  const handleRemoveMultiValue = (value: SelectFieldOption) => {
-    const newValue = valueMulti.filter((v) => v.value !== value.value);
-    setValueMulti(newValue);
-    if (setFormValue) {
-      setFormValue(
-        name || "",
-        newValue.map((v) => v.value)
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      if (register) {
+        register.onChange(e);
+      }
+      setInputValue(newValue);
+      onInputChangeRef.current && onInputChangeRef.current(newValue);
+      setIsSearching(true);
+      setFilteredOptions(
+        options.filter((option) =>
+          option.label.toLowerCase().includes(newValue.toLowerCase())
+        )
       );
-    }
-    onChangeMulti && onChangeMulti(newValue);
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    if (register) {
-      register.onChange(e);
-    }
-    setInputValue(newValue);
-    onInputChange && onInputChange(newValue);
-    setIsSearching(true);
-    setFilteredOptions(
-      options.filter((option) =>
-        option.label.toLowerCase().includes(newValue.toLowerCase())
-      )
-    );
-  };
+    },
+    [register, options]
+  );
 
-  const handleOptionClick = (option: SelectFieldOption) => {
-    if (isMulti) {
-      handleAddMultiValue(option);
-    } else {
-      handleSetSingleValue(option);
-    }
-    setHighlightedIndex(-1);
-    setIsSearching(false);
-    setFilteredOptions(options);
-    setIsOpen(false);
-  };
+  const handleOptionClick = useCallback(
+    (option: SelectFieldOption) => {
+      if (isMulti) {
+        handleAddMultiValue(option);
+      } else {
+        handleSetSingleValue(option);
+      }
+      setHighlightedIndex(-1);
+      setIsSearching(false);
+      setFilteredOptions(options);
+      setIsOpen(false);
+    },
+    [isMulti, handleAddMultiValue, handleSetSingleValue, options]
+  );
 
-  const handleClear = () => {
+  const handleClear = useCallback(() => {
     if (isMulti) {
       handleAddMultiValue();
     } else {
       handleSetSingleValue();
     }
-  };
+  }, [isMulti, handleAddMultiValue, handleSetSingleValue]);
 
-  const handleBlur = () => {
+  const handleBlur = useCallback(() => {
     setTimeout(() => {
       if (isTabPressed && highlightedIndex >= 0) {
         handleOptionClick(filteredOptions[highlightedIndex]);
@@ -204,36 +271,15 @@ export const SelectField = (props: Props) => {
       setIsSearching(false);
       setIsOpen(false);
     }, 200);
-  };
+  }, [
+    isTabPressed,
+    highlightedIndex,
+    filteredOptions,
+    isSearching,
+    handleOptionClick,
+  ]);
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Tab") {
-      setIsTabPressed(true);
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setHighlightedIndex((prevIndex) =>
-        prevIndex < filteredOptions.length - 1 ? prevIndex + 1 : 0
-      );
-      scrollToHighlightedOption();
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setHighlightedIndex((prevIndex) =>
-        prevIndex > 0 ? prevIndex - 1 : filteredOptions.length - 1
-      );
-      scrollToHighlightedOption();
-    } else if (e.key === "Enter" && highlightedIndex !== -1) {
-      e.preventDefault();
-      handleOptionClick(filteredOptions[highlightedIndex]);
-    } else if (e.key === "Backspace" && (value || valueMulti.length > 0)) {
-      e.preventDefault();
-      handleClear();
-      setInputValue("");
-      setFilteredOptions(options);
-      setIsOpen(true);
-    }
-  };
-
-  const scrollToHighlightedOption = () => {
+  const scrollToHighlightedOption = useCallback(() => {
     if (optionsRef.current && optionsRef.current.children[highlightedIndex]) {
       const highlightedOption = optionsRef.current.children[
         highlightedIndex
@@ -244,7 +290,60 @@ export const SelectField = (props: Props) => {
         behavior: "smooth",
       });
     }
-  };
+  }, [highlightedIndex]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Tab") {
+        setIsTabPressed(true);
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightedIndex((prevIndex) =>
+          prevIndex < filteredOptions.length - 1 ? prevIndex + 1 : 0
+        );
+        scrollToHighlightedOption();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightedIndex((prevIndex) =>
+          prevIndex > 0 ? prevIndex - 1 : filteredOptions.length - 1
+        );
+        scrollToHighlightedOption();
+      } else if (e.key === "Enter" && highlightedIndex !== -1) {
+        e.preventDefault();
+        handleOptionClick(filteredOptions[highlightedIndex]);
+      } else if (
+        e.key === "Backspace" &&
+        inputValue === "" &&
+        (value || valueMulti.length > 0)
+      ) {
+        // Solo borrar selecciones cuando el input esté vacío
+        e.preventDefault();
+        if (isMulti && valueMulti.length > 0) {
+          // En modo multi, borrar la última selección
+          const lastIndex = valueMulti.length - 1;
+          handleRemoveMultiValue(valueMulti[lastIndex]);
+        } else {
+          // En modo single, borrar la selección
+          handleClear();
+        }
+        setFilteredOptions(options);
+        setIsOpen(true);
+      }
+    },
+    [
+      filteredOptions,
+      scrollToHighlightedOption,
+      highlightedIndex,
+      handleOptionClick,
+      inputValue,
+      value,
+      valueMulti,
+      handleClear,
+      handleRemoveMultiValue,
+      isMulti,
+      options,
+    ]
+  );
 
   if (loading) {
     return (