Phoenix LiveComponent for a combobox UI element with search and selection functionality.

The component allows users to select an option from a list of options, which can be searched by typing in the input field.

The component renders an input field with a dropdown anchor and a hidden input field for submitting the selected value.

The number of options displayed in the dropdown is limited to 15 by default but can be customized. When a user types into the input field, the component searches the available options and provides suggestions based on the input.

Any function can be supplied via suggest_fun attribute

• see the provided ComboBox.StaticSearch.

In most cases the suggest_fun runs an operation that could be deferred, so by default, the async={true} attr calls it in a background Task and updates the suggestions asynchronously. This way, you can render the component without having to wait for suggestions to load.

If you explicitly need to make the operation synchronous, you may pass async={false} option.

If your initial options are not provided up-front at initial render, lack of options attr value combined with async=true calls the suggest_fun.("", []) asynchronously - that special clause can be used to provide the initial set of suggestions updated right after the initial render.

To simplify integration testing, suggestions load up synchronously during tests. This lets you skip waiting for suggestions messages to arrive. The asynchronous behaviour alone is already tested in ComboBox own test suite, so there is no need for additional verification.