keen_web_multiselect

Phoenix LiveView wrapper for the <web-multiselect> custom element. Themeable, virtual-scrolling, form-aware.

wrapper v2.0.0 upstream v2.2.0
💧

Elixir Only

The declarative surface: options, selection, a shared shadow-DOM theme from `config`, CSS-variable theming, and client-side REST loading via `data-fetch-*` — pure HEEx + config, no per-instance JavaScript.

🧩

Basic Usage

Declarative `<option>` markup, single/multi select, keyboard-only navigation, rich content, search hints, filter-vs-navigate search, and RTL.

📦

Data & API

Custom objects, tuple arrays, member callbacks, async search, form integration (json/csv/array), public API methods, and cascading selects.

🔔

Events & Interceptors

DOM events, the `on*` property twin, `beforeSelect`/`beforeDeselect` veto interceptors (now with toast reasons), the `keydownCallback` keyboard hook, and `showMessage()`.

📱

Responsive & Mobile

Phone fullscreen overlay (`mobile_presentation`), the fullscreen search toggle, container-responsive badge collapse (`collapse_badges_below`), presentation-aware rendering, and RTL.

🌳

Tree of Options

Hierarchical options via a materialized `path_member` — always-expanded, indented by depth, branch/leaf theming hooks, ancestor-preserving search, custom separators.

🔎

External Search (FlexSearch)

Externalize the whole search via `searchCallback` — fuzzy, partial, accent-insensitive, ranked matching from a FlexSearch index. Works on flat lists and trees; FlexSearch never enters the wrapper bundle.

⚡

Virtual Scrolling

15,000 options with virtual scrolling, init/render/search timing, plus rich rendering with priority-based badges.

✨

Custom Rendering

Render callbacks for options, badges, and selected items — including whole-badge cards (`renderBadgeCallback`) and owning the selection UI (`enable_selected_popover`).

🎛️

Action Buttons

Static and dynamic action buttons: tooltips, visibility/disabled callbacks, custom actions, layout wrap, Font Awesome, plus position/rows/alignment.

💬

Tooltips

Hover tooltips on dropdown options — default content, custom callbacks, virtual scroll, placement/follow-cursor, side placement, independent styling, and badge tooltips.

📏

Sizes & Fonts

Global `--ms-rem` scaling, fine-grained CSS vars, narrow-input / wide-dropdown patterns, and six font-family demos.

🎨

Base Variables

Interactive `--base-*` typography panel — font family, sizes, weights, line heights — wired live into four multiselects.

🎭

Theming

Size presets and seven full themes — Dark, Neon, Audi Corporate, Rounded, Sharp/Minimal, Material, Glassmorphism.

🐛

Logging & Debugging

Built-in categorized logging — INIT/DATA/UI/INTERACTION — with runtime enable/disable and category-specific controls.

📐

Positioning Edge Cases

How the dropdown anchors inside transformed, contained, and container-query ancestors — plus the drift-detection warning.