@seedgrid/fe-components 2026.4.17 → 2026.4.18

package/dist/inputs/SgAutocomplete.js

@@ -26,6 +26,7 @@ function SgAutocompleteBase(props) {
     const loadingText = loadingTextProp ?? t(i18n, "components.autocomplete.loading");
     const effectiveGrouped = grouped ?? groupped ?? false;
     const [inputValue, setInputValue] = React.useState(value ?? "");
+    const [internalError, setInternalError] = React.useState(null);
     const [items, setItems] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
     const [open, setOpen] = React.useState(false);
@@ -53,11 +54,14 @@ function SgAutocompleteBase(props) {
     React.useEffect(() => {
         if (value === undefined)
             return;
-        setLastSelected(value);
         // Never clobber what the user is actively typing.
         if (isFocusedRef.current)
             return;
+        setLastSelected(value);
         setInputValue(value);
+        if (!value) {
+            setInternalError(null);
+        }
     }, [value]);
     React.useEffect(() => {
         if (!value) {
@@ -138,6 +142,7 @@ function SgAutocompleteBase(props) {
         const selection = formatSelection ? formatSelection(item) : item.label;
         setSelectedItem(item);
         setInputValue(selection);
+        setInternalError(null);
         onChange?.(selection);
         setLastSelected(selection);
         onSelect?.(item);
@@ -152,8 +157,14 @@ function SgAutocompleteBase(props) {
         if (selectedItem && next !== (formatSelection ? formatSelection(selectedItem) : selectedItem.label)) {
             setSelectedItem(null);
         }
+        setInternalError(null);
         setInputValue(next);
-        onChange?.(next);
+        if (allowCustomValue || next.length === 0) {
+            onChange?.(next);
+        }
+        else {
+            onChange?.("");
+        }
         if (next.length === 0) {
             setItems([]);
             setOpen(false);
@@ -178,9 +189,20 @@ function SgAutocompleteBase(props) {
             return;
         }
         isFocusedRef.current = false;
-        if (!allowCustomValue && lastSelected && inputValue !== lastSelected) {
-            setInputValue(lastSelected);
-            onChange?.(lastSelected);
+        if (!allowCustomValue && inputValue !== lastSelected) {
+            if (lastSelected) {
+                setInputValue(lastSelected);
+                setInternalError(null);
+                onChange?.(lastSelected);
+            }
+            else {
+                setInputValue("");
+                setSelectedItem(null);
+                setInternalError(props.required
+                    ? props.requiredMessage ?? t(i18n, "components.inputs.required")
+                    : null);
+                onChange?.("");
+            }
         }
         setOpen(false);
         onOpenChange?.(false);
@@ -293,9 +315,20 @@ function SgAutocompleteBase(props) {
                 return;
             if (dropdownRef.current?.contains(event.target))
                 return;
-            if (!allowCustomValue && lastSelected && inputValue !== lastSelected) {
-                setInputValue(lastSelected);
-                onChange?.(lastSelected);
+            if (!allowCustomValue && inputValue !== lastSelected) {
+                if (lastSelected) {
+                    setInputValue(lastSelected);
+                    setInternalError(null);
+                    onChange?.(lastSelected);
+                }
+                else {
+                    setInputValue("");
+                    setSelectedItem(null);
+                    setInternalError(props.required
+                        ? props.requiredMessage ?? t(i18n, "components.inputs.required")
+                        : null);
+                    onChange?.("");
+                }
             }
             setOpen(false);
             onOpenChange?.(false);
@@ -317,7 +350,7 @@ function SgAutocompleteBase(props) {
             window.removeEventListener("scroll", handleLayoutChange, true);
         };
     }, [open, syncDropdownPosition]);
-    return (_jsxs("div", { className: "relative", ref: wrapperRef, children: [_jsx(SgInputText, { ...rest, enabled: enabled, readOnly: readOnly, borderRadius: borderRadius, iconButtons: mergedIconButtons, inputProps: {
+    return (_jsxs("div", { className: "relative", ref: wrapperRef, children: [_jsx(SgInputText, { ...rest, error: resolveFieldError(rest.error, internalError ?? undefined), enabled: enabled, readOnly: readOnly, borderRadius: borderRadius, iconButtons: mergedIconButtons, inputProps: {
                     ...inputProps,
                     ref: inputRef,
                     autoComplete: "off",