Once the Vue version has been added, reviewed by design, and finalized, and the guidelines have been added, the component can be taken out of WIP and published as part of the next Codex release.
Open issues
- Finalize the name of the component. (patch)
- Discuss with users and make a decision. It's MultiselectLookup!
- Finalize open/close behavior of the menu: (patch)
- When the user selects an item, the input clears - should it? Yes, always.
- When the user selects an item, should the menu remain open or close? Should this be configurable? Always close the menu. We can make this configurable in the future if needed.
- On one hand, if the menu remains open, it's weird that there are menu items that don't correspond to the input (since the input has been cleared)
- On the other hand, if you close the menu and the user wanted to select another item from it, they have to re-type the search term. Is this the most common behavior? Or is it more common to select one item per search term? Does this depend on the feature?
- Structure of the demo page (patch)
- Should this match the Lookup page? If so, one should be changed? Yes, and Lookup should be simplified/reorganized
- When there are enough chips to make the input span more than 1 line, the menu does not move to the bottom of the reference element and overlaps it (patch)
- When you click a chip, its value becomes the input value. This is okay if the chip only has a value, but if it has a label and a value (e.g. label: "carrot", value: "Q81"), you want the label to become the input value so you can search for the human-readable label instead of the unique ID. (patch)
- Chip editing race condition (patch)
- When you select an item, then click the chip so its label goes into the input, you should be able to easily and clearly undo this action (i.e. reselect the item) via keyboard navigation. For example, in this demo, if you search for and select "carrot", then click the chip, the menu shows the "carrot" item as highlighted but you can't hit enter to select it. This is confusing, and the items should potentially not be highlighted at all since there might be multiple items matching that label.
- Pending animation doesn't apply to the input element (patch)
- When you search for something in the demo that fetches Wikidata items, the pending animation is applied to the element outside the <input> but not within it
Acceptance criteria
- All open issues have been resolved
- The component has passed a final design review
- Update the Figma library to include the new component
- The component is moved out of WIP by exporting the component in lib.ts instead of components-wip/index.ts. (patch)