This commit is contained in:
David Arranz 2026-06-26 11:21:52 +02:00
parent 1551d65f63
commit ad066b1ad0

View File

@ -8,7 +8,6 @@ import {
SelectTrigger, SelectTrigger,
} from "@repo/shadcn-ui/components"; } from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils"; import { cn } from "@repo/shadcn-ui/lib/utils";
import { XIcon } from "lucide-react";
import React from "react"; import React from "react";
import { Controller, type FieldPath, type FieldValues, useFormContext } from "react-hook-form"; import { Controller, type FieldPath, type FieldValues, useFormContext } from "react-hook-form";
@ -67,7 +66,6 @@ export function SelectField<TFormValues extends FieldValues>({
clearable = false, clearable = false,
clearLabel = "Sin selección", clearLabel = "Sin selección",
clearButtonLabel = "Quitar selección",
emptyValue = null, emptyValue = null,
placeholder, placeholder,
@ -128,7 +126,6 @@ export function SelectField<TFormValues extends FieldValues>({
}} }}
value={fieldValue} value={fieldValue}
> >
<div className="relative">
<SelectTrigger <SelectTrigger
aria-invalid={fieldState.invalid} aria-invalid={fieldState.invalid}
aria-required={required} aria-required={required}
@ -137,7 +134,6 @@ export function SelectField<TFormValues extends FieldValues>({
"hover:border-ring hover:ring-ring/20 hover:ring-[3px]", "hover:border-ring hover:ring-ring/20 hover:ring-[3px]",
"focus-visible:border-ring focus-visible:ring-ring/60 focus-visible:ring-[3px]", "focus-visible:border-ring focus-visible:ring-ring/60 focus-visible:ring-[3px]",
"placeholder:text-muted-foreground/50", "placeholder:text-muted-foreground/50",
clearable && selectedItem && !isDisabled ? "pr-9" : "",
inputClassName inputClassName
)} )}
id={triggerId} id={triggerId}
@ -152,32 +148,6 @@ export function SelectField<TFormValues extends FieldValues>({
</span> </span>
</SelectTrigger> </SelectTrigger>
{clearable && selectedItem && !isDisabled ? (
<button
aria-label={clearButtonLabel}
className={cn(
"text-muted-foreground hover:text-foreground",
"absolute top-1/2 right-2 z-10 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-sm",
"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
)}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
field.onChange(emptyValue);
onChange?.(emptyValue);
}}
onMouseDown={(event) => {
event.preventDefault();
event.stopPropagation();
}}
type="button"
>
<XIcon aria-hidden="true" className="size-3.5" />
</button>
) : null}
</div>
<SelectContent> <SelectContent>
{clearable ? ( {clearable ? (
<SelectItem value={EMPTY_SELECT_VALUE}>{clearLabel}</SelectItem> <SelectItem value={EMPTY_SELECT_VALUE}>{clearLabel}</SelectItem>
@ -204,3 +174,30 @@ export function SelectField<TFormValues extends FieldValues>({
/> />
); );
} }
/*
{clearable && selectedItem && !isDisabled ? (
<button
aria-label={clearButtonLabel}
className={cn(
"text-muted-foreground hover:text-foreground",
"absolute top-1/2 right-2 z-10 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-sm",
"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
)}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
field.onChange(emptyValue);
onChange?.(emptyValue);
}}
onMouseDown={(event) => {
event.preventDefault();
event.stopPropagation();
}}
type="button"
>
<XIcon aria-hidden="true" className="size-3.5" />
</button>
) : null}
*/