This seems related to https://phabricator.wikimedia.org/T363431. That is a ticket for a component needed in Metrics Platform that is very similar to MenuTagMultiselectWidget in OOUI.

cc @Milimetric

I've created the Figma spec sheet and Guidelines for the ChipInput with menu functionality. 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 ]].