Trigger function when range end (to value) is selected

[pablo-kitz]

Im currently using the component with the Shadcn implementation which contains it inside a popover, i would like for the popover to be closed once the to date is selected.
I attach my current implementation, i assume i would need to call setIsPopoverOpen(false) inside the onSelect prop conditionally when field.value.to is truthy but when trying that field.onChange does not send the value to the controlled form field, maybe im missing something on how the selected value can be passed to field.onChange

interface DatesCalendarProps {
  control: Control<FormSchema>;
  name: keyof Pick<FormSchema, "datepicker">;
  children: React.ReactNode;
  className?: string;
  disabled?: boolean;
  disabledDates?: Matcher | Matcher[] | undefined;
}

export default function DatesCalendar(props: DatesCalendarProps) {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);

  function formatSelectedDates(from: Date, to: Date, format: string) {
    if (!to) {
      return (
        <div className="grid w-full grid-cols-3 text-center">
          <span>{dateFormat(from, format)}</span>
          <span>-</span>
          <span></span>
        </div>
      );
    }
    return (
      <div className="grid w-full grid-cols-3 text-center">
        <span>{dateFormat(from, format)}</span>
        <span>-</span>
        <span>{dateFormat(to, format)}</span>
      </div>
    );
  }

  return (
    <FormField
      control={props.control}
      name="datepicker"
      render={({ field }) => (
        <FormItem className="flex flex-col">
          <FormLabel
            className={cn("text-xs", {
              "cursor-not-allowed text-muted-foreground": props.disabled,
            })}
          >
            {props.children}
          </FormLabel>
          <FormControl>
            <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
              <PopoverTrigger asChild>
                <Button
                  disabled={props.disabled}
                  id="date"
                  variant={"outline"}
                  className={cn(
                    "w-full justify-start gap-4 text-left font-normal text-foreground disabled:pointer-events-auto disabled:cursor-not-allowed disabled:hover:text-muted-foreground",
                    !field.value && "text-muted-foreground",
                  )}
                >
                  <CalendarIcon className="h-4 w-4" />
                  <div className="flex grow">
                    {props.disabled ? (
                      <span className="mr-auto">
                        Choose your Pickup & Dropoff places
                      </span>
                    ) : field.value ? (
                      formatSelectedDates(
                        field.value.from,
                        field.value.to,
                        "dd/MM/yyyy",
                      )
                    ) : (
                      <span className="mr-auto">Pick your dates</span>
                    )}
                  </div>
                  <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-full p-0" align="center">
                <Calendar
                  initialFocus
                  mode="range"
                  disabled={props.disabledDates}
                  selected={field.value}
                  onSelect={field.onChange}
                />
              </PopoverContent>
            </Popover>
          </FormControl>
          <FormMessage className="text-xs" />
        </FormItem>
      )}
    />
  );
}

Thanks!

[pablo-kitz]

Okay so i have found the solution to this, leaving it incase anybody needs it:

onSelect={(data) => {
                    field.onChange(data);
                    if (data?.to) {
                      setIsPopoverOpen(false);
                    }
                  }}

Basically the necesary data that has to be passed can be retrieved on the anonymous function.

Felt very silly when noticing!