New component request: Autocomplete #10240
Description
Describe your motivation
Autocomplete is a handy component and is required in many business applications. Vaadin does not have an official Autocomplete component; instead, users must create one by extending TextField or Combobox. It would be great to have an official one in the component library.
Describe the solution you'd like
I would like Autocomplete to have parts below supported
- Input: Input container in a Vaadin Text Field where the user enters the value
- Overlay: The list of suggestions
- Prefix slot: Same as Input prefix slot
- Suffix slot: Same as Input suffix slot
I imagine properties and events would be like:
- search event: Triggers on key stroke and allows users to update the items list based on value
- value-selected event: Dispatches when the user selects an item from the list
- key-down event: Dispatches on key stroke when the text field is focused (It would allow users to add new items to the list) - The difference between Search event and KeyDown event is that KeyDown event is dispatched when 'Enter' is pressed; on the other hand, Search is dispatched when a character is entered
- options/items: List of items displayed in the list
- value property: The value
Some useful properties should be there, such as show-overlay-on-focus, item-value-path, item-label-path, allow-clear
Describe alternatives you've considered
No response
Additional context
I have checked other libraries that have Autocomplete components. Antd autocomplete is clear, basic https://ant.design/components/auto-complete. Mui has one, which is a bit complex, but has many functionalities like grouping https://mui.com/material-ui/react-autocomplete/#grouped