Fwiw, CommunityConfiguration has implemented two components using this pattern: T357710: Page titles selector control and T357708: Namespaces selector control. Just mentioning here for an eventual refactor when Codex implements this.

One "not accurate" behavior we left for follow-up improvements is the menu item select event handling. In our current implementation the menu is closed after a click on a menu item. That is not suitable for a multi-select component in which the user is expected to select more than one element. In this case the menu should be left open until the field looses its focus. Maybe we could make this a prop for MenuItem component, eg: closeAfterMenuClick: false (default to true).

I've created the Figma spec sheet and Guidelines for the ChipInput with menu functionality in T366006.

As discussed with @AnneT, we aim to integrate both ChipInput variants, with and without the menu, into the existing ChipInput component. It will feature the following props:

Types of ChipInput

There will be 3 type of ChipInput based on how the chips are created:

1. Custom input (current version implemented):
chips can be created by typing and then pressing the Enter key, clicking outside the input, or tabbing out.
2. Preset options:
chips can only be created by selecting the predefined menu options. If there are no results for the text typed by the user, a non-interactive "no results" message will be displayed within the menu.
3. Custom input and preset options:
users can either select predefined options from the menu or add custom chips by typing and then pressing the Enter key, clicking outside the input, or tabbing out.

Selected items within the menu

When preset options are available within a menu, the selected menu items will become chips. There are 2 ways of showing these selected menu items in the menu:

1. Selected menu items disappear from the menu once converted to chips.
2. Selected menu items remain displayed in the menu as chips.

I recommend not displaying selected items in the menu when they are created as chips (1) to improve user experience, since it will be easier for the user to detect which remaining menu items they can include as chips. Please review both options in this Figma prototype.

Optional stat icon

To maintain consistency with other form items (TextInput, TextArea, Select, etc.), the ChipInput will include an optional start icon. The start icon will be visible only when no chips are included within the input, to prevent overcrowding. However, the start icon will always be visible in the version where chips are included outside the input. Please review both options in [[ To maintain consistency with other form items, the ChipInput will include an optional start icon. The start icon will be visible only when no chips are included within the input, to prevent overcrowding. However, the start icon will always be visible in the version where chips are included outside the input. Please review both options in this [[ https://www.figma.com/proto/V8MBvInCI3mXB5LNMhRzJF/Chip-Input---T337095?page-id=2101%3A62033&node-id=2101-63118&t=EymEpuWtNNrJSDId-0&scaling=min-zoom&starting-point-node-id=2101%3A63118 | Figma prototype ]].