ComboBox input value displayed incorrectly when using onSelectionChange with React Hook Form

[deltasierra96]

I apologise for what may seem like dumb questions lately ... my post history doesn't post a very good picture of my skills.

I'm utilising a component as part of a React Hook Form submission that submits an Id relating to a database entry.

The data itself that's submitted is correct, and that's great. However when I select an option from the <ListBox/>, instead of displaying the correct title/child of the <ListBoxItem/>, it updates to show the Id.

<FormField
  control={control}
  name='vendor'
  render={({
    field: { onChange, value, ...fieldRest },
    fieldState: { invalid, error },
  }) => {
    return (
      <ComboBox
        {...fieldRest}
        inputValue={value}
        onSelectionChange={onChange}
        label='Vendor'
        isInvalid={invalid}
        isRequired
        defaultItems={vendors}
        errorMessage={error?.message}
      >
        {vendors.map((vendor) => (
          <ComboBox.Item
            key={vendor.id}
            textValue={vendor.title}
            id={vendor.id}
          >
            {vendor.title} <--- Should display the vendor name, not the Id when a user picks an option.
          </ComboBox.Item>
        ))}
      </ComboBox>
    );
  }}
/>

[reidbarber]

The first thing I would try is to follow the dynamic collection API instead of using Array.map():

<ComboBox items={vendors}>
  {item => <ComboBox.Item>{item.title}</ComboBox.Item>}
</ComboBox >

Beyond that, it is hard to tell at a glance since ComboBox isn't a RAC Combobox, so i would need to see the implementation of that.

[deltasierra96]

Well it is a RAC component, just a custom one at that.

Here's the implementation I'm currently using.

'use client';
import {
  type ComboBoxProps as RACComboBoxProps,
  ComboBox as RACComboBox,
  type ValidationResult,
  Group as RACGroup,
} from 'react-aria-components';
import { Label } from '../label';
import { Popover } from '../popover';
import { Input, type InputBaseProps } from '../input';
import {
  FieldDescription,
  FieldError,
  FieldWrapper,
  fieldWrapperSizeStyles,
  type FieldWrapperProps,
} from '../form';
import { ButtonIcon } from '../button-icon';
import React from 'react';
import {
  DropdownItem,
  type DropdownItemProps,
  ListBoxSection,
  type ListBoxSectionProps,
  ListBox,
} from '../list-box';
import clsx from 'clsx';

export type ComboBoxProps<T extends object> = Omit<RACComboBoxProps<T>, 'children'> &
  InputBaseProps &
  FieldWrapperProps & {
    label?: string;
    hideLabel?: boolean;
    description?: string;
    errorMessage?: string | ((validation: ValidationResult) => string);
    children: React.ReactNode | ((item: T) => React.ReactNode);
  };

const Root = <T extends object>(
  {
    label,
    description,
    errorMessage,
    children,
    items,
    leftSection,
    rightSection,
    hideLabel,
    validationBehavior = 'aria',
    menuTrigger = 'focus',
    size,
    ...props
  }: ComboBoxProps<T>,
  ref: React.ForwardedRef<HTMLInputElement>
) => {
  return (
    <RACComboBox
      {...props}
      menuTrigger={menuTrigger}
      validationBehavior={validationBehavior}
      isInvalid={props.isInvalid}
      isDisabled={props.isDisabled}
      ref={ref}
    >
      {label && (
        <Label hidden={hideLabel} isRequired={props.isRequired}>
          {label}
        </Label>
      )}

      <FieldWrapper size={size} isInvalid={props.isInvalid} isDisabled={props.isDisabled}>
        {leftSection ? leftSection : null}
        <RACGroup className='group flex w-full min-w-0 items-center pr-1 text-left'>
          <Input className={clsx(fieldWrapperSizeStyles({ size }))} />
          <ButtonIcon variant='secondary-ghost' compact size={size} icon='selector' />
        </RACGroup>
        {rightSection ? rightSection : null}
      </FieldWrapper>

      {description && <FieldDescription>{description}</FieldDescription>}
      <FieldError>{errorMessage}</FieldError>

      <Popover className='w-[--trigger-width]'>
        <ListBox
          items={items}
          className='max-h-[inherit] overflow-auto p-2 outline-0 scrollbar-thin scrollbar-track-ui-400 scrollbar-thumb-ui-200 dark:scrollbar-track-ui-900 dark:scrollbar-thumb-ui-700'
        >
          {children}
        </ListBox>
      </Popover>
    </RACComboBox>
  );
};

const _ComboBox = React.forwardRef(Root);

type ComboBoxItemProps = DropdownItemProps;

const Item = (props: ComboBoxItemProps) => {
  return <DropdownItem {...props} />;
};

export const Section = <T extends object>(props: ListBoxSectionProps<T>) => {
  return <ListBoxSection {...props} />;
};

export const ComboBox = _ComboBox as typeof _ComboBox & {
  Item: typeof Item;
  Section: typeof Section;
};

ComboBox.Item = Item;
ComboBox.Section = Section;