adobe / adobe/react-spectrum

[RAC] Allow usage of user-input components inside Autocomplete

Open
#8,335 9 comments 0 reactions 0 assignees View on GitHub
enhancement has workaround
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

Allow input components, such as selects, search fields, text fields, etc. to be used next to the main search/text field of an autocomplete. (inside the autocomplete context).

### 🤔 Expected Behavior?

Additional fields inside an Autocomplete do not compete for user focus.

### 😯 Current Behavior

Given an Autocomplete with a menu as collection that should be filtered/focus managed.

- Using an unrelated Select inside an Autocomplete is not possible; when the user opens the select, options are not selectable for the user. (the select auto closes on hover).
- Using an unrelated Textfield inside the Autocomplete will result in focus behavior such that the user is not able to type anything in this text field.

### 💁 Possible Solution

- Allow setting the `slot` property on unrelated items, excluding those items from autocomplete behaviour.
- Using render props inside the autocomplete to somehow point to the relevant text field used for filtering.

### 🔦 Context

This feature could be useful for cases in which you want the user to provide additional information to the search result.

e.g. if the user clicks on a menu item, and a specific option is selected from a select menu, a different action should be taken.

One of the main problems is that the Autocomplete dictates the DOM structure; if you want the main search field to be at the start of a DOM branch, the Autocomplete will be right above it; any subsequent items between the search field and the Menu/Collection will thus also be inside the Autocomplete in a normal layout flow.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.