Elemental.DataInput.Dropdown (elemental v0.3.0)

An abstraction around DaisyUI's dropdown.

Think of it as a more advanced Elemental.DataInput.Select with support for multi-select and searching out of the box.

This is implement in a manner that works drop-in in forms and uses only dead/stateless components with minimal JavaScript.

Usage

Make sure in your application to include the required JavaScript hooks required for the main behaviour, found in dropdown.js.

See the hooks section for more details.

Most basic usage is done by simply passing it options

<.dropdown options={["Foo", "Bar"]}/>

See dropdown/1 for details on the support properties and their behaviour.

JavaScript hooks

This implementation requires JavaScript hooks for it's main behaviour, utilizes 3 main hooks

  • ElementalDropdownSearch implementing filtering/search behaviour when enabled.
  • ElementalDropdownSingleItem implementing prompt changes when using single item mode.
  • ElementalDropdownMultiItem implementing prompt changes when using multi item mode.

Implementation considerations

The component is implemented as a dead/stateless component as to simplify it's usage and avoid complexities associated with live/stateful components.

This comes from my dissatisfaction with implementations I found which have behaviours that I kept finding to be non-obvious and odd, from how they interact with events sent to parent vs themselves, along with how they handle their states.

Additionally the implementation aims to be drop-in compatible with forms in general as well as how forms are handled in Phoenix/LiveView without requiring much fuss.

The behaviour relies heavily on the provided minimal JavaScript hooks, as well as relying on native form behaviours with how forms deal with radio buttons and checkboxes.

Summary

Functions

The primary dropdown component.

Functions