[RAC] Allow usage of user-input components inside Autocomplete
- 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
Assessment
This issue has not been assessed yet.