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

[meesvandongen]

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.

[snowystinger]

Thanks for the feedback, some of this may fall out of our API discussion as we solidify what we're offering there.
Related items:
RSP Component Milestones (view)
RSP Component Milestones (view)

[LFDanLu]

@meesvandongen mind sharing your specific use case? I'm not sure I'm understanding the context here 100%.

[meesvandongen]

The use case is mainly outside of a popover;

Here is a toolbar, which might contain a select that filters a menu to only show items of a specific region. This would look like the image below.

I would prefer to collapse the two toolbars into one;

But the order in the DOM is as the image below; leading to a situation in which the second element will always be inside the context of the autocomplete.