Skip to content

chore: Updating name of useAutocomplete textfieldProps to inputProps #8762

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 22, 2025
Merged

chore: Updating name of useAutocomplete textfieldProps to inputProps #8762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a3592e
chore: Updating name of useAutocomplete textfieldProps to something m…
LFDanLu Aug 22, 2025
2a33b35
actually use new type whoops
LFDanLu Aug 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/@react-aria/autocomplete/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@ export {useAutocomplete} from './useAutocomplete';

export type {AriaSearchAutocompleteOptions, SearchAutocompleteAria} from './useSearchAutocomplete';
export type {AriaSearchAutocompleteProps} from '@react-types/autocomplete';
export type {AriaAutocompleteProps, AriaAutocompleteOptions, AutocompleteAria, CollectionOptions} from './useAutocomplete';
export type {AriaAutocompleteProps, AriaAutocompleteOptions, AutocompleteAria, CollectionOptions, InputProps} from './useAutocomplete';
20 changes: 13 additions & 7 deletions packages/@react-aria/autocomplete/src/useAutocomplete.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* governing permissions and limitations under the License.
*/

import {AriaLabelingProps, BaseEvent, DOMProps, FocusableElement, Node, RefObject} from '@react-types/shared';
import {AriaLabelingProps, BaseEvent, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, RefObject, ValueBase} from '@react-types/shared';
import {AriaTextFieldProps} from '@react-aria/textfield';
import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
Expand All @@ -28,6 +28,12 @@ export interface CollectionOptions extends DOMProps, AriaLabelingProps {
disallowTypeAhead: boolean
}

export interface InputProps<T = FocusableElement> extends DOMProps,
FocusEvents<T>,
KeyboardEvents,
Pick<ValueBase<string>, 'onChange' | 'value'>,
Pick<AriaTextFieldProps, 'enterKeyHint' | 'aria-controls' | 'aria-autocomplete' | 'aria-activedescendant' | 'spellCheck' | 'autoCorrect' | 'autoComplete'> {}

export interface AriaAutocompleteProps<T> extends AutocompleteProps {
/**
* An optional filter function used to determine if a option should be included in the autocomplete list.
Expand Down Expand Up @@ -57,8 +63,8 @@ export interface AriaAutocompleteOptions<T> extends Omit<AriaAutocompleteProps<T
}

export interface AutocompleteAria<T> {
/** Props for the autocomplete textfield/searchfield element. These should be passed to the textfield/searchfield aria hooks respectively. */
textFieldProps: AriaTextFieldProps<FocusableElement>,
/** Props for the autocomplete input element. These should be passed to the input's aria hooks (e.g. useTextField/useSearchField/etc) respectively. */
inputProps: InputProps,
Comment on lines +66 to +67
Copy link
Member Author

@LFDanLu LFDanLu Aug 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

brings up more in line with how we've named this in other hooks and narrows the type to match FieldInputContext.

/** Props for the collection, to be passed to collection's respective aria hook (e.g. useMenu). */
collectionProps: CollectionOptions,
/** Ref to attach to the wrapped collection. */
Expand Down Expand Up @@ -368,7 +374,7 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut

// Only apply the autocomplete specific behaviors if the collection component wrapped by it is actually
// being filtered/allows filtering by the Autocomplete.
let textFieldProps = {
let inputProps = {
value: state.inputValue,
onChange
} as AriaTextFieldProps<FocusableElement>;
Expand All @@ -381,8 +387,8 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
};

if (collectionId) {
textFieldProps = {
...textFieldProps,
inputProps = {
...inputProps,
...(shouldUseVirtualFocus && virtualFocusProps),
enterKeyHint: 'go',
'aria-controls': collectionId,
Expand All @@ -397,7 +403,7 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
}

return {
textFieldProps,
inputProps,
collectionProps: mergeProps(collectionProps, {
shouldUseVirtualFocus,
disallowTypeAhead: true
Expand Down
4 changes: 2 additions & 2 deletions packages/react-aria-components/src/Autocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function Autocomplete<T extends object>(props: AutocompleteProps<T>): JSX
let inputRef = useRef<HTMLInputElement | null>(null);
let collectionRef = useRef<HTMLElement>(null);
let {
textFieldProps,
inputProps,
collectionProps,
collectionRef: mergedCollectionRef,
filter: filterFn
Expand All @@ -49,7 +49,7 @@ export function Autocomplete<T extends object>(props: AutocompleteProps<T>): JSX
values={[
[AutocompleteStateContext, state],
[FieldInputContext, {
...textFieldProps,
...inputProps,
ref: inputRef
}],
[SelectableCollectionContext, {
Expand Down