How to inputValue in combobox item?

[RajaARK99]

How to inputValue in combobox item?

Hi guys i need help.

I have combobox in react hook form for allowCustomValue won't update the onValueChange i didn't get value of inputValue. I try to show the input value in combobox item but i won't update this is not working properly input can't be typable.

For simple i need a allowCustomValue to hook form value like below headless ui approach.

import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
import { useState } from 'react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

function Example() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.toLowerCase())
        })

  return (
    <Combobox value={selectedPerson} onChange={setSelectedPerson} onClose={() => setQuery('')}>
      <ComboboxInput
        aria-label="Assignee"
        displayValue={(person) => person?.name}
        onChange={(event) => setQuery(event.target.value)}
      />
      <ComboboxOptions anchor="bottom" className="border empty:invisible">
        {query.length > 0 && (
          <ComboboxOption value={{ id: null, name: query }} className="data-[focus]:bg-blue-100">
            Create <span className="font-bold">"{query}"</span>
          </ComboboxOption>
        )}
        {filteredPeople.map((person) => (
          <ComboboxOption key={person.id} value={person} className="data-[focus]:bg-blue-100">
            {person.name}
          </ComboboxOption>
        ))}
      </ComboboxOptions>
    </Combobox>
  )
}

Combobox.tsx

import { Controller, FieldPath, FieldValues } from "react-hook-form";
import { ComboboxProps } from "./types";
import { Combobox as ComboboxPrimitive, Field, Portal } from "@ark-ui/react";
import {
  FieldDescription,
  FieldErrorARKUI,
  labelVariants,
} from "@/components/Field";
import { cn, useInView } from "@/global";
import { buttonVariants } from "@/components/Button";
import { Check, ChevronsUpDown, Loader2, XIcon } from "lucide-react";
import { Fragment, useState } from "react";

type OptionType =
  | string
  | { id: number | string; label: string; disabled: boolean };

const Combobox = <
  TFieldValue extends FieldValues = FieldValues,
  Name extends FieldPath<TFieldValue> = FieldPath<TFieldValue>
>({
  control,
  name,
  options,
  shouldUnregister,
  defaultValue,
  className,
  clearable = true,
  description,
  disabled,
  label,
  leadingContent,
  multiple,
  onChange,
  placeholder,
  readOnly,
  trailingContent,
  onLoadMore,
  allowCustomValue,
  hasNextPage,
  loading,
  loadingMore,
  onInputChange,
  onOpenChange,
}: ComboboxProps<TFieldValue, Name>) => {
  const [inputValue, setInputValue] = useState("");

  const { observe } = useInView({
    onEnter: () => {
      if (hasNextPage) {
        onLoadMore?.();
      }
    },
  });

  return (
    <Controller
      name={name}
      control={control}
      shouldUnregister={shouldUnregister}
      defaultValue={defaultValue}
      rules={{
        onChange: (e) => {
          onChange?.(e?.target?.value ?? null);
        },
      }}
      render={({
        field: { name, onChange, value },
        fieldState: { error, invalid },
      }) => {
        return (
          <Field.Root className={cn("group flex flex-col gap-2", className)}>
            <ComboboxPrimitive.Root<
              | string
              | { id: number | string; label: string; disabled?: boolean }
            >
              name={name}
              items={
                allowCustomValue && inputValue?.trim()?.length > 0
                  ? [inputValue, ...options]
                  : options
              }
              onInputValueChange={({ inputValue }) => {
                setInputValue(inputValue);
                onInputChange?.(inputValue);
              }}
              onValueChange={({ items }) => {
                onChange(multiple ? items ?? [] : items?.[0] ?? null);
              }}
              disabled={disabled}
              readOnly={readOnly}
              invalid={invalid}
              itemToString={(value) => {
                return typeof value === "string" ? value : value?.label;
              }}
              itemToValue={(value) => {
                return typeof value === "string" ? value : value?.label;
              }}
              isItemDisabled={(value) => {
                return typeof value === "object"
                  ? value.disabled ?? false
                  : false;
              }}
              onOpenChange={({ open }) => {
                onOpenChange?.(open);
              }}
              multiple={multiple}
              lazyMount
              unmountOnExit
              value={
                multiple
                  ? value?.length > 0
                    ? value?.map((value: OptionType) =>
                        typeof value === "string" ? value : value?.label
                      )
                    : []
                  : typeof value === "string"
                  ? [value]
                  : [value?.label]
              }
              // allowCustomValue={allowCustomValue}
              
            >
              {label && (
                <ComboboxPrimitive.Label
                  htmlFor={name}
                  className={labelVariants({
                    className:
                      typeof label === "object" ? label?.className : "",
                  })}
                >
                  {typeof label === "string" ? label : label?.text}
                </ComboboxPrimitive.Label>
              )}

              <ComboboxPrimitive.Control
                className={cn(
                  "flex w-full items-center overflow-hidden rounded-md border border-input bg-background px-3  text-sm ring-offset-background",
                  "data-[focus]:outline-none data-[focus]:ring-2 data-[focus]:ring-ring data-[focus]:ring-offset-2",
                  "data-[disabled]:opacity-50",
                  "data-[invalid]:border-destructive data-[invalid]:data-[focus]:ring-destructive",
                  multiple ? "flex flex-col" : "h-10 py-2",
                  className
                )}
              >
                {multiple ? (
                  <Fragment>
                    <div className="empty:hidden flex justify-start w-full p-2 gap-2 flex-wrap max-h-20 overflow-y-auto">
                      {value?.length > 0
                        ? value?.map((option: OptionType, i: number) => (
                            <div
                              key={i}
                              className="bg-accent py-1 px-2 rounded-[--radius] flex items-center gap-2 "
                            >
                              {typeof option === "string"
                                ? option
                                : option?.label}
                              <ComboboxPrimitive.Context>
                                {({ setValue }) => {
                                  return (
                                    <button
                                      type="button"
                                      className={buttonVariants({
                                        size: "icon",
                                        variant: "ghost",
                                        className:
                                          "size-4 p-0 hover:bg-accent hover:text-accent-foreground",
                                      })}
                                      onClick={() => {
                                        setValue(
                                          value?.filter((value: OptionType) => {
                                            return typeof value === "string" &&
                                              typeof option === "string"
                                              ? value !== option
                                              : typeof value === "object" &&
                                                typeof option === "object"
                                              ? value?.label !== option?.label
                                              : value;
                                          }) ?? []
                                        );
                                      }}
                                    >
                                      <XIcon aria-hidden className="size-4" />
                                    </button>
                                  );
                                }}
                              </ComboboxPrimitive.Context>
                            </div>
                          ))
                        : null}
                    </div>
                    <div className="w-full flex items-center">
                      {leadingContent && typeof leadingContent === "function"
                        ? leadingContent(value)
                        : leadingContent}
                      <ComboboxPrimitive.Input
                        className={cn(
                          "min-w-0 flex-1 bg-background px-2 py-1.5 outline outline-0 placeholder:text-muted-foreground data-[invalid]:placeholder-destructive/60"
                        )}
                        placeholder={placeholder}
                      />
                      {loading ? (
                        <Loader2 className="size-4 animate-spin" />
                      ) : null}
                      <ComboboxPrimitive.Context>
                        {({ valueAsString }) => {
                          return valueAsString && clearable ? (
                            <ComboboxPrimitive.ClearTrigger
                              className={buttonVariants({
                                size: "icon",
                                variant: "ghost",
                                className:
                                  "size-6 p-1 hover:bg-accent hover:text-accent-foreground",
                              })}
                            >
                              <XIcon aria-hidden className="size-4" />
                            </ComboboxPrimitive.ClearTrigger>
                          ) : null;
                        }}
                      </ComboboxPrimitive.Context>
                      <ComboboxPrimitive.Trigger
                        className={buttonVariants({
                          size: "icon",
                          variant: "ghost",
                          className:
                            "size-6 p-1 hover:bg-accent hover:text-accent-foreground",
                        })}
                      >
                        <ChevronsUpDown aria-hidden className="size-4" />
                      </ComboboxPrimitive.Trigger>
                      {trailingContent && typeof trailingContent === "function"
                        ? trailingContent(value)
                        : trailingContent}
                    </div>
                  </Fragment>
                ) : (
                  <Fragment>
                    {leadingContent && typeof leadingContent === "function"
                      ? leadingContent(value)
                      : leadingContent}

                    <ComboboxPrimitive.Input
                      className={cn(
                        "min-w-0 flex-1 bg-background px-2 py-1.5 outline outline-0 placeholder:text-muted-foreground data-[invalid]:placeholder-destructive/60"
                      )}
                      placeholder={placeholder}
                    />
                    {loading ? (
                      <Loader2 className="size-4 animate-spin" />
                    ) : null}
                    <ComboboxPrimitive.Context>
                      {({ valueAsString }) => {
                        return valueAsString && clearable ? (
                          <ComboboxPrimitive.ClearTrigger
                            className={buttonVariants({
                              size: "icon",
                              variant: "ghost",
                              className:
                                "size-6 p-1 hover:bg-accent hover:text-accent-foreground",
                            })}
                          >
                            <XIcon aria-hidden className="size-4" />
                          </ComboboxPrimitive.ClearTrigger>
                        ) : null;
                      }}
                    </ComboboxPrimitive.Context>
                    <ComboboxPrimitive.Trigger
                      className={buttonVariants({
                        size: "icon",
                        variant: "ghost",
                        className:
                          "size-6 p-1 hover:bg-accent hover:text-accent-foreground",
                      })}
                    >
                      <ChevronsUpDown aria-hidden className="size-4" />
                    </ComboboxPrimitive.Trigger>
                    {trailingContent && typeof trailingContent === "function"
                      ? trailingContent(value)
                      : trailingContent}
                  </Fragment>
                )}
              </ComboboxPrimitive.Control>
              <Portal>
                <ComboboxPrimitive.Positioner>
                  <ComboboxPrimitive.Content
                    className={cn(
                      "bg-background max-h-[200px] overflow-y-auto p-1 outline-none rounded-[--radius] border"
                    )}
                  >
                   

                    {options?.length === 0 ? (
                      <div className="p-2 text-sm ">No items available.</div>
                    ) : (
                      options?.map(
                        (
                          option:
                            | string
                            | {
                                id: number | string;
                                label: string;
                                disabled?: boolean;
                              },
                          i: number
                        ) => (
                          <ComboboxPrimitive.Item
                            ref={
                              options?.length - 1 === i ? observe : undefined
                            }
                            key={
                              typeof option === "string" ? option : option?.id
                            }
                            item={option}
                            className={cn(
                              "pl-8 relative flex w-full cursor-pointer select-none items-center rounded-sm pr-2 py-1.5 text-sm outline-none",
                              /* Disabled */
                              "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
                              /* Focused */
                              "data-[focused]:bg-accent data-[focused]:text-accent-foreground data-[focus]:bg-accent data-[focus]:text-accent-foreground",
                              "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
                            )}
                          >
                            <ComboboxPrimitive.ItemText>
                              {typeof option === "string"
                                ? option
                                : option?.label}
                            </ComboboxPrimitive.ItemText>
                            <ComboboxPrimitive.ItemContext>
                              {({ selected }) => {
                                return selected ? (
                                  <ComboboxPrimitive.ItemIndicator className="absolute left-2 flex size-4 items-center justify-center">
                                    <Check className="size-4" />
                                  </ComboboxPrimitive.ItemIndicator>
                                ) : null;
                              }}
                            </ComboboxPrimitive.ItemContext>
                          </ComboboxPrimitive.Item>
                        )
                      )
                    )}

                    {loadingMore && (
                      <div className="w-full justify-center items-center py-2">
                        <Loader2 className="size-5 animate-spin mx-auto" />
                      </div>
                    )}
                  </ComboboxPrimitive.Content>
                </ComboboxPrimitive.Positioner>
              </Portal>
            </ComboboxPrimitive.Root>
            {description && (
              <FieldDescription>
                {typeof description === "string"
                  ? description
                  : description?.text}
              </FieldDescription>
            )}
            {error?.message && (
              <FieldErrorARKUI>{error?.message}</FieldErrorARKUI>
            )}
          </Field.Root>
        );
      }}
    />
  );
};

export { Combobox };

import {
  Control,
  FieldPath,
  FieldPathValue,
  FieldValues,
  PathValue,
} from "react-hook-form";


type LeadingTrailingContent<
  TFieldValues extends FieldValues = FieldValues,
  Name extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = ((value: PathValue<TFieldValues, Name>) => ReactNode) | ReactNode;



interface ClassNameAndText {
  className?: string;
  text?: string;
}
type ReactHookFormOnChangeEvent<
  TFieldValues extends FieldValues = FieldValues,
  Name extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = (value: FieldPathValue<TFieldValues, Name>) => void;


type ComboboxProps<
  TFieldValue extends FieldValues = FieldValues,
  Name extends FieldPath<TFieldValue> = FieldPath<TFieldValue>
> = {
  control: Control<TFieldValue>;
  name: Name;
  clearable?: boolean;
  description?: string | ClassNameAndText;
  label?: string | ClassNameAndText;
  disabled?: boolean;
  readOnly?: boolean;
  placeholder?: string;
  className?: string;
  defaultValue?: PathValue<TFieldValue, Name>;
  leadingContent?: LeadingTrailingContent<TFieldValue, Name>;
  trailingContent?: LeadingTrailingContent<TFieldValue, Name>;
  onChange?: ReactHookFormOnChangeEvent<TFieldValue, Name>;
  multiple?: boolean;
  shouldUnregister?: boolean;
  allowCustomValue?: boolean;
  onLoadMore?: () => void;
  onInputChange?: (value: string | null) => void;
  options: NonNullable<FieldPathValue<TFieldValue, Name>> extends any[]
    ? NonNullable<FieldPathValue<TFieldValue, Name>>
    : NonNullable<FieldPathValue<TFieldValue, Name>>[];
  hasNextPage?: boolean;
  loading?: boolean;
  loadingMore?: boolean;
  onOpenChange?: (open: boolean) => void;
};

export type { ComboboxProps };