Function ComboBoxInner

packages/react-aria-components/src/ComboBox.tsx:185–349

({props, collection, comboBoxRef: ref}: ComboBoxInnerProps<T>)

}

function ComboBoxInner<T>({props, collection, comboBoxRef: ref}: ComboBoxInnerProps<T>) {
  let {name, formValue = 'key', allowsCustomValue} = props;
  if (allowsCustomValue) {
    formValue = 'text';
  }

  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
  let {contains} = useFilter({sensitivity: 'base'});
  let state = useComboBoxState({
    ...props,
    defaultFilter: props.defaultFilter || contains,
    // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)
    items: props.items,
    children: undefined,
    collection,
    validationBehavior
  });

  let buttonRef = useRef<HTMLButtonElement>(null);
  let inputRef = useRef<HTMLInputElement>(null);
  let groupRef = useRef<HTMLDivElement>(null);
  let listBoxRef = useRef<HTMLDivElement>(null);
  let popoverRef = useRef<HTMLDivElement>(null);
  let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);
  let {
    buttonProps,
    inputProps,
    listBoxProps,
    labelProps,
    descriptionProps,
    errorMessageProps,
    valueProps,
    ...validation
  } = useComboBox(
    {
      ...removeDataAttributes(props),
      label,
      inputRef,
      buttonRef,
      listBoxRef,
      popoverRef,
      name: formValue === 'text' ? name : undefined,
      validationBehavior
    },
    state
  );

  // Make menu width match input + button
  // Left for backward compatibility in case a <Group> is not rendered.
  let [menuWidth, setMenuWidth] = useState<string | null>(null);
  let onResize = useCallback(() => {
    if (inputRef.current && !groupRef.current) {
      let buttonRect = buttonRef.current?.getBoundingClientRect();
      let inputRect = inputRef.current.getBoundingClientRect();
      let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;
      let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;
      setMenuWidth(maxX - minX + 'px');