Combobox with TextField are not working together with the latest version of react-aria-components #9111
-
|
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 causeWould you happen to have any suggestions on how I can fix this issue? Thank you! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
You should just be using Input Is there a reason that you're using TextField? |
Beta Was this translation helpful? Give feedback.
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?