Select
Select component is used as wrapper to any existing <SELECT> element and allows customisation of the dropdown, allow to search through options whilst keeping original select functionality.
It is keyboard accessible and allows to cycle through options with Up and Down arrow keys as well as Tab key.
| Example | Code |
|---|---|
<as-select>[select element]</as-select> |
| Event name | Description | Example value |
|---|---|---|
| as-select:created | Fired when component is rendered. Has detail object. | {id: "286d68e7-d6ad-4440-b94b-ba29bb1e5552", action: "created"} |
| as-select:updated | Fired when component receives [updated] attribute. This should happen each time <SELECT> element within is being updated with JS. [updated] attribute on the component forces re-render of the component. Has detail object. | {id: "286d68e7-d6ad-4440-b94b-ba29bb1e5552", action: "updated"} |
| as-select:selected | Fired when option is selected. Has detail object. | {id: "286d68e7-d6ad-4440-b94b-ba29bb1e5552", action: "selected", option: "Acid"} |
| as-select:show | Fired when dropdown is shown. Has detail object. | {id: "286d68e7-d6ad-4440-b94b-ba29bb1e5552", action: "show"} |
| as-select:hide | Fired when dropdown is hid. Has detail object. | {id: "286d68e7-d6ad-4440-b94b-ba29bb1e5552", action: "hide"} |
| as-select:search | Fired when user start typing within component's <INPUT> element. Has detail object. | {id: "286d68e7-d6ad-4440-b94b-ba29bb1e5552", action: "search", searchword: "Lorem ipsum"} |