Combobox with TextField are not working together with the latest version of react-aria-components

[elenasolomon]

Hello,

I have the following implementation that uses components from react-aria-components (Combobox, Popover, TextField, Input, etc.)

function MyCombobox({props}){
return (
<ComboBox
      isDisabled={disabled}
      isReadOnly={readOnly}
      aria-label={label}
      allowsCustomValue
      allowsEmptyCollection
      items={showAll ? options : filteredItems}
      inputValue={searchText !== null ? searchText : fieldState.inputValue}
      selectedKey={fieldState.selectedKey}
      placeholder={placeholder}
      onSelectionChange={handleSelectionChange}
      onInputChange={handleInputChange}
      menuTrigger={menuTrigger}
      onFocus={handleFocus}
      onBlur={handleBlur}
      style={containerStyle}
      isInvalid={!!(error?.message || internalErrors?.length > 0)}
      className={classNames(`${CLASSNAME_PREFIX}-SearchCombobox`, containerClassName)}
      onOpenChange={handleOpenChange}
    >
      <Button
        className={`${CLASSNAME_PREFIX}-Button`}
      >
        <span className="open-icon" />
      </Button>
      <TextInput
        style={style}
        className={classNames(`${CLASSNAME_PREFIX}-Input`, className)}
        tooltip={tooltip}
        title={fieldState.inputValue}
        error={getDisplayError()}
        tooltipPosition={tooltipPosition}
        tooltipType={tooltipType}
        placeholder={placeholder}
        value={searchText !== null ? searchText : fieldState.inputValue}
      />

      <Popover
        offset={0}
        className={`${CLASSNAME_PREFIX}-Popover`}
      >
          <ListBox
            id={generateComponentId(id, 'list-loading')}
            data-testid={generateComponentId(id, 'list-loading')}
            className={`${CLASSNAME_PREFIX}-ListBox`}
          />
      </Popover>
    </ComboBox>
)
}

My TextInput component implementation looks like this:

function TextInput({props}){
return (
    (
      <TextField
        aria-label={label}
        isDisabled={disabled}
        isReadOnly={readOnly}
        autoComplete={autoComplete}
        className={`${CLASSNAME_PREFIX}-TextInput`}
        pattern={pattern}
        value={typeof value === 'number' ? String(value) : value}
        isInvalid={!!error?.message}
      >
        <Input
          ref={inputRef}
          title={computeTitle()}
          onClick={handleClick}
          onChange={handleChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
          onMouseOver={handleMouseOver}
          onMouseOut={handleMouseOut}
          onKeyUp={handleKeyUp}
          onPaste={handlePaste}
          placeholder={placeholder}
          maxLength={maxLength}
          className={classNames(`${CLASSNAME_PREFIX}-TextInput-input`, className)}
          type={password ? 'password' : 'text'}
          style={{ ...style, ...(preventFocusStyles && extraStyles) }}
          {...props}
        />
      </TextField>
    )
  );
}

After updating the react-aria-components from version 1.11.0 to version 1.13.0, the Popover is no longer displayed correctly, because the --trigger-width CSS property is not set. The root cause of the problem is that, in the previous version of the library, the TextField read from the InputContext (which was provided by the Combobox), and now, in the latest version, it reads from FieldInputContext (which is not provided by the Combobox). Because of this, the Combobox does not set the inputRef, and without inputRef, no --trigger-width is computed.

// from react-aria-components/TextField.tsx -> version 1.11.0
export const TextField = /*#__PURE__*/ createHideableComponent(function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
  [props, ref] = useContextProps(props, ref, TextFieldContext);
  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
  let inputRef = useRef(null);
  let [inputContextProps, mergedInputRef] = useContextProps({}, inputRef, InputContext);

// from react-aria-components/TextField.tsx -> version 1.13.0
export const TextField = /*#__PURE__*/ createHideableComponent(function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
  [props, ref] = useContextProps(props, ref, TextFieldContext);
  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
  let inputRef = useRef<HTMLInputElement>(null);
  [props, inputRef as unknown] = useContextProps(props, inputRef, FieldInputContext); ->>>>>>> the root cause

Would you happen to have any suggestions on how I can fix this issue?

Thank you!

[snowystinger]

You should just be using Input
https://react-spectrum.adobe.com/react-aria/ComboBox.html#combobox

Is there a reason that you're using TextField?