{
e.preventDefault();
e.stopPropagation();
(value as any)?.props?.removeProps?.onClick?.();
}}
onMouseDown={(e) => e.preventDefault()}
>
{(value as any)?.props?.data?.label}
X
{/* {typeof value === "object" &&
value !== null &&
"props" in value
? (value as any)?.props?.data?.label
: ""} */}
))}
,
document.body,
)}
);
};
const InputSelectComponent = ({
name,
label,
width,
options: newOptions,
formulario,
creatable,
onChange,
isMulti = false,
defaultValue,
controlledValue,
required,
disabled,
menuPlacement = "auto",
skipEffect = false,
minimumCharacter = false,
captureInputChange,
removeDocumentBody = false,
error,
placeholder,
dynamic = false,
textSize = "text-md",
labelSize = "text-md",
formatOptionLabel,
schema,
menuPositionFixed = false,
validateCreateOption,
isCategorizado,
infoMessage,
}: IInputSelectProps) => {
const SelectComponent = creatable ? CreatableSelect : Select;
const [isLoading, setIsLoading] = useState(false);
const [darkTheme, setDarkTheme] = useState(false);
const { onDrawer } = useScreenContext();
const [options, setOptions] = useState<
| OptionsOrGroups>
| { value: string; label: string; isDisabled?: boolean }[]
>([]);
const animatedComponents = makeAnimated();
// undefined (não null!) como sentinela de "ainda não inicializei" - null é
// um defaultValue LEGÍTIMO (ex: opção "Automático" com value:null), e o
// guard abaixo (linha ~643) só compara "!== defaultValue" - usar null aqui
// colidia com esse caso real e fazia o formulario.setValue nunca rodar,
// deixando o campo vazio em vez de mostrar a opção selecionada.
const lastInitializedDefaultValue = React.useRef(undefined);
const lastFieldName = React.useRef(undefined);
const emptyOption = { value: "", label: "Escolha", isDisabled: true };
useEffect(() => {
// Não injeta "Escolha" quando o comportamento é mínimo de caracteres antes de listar
if (!minimumCharacter && (!newOptions || newOptions.length === 0)) {
// Quando não houver nenhuma opção, deixa a opção "Escolha" sem valor
if (
compararArraysDeObjetosPorLabel(
[emptyOption] as any[],
options as any[],
) ||
options.length === 0
) {
setOptions([emptyOption]);
} else if (options.length === 0) {
setOptions([emptyOption]);
}
return;
}
if (
// newOptions.some(
// (option, index) =>
// option?.label != options[index]?.label ||
// option?.value != options[index]?.value
// )
(compararArraysDeObjetosPorLabel(
(newOptions || []) as any[],
(options || []) as any[],
)
? true
: newOptions?.[0]?.options
? compararArraysDeObjetosPorLabel(
(newOptions ?? []).flatMap((curr: any) => curr.options ?? []),
(options ?? []).flatMap((curr: any) => curr.options ?? []),
)
: false) ||
(options?.length ?? 0) === 0
) {
const hasOptions = newOptions && newOptions.length > 0;
setOptions(
hasOptions
? newOptions
: [{ value: "", label: "Escolha", isDisabled: true }],
);
}
}, [newOptions]);
const { colorMode } = useColorContext();
const handleEnterToNextField = (e: React.KeyboardEvent) => {
if (e.key === "Enter") {
e.preventDefault();
const form = (e.target as HTMLElement).closest("form");
if (!form) return;
const elements = Array.from(form.elements) as HTMLElement[];
const index = elements.indexOf(e.target as HTMLElement);
for (let i = index + 2; i < elements.length; i++) {
const next = elements[i];
if (
next &&
typeof next.focus === "function" &&
!next.hasAttribute("disabled") &&
next.tabIndex !== -1
) {
next.focus();
break;
}
}
}
};
useEffect(() => {
if (formulario && name != undefined) {
const newSchema = formulario.yupSchema.fields;
if (isMulti) {
newSchema[name] = required
? yup
.array()
.of(
yup
.string()
.transform((e) => (e?.value ? String(e.value) : "")),
)
.min(1, "É necessário selecionar pelo menos um")
.required(error)
: yup
.array()
.of(
yup
.string()
.transform((e) => (e?.value ? String(e.value) : "")),
);
} else {
newSchema[name] = required
? yup
.string()
.transform((e) => (e?.value ? String(e?.value) : ""))
.required(error)
: yup.string().transform((e) => (e?.value ? String(e.value) : ""));
}
newSchema[name] = schema || newSchema[name];
formulario.setYupSchema(yup.object().shape(newSchema));
if (
defaultValue !== undefined &&
options[0] != undefined &&
!Object.keys(formulario.control._formValues).includes(name)
) {
formulario.setValue(
name as never,
formulario.control._formValues[name] as never,
);
}
}
return () => {
dynamic &&
formulario?.control.unregister([name] as never[], {
keepValue: false,
keepError: false,
});
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// useEffect(() => {
// }, [defaultValue]);
// Helpers para tratar diferentes formatos de defaultValue evitando erros de split
const getMultiSelected = (
defaultVal: any,
opts: { value: any; label: any }[],
) => {
if (!defaultVal) return [];
let values: string[] = [];
if (typeof defaultVal === "string") {
values = defaultVal
.split(",")
.map((v: string) => v.trim())
.filter(Boolean);
} else if (Array.isArray(defaultVal)) {
values = defaultVal
.map((v) =>
v && typeof v === "object" && "value" in v
? String(v.value)
: String(v),
)
.filter(Boolean);
} else if (typeof defaultVal === "object" && defaultVal !== null) {
if ("value" in defaultVal) values = [String((defaultVal as any).value)];
} else {
values = [String(defaultVal)];
}
return opts.filter((o) => values.includes(String(o.value)));
};
const getSingleSelected = (
defaultVal: any,
opts: { value: any; label: any }[],
) => {
if (!defaultVal) return "";
if (
typeof defaultVal === "object" &&
defaultVal !== null &&
"value" in defaultVal &&
"label" in defaultVal
) {
return defaultVal; // já é o objeto option
}
return opts.find((o) => String(o.value) == String(defaultVal)) || "";
};
useEffect(() => {
if (lastFieldName.current !== name) {
lastInitializedDefaultValue.current = undefined;
lastFieldName.current = name;
}
function updateDefaultValue() {
if (skipEffect) {
return;
}
// Após remontagem (ex: troca de abas), o form pode já ter um valor
// selecionado pelo usuário — não sobrescrever com o defaultValue
if (lastInitializedDefaultValue.current === null && name) {
const currentFormValue = formulario?.control?._formValues?.[name];
const isOptionShape = (v: any) =>
v && typeof v === "object" && "value" in v && "label" in v;
const hasSelectedValue = isMulti
? Array.isArray(currentFormValue) &&
currentFormValue.some(isOptionShape)
: isOptionShape(currentFormValue);
if (hasSelectedValue) {
lastInitializedDefaultValue.current = defaultValue;
return;
}
}
if (defaultValue !== undefined && options[0] != undefined) {
if (lastInitializedDefaultValue.current !== defaultValue) {
const resolvedValue = isMulti
? getMultiSelected(defaultValue, options as any)
: getSingleSelected(defaultValue, options as any);
formulario?.setValue(
name as never,
(resolvedValue as never) || ""
);
// Mark as initialized if we successfully found a valid option, or if the defaultValue itself is empty
if (
(resolvedValue && (!isMulti || (resolvedValue as any[]).length > 0)) ||
defaultValue === "" ||
defaultValue === null
) {
lastInitializedDefaultValue.current = defaultValue;
}
}
}
}
updateDefaultValue();
}, [defaultValue, options, skipEffect, name, isMulti]);
const selectStyles = useMemo(
() => buildSelectStyles(colorMode ?? "light", isMulti),
[colorMode, isMulti],
);
const formatGroupLabel = (data: GroupedOption) => (
{data.label}{data.options.length}
);
const shouldShowDistribuidorCadastroInfo =
name === "codDistribuidor_item" && !isMulti;
const infoMessageToShow = shouldShowDistribuidorCadastroInfo
? "Atenção! Nesta lista mostra apenas Distribuidores Cadastrados, pois os Nativos não permitem edição e cadastros de itens por aqui, apenas pela integração do Distribuidor."
: infoMessage;
return (
{label && (
)}
{minimumCharacter ||
(((options?.length > 0 && options[0] !== undefined) ||
creatable == true) &&
name !== undefined &&
formulario !== undefined) ? (
(
<>
opt?.value === "" || opt?.isDisabled
}
onCreateOption={(inputValue: string) => {
// Verifica se já existe uma opção com esse label ou value (case insensitive)
const existingOption = options.find(
(option) =>
option.label.toLowerCase() ==
inputValue.toLowerCase() ||
option.value?.toLowerCase?.() ===
inputValue.toLowerCase(),
);
// Se já existe, apenas seleciona ela
if (existingOption) {
if (isMulti) {
const newValue = [
...(field.value || []),
existingOption,
].filter(
(v, i, arr) =>
arr.findIndex((o: any) => o.value === v.value) ===
i,
);
field.onChange(newValue);
onChange && onChange(newValue as any);
} else {
field.onChange(existingOption);
onChange && onChange(existingOption);
}
return;
}
let newOption = { label: inputValue, value: inputValue };
if (validateCreateOption && creatable) {
const validated = validateCreateOption(
inputValue,
options as any,
);
if (!validated) return;
newOption = validated;
}
const updatedOptions = [...options, newOption];
setOptions(updatedOptions);
if (isMulti) {
defaultValue = [...(field.value || []), newOption];
field.onChange([...(field.value || []), newOption]);
} else {
defaultValue = newOption;
field.onChange(newOption);
}
if (onChange) {
if (isMulti) {
onChange([...(field.value || []), newOption] as any);
} else {
onChange(newOption as any);
}
}
}}
closeMenuOnSelect={isMulti ? false : true}
styles={selectStyles}
menuPortalTarget={
onDrawer ? null : removeDocumentBody ? null : document.body
}
{...field}
className={`${textSize} relative w-full text-black dark:text-white font-medium appearance-none rounded bg-transparent outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:focus:border-primary`}
options={options}
noOptionsMessage={({ inputValue }) =>
minimumCharacter
? "Digite ao menos 3 letras"
: formulario?.errors && name && formulario.errors[name]
? formulario.errors[name]?.message
?.split(" ")
.map((str: string) => {
return str.length > 3
? str[0].toUpperCase() + str.slice(1)
: str;
})
.join(" ")
: "Nenhum resultado"
}
placeholder={placeholder || "Selecione uma opção"}
isMulti={isMulti}
menuPlacement={menuPlacement}
isDisabled={disabled}
defaultValue={
defaultValue
? isMulti
? getMultiSelected(defaultValue, options as any)
: getSingleSelected(defaultValue, options as any)
: isMulti
? []
: ""
}
onInputChange={(e) => {
if (minimumCharacter) {
captureInputChange(e);
}
return e;
}}
onChange={(selectedOption: any, actionMeta) => {
if (field.onChange) {
field.onChange(selectedOption || "", actionMeta);
if (isMulti) {
if (
selectedOption?.some(
(option: any) => option.value == "*",
)
) {
if (
selectedOption[selectedOption.length - 1]?.value ==
"*"
) {
selectedOption = (options as any).filter(
(option: any) => option.value == "*",
);
formulario!.setValue(
name as never,
selectedOption as never,
);
} else {
selectedOption = options.filter(
(option) =>
!selectedOption
?.map((o: any) => o.value)
.includes(option.value),
);
formulario!.setValue(
name as never,
selectedOption as never,
);
}
}
}
}
if (onChange) {
onChange(selectedOption || "");
}
}}
formatOptionLabel={formatOptionLabel}
/>
)}
/>
) : options?.length > 0 &&
options[0] != undefined &&
!minimumCharacter ? (